使用Python-Flask框架开发Web网站系列课程（四）构建前端
前言
使用IDE：PyCharm
操作系统：Mac
Python的版本：3.6
我的邮箱：[email protected]
交流群：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
在/myproject/frontend/base新增_sidebar.html
在/myproject/frontend/base新增_navbar.html
这里利用current_user的判断是否登录的方法，如果已登录则显示登出，未登录则显示登录的链接。
在/myproject/frontend/base新增layout.html
这个是前端总模版，里面引入了_head.html , _sidebar.html, _navbar.html 。并留了一个block content 。以后我们新增的页面，只要套用下面代码段2即可。
{{PROJECTNAME}}
{% include 'base/_head.html' %}
{% include 'base/_sidebar.html' %}
{% include 'base/_navbar.html' %}
{% block content %}{% endblock %}
代码段二：
{% extends 'base/layout.html' %}
{% block content %}
{% endblock %}
在/myproject/frontend/base 修改 index.html
新首页内容
{% extends 'base/layout.html' %}
{% block content %}
Title
{% endblock %}
预览一下，完美。
二、代码地址
github地址：https://github.com/lyy8510a/myproject/releases/tag/v4