前言

使用IDE：PyCharm

作業系統：Mac

Python的版本：3.6

我的郵箱：[email protected]

交流群：372430835

說明：

本次課程的GitHub程式碼在最下面。

本次課程基於上個課程的程式碼，如果沒看過的請先傳送：

一、構建前端專案

前端專案我們之前有用到過，就是全部放置在/myproject/frontend資料夾下。其中static放置js和css檔案。base資料夾放置通用的頁面，如側邊欄，頂部導航條等。

1.1  建立前端資料夾及檔案

1.1.1建立資料夾

全路徑：/myproject/frontend/base

全路徑: /myproject/frontend/static/js

1.1.2 新增以下js或html檔案

新增檔案inspinia.js，在以下路徑下載

在/myproject/frontend/base新增_head.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/metisMenu/2.0.2/metisMenu.css" rel="stylesheet">


<!-- Mainly scripts -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="https://cdn.bootcss.com/metisMenu/2.0.2/metisMenu.js"></script>
<script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.js"></script>
<script src="https://cdn.bootcss.com/pace/1.0.2/pace.js"></script>
<script src="../static/js/inspinia.js"></script>
 

在/myproject/frontend/base新增_sidebar.html

<nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">

                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear">
                                <span class="block m-t-xs">
                                    <strong class="font-bold">{{PROJECTNAME}}</strong>
                                </span>
                            </span>
                        </a>

                    </div>
                    <div class="logo-element">
                        IN+
                    </div>
                </li>


                <li class="active">
                    <a href="grid_options.html"><i class="fa fa-th-large"></i> <span class="nav-label">開始</span></a>
                </li>



                <li>
                    <a href="#"><i class="fa fa-sitemap"></i> <span class="nav-label">Menu Levels </span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li>
                            <a href="#">Third Level <span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>

                            </ul>
                        </li>
                        <li><a href="#">Second Level Item</a></li>
                        <li>
                            <a href="#">Second Level Item</a></li>
                        <li>
                            <a href="#">Second Level Item</a></li>
                    </ul>
                </li>

            </ul>

        </div>
    </nav>
 

在/myproject/frontend/base新增_navbar.html

這裡利用current_user的判斷是否登入的方法，如果已登入則顯示登出，未登入則顯示登入的連結。

<div class="row border-bottom">
    <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" action="" method="post">
                <div class="form-group">
                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                </div>
            </form>
        </div>
        <ul class="nav navbar-top-links navbar-right">
            {% if current_user.is_authenticated %}
                <li>
                    <span class="m-r-sm text-muted welcome-message">歡迎使用myproject,{{current_user.username}}</span>
                </li>

                <li>
                    <a href="/account/logout">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            {% else %}

                <li>
                     <a href="/account/login">
                        <i class="fa fa-sign-out"></i> 請登入
                    </a>
                </li>

            {% endif %}
        </ul>
    </nav>
</div>

在/myproject/frontend/base新增layout.html 

這個是前端總模版，裡面引入了_head.html , _sidebar.html, _navbar.html 。並留了一個block content 。以後我們新增的頁面，只要套用下面程式碼段2即可。

<!DOCTYPE html>
<html>

<head>
    <!--第四課內容 這裡是頁面瀏覽器tab的標題-->
    <title>{{PROJECTNAME}}</title>
   {% include 'base/_head.html' %}
</head>

<body>
    <div id="wrapper">
        {% include 'base/_sidebar.html' %}
        <div id="page-wrapper" class="gray-bg">
            {% include 'base/_navbar.html' %}
            {% block content %}{% endblock %}
        </div>
    </div>
</body>
</html>




<!--{% with messages = get_flashed_messages() %}-->
  <!--{% if messages %}-->
    <!--<ul class=flashes>-->
    <!--{% for message in messages %}-->
      <!--<li>{{ message }}</li>-->
    <!--{% endfor %}-->
    <!--</ul>-->
  <!--{% endif %}-->
<!--{% endwith %}-->

程式碼段二： 

<!--第四課內容 -->
{% extends 'base/layout.html' %}

<!--第四課內容 下面是正文-->
{% block content %}
    <!--第四課內容 新頁面的內容-->
{% endblock %}

在/myproject/frontend/base 修改 index.html

新首頁內容

<!--第四課內容 -->
{% extends 'base/layout.html' %}

<!--第四課內容 下面是正文-->
{% block content %}
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Title</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

 預覽一下，完美。

 二、程式碼地址