pythonflask开发前端_使用Python-Flask框架开发Web网站系列课程（四）构建前端-阿里云开发者社区...

前言

使用IDE：PyCharm

操作系统：Mac

Python的版本：3.6

我的邮箱：51263921@qq.com

交流群：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

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

• {{PROJECTNAME}}

  IN+

• 开始

• Menu Levels

  • Third Level

    • Third Level Item

    • Third Level Item

    • Third Level Item

  • Second Level Item

  • Second Level Item

  • Second Level Item

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

这里利用current_user的判断是否登录的方法，如果已登录则显示登出，未登录则显示登录的链接。

{% if current_user.is_authenticated %}

欢迎使用myproject,{{current_user.username}}

Log out

{% else %}

请登录

{% endif %}

在/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 %}

预览一下，完美。

二、代码地址