版权声明：如需转载，请注明转载地址。 https://blog.csdn.net/oJohnny123/article/details/81988424
前言
使用IDE：PyCharm
操作系统：Mac
Python的版本：3.6
我的邮箱：51263921@qq.com
交流群：372430835
说明：
本次课程的GitHub代码在最下面。
本次课程基于上个课程的代码，如果没看过的请先传送：
使用Python的瓶框架开发的Web网站系列课程（一）构建项目
使用Python的瓶框架开发的Web网站系列课程（二）注册功能
使用Python-Flask框架开发Web网站系列课程（三）登录功能
一、构建前端项目
前端项目我们之前有用到过，就是全部放置在/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，在以下路径下载
https://github.com/lyy8510a/myproject/blob/master/frontend/static/js/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 %}
预览一下，完美。
二、代码地址
github地址：https://github.com/lyy8510a/myproject/releases/tag/v4