使用Python-Flask框架开发Web网站系列课程（四）构建前端

最新推荐文章于 2023-11-16 08:51:10 发布

廖扬扬

最新推荐文章于 2023-11-16 08:51:10 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： python学习之旅文章标签： python入门 python学习运维开发 flask devops

本文链接：https://blog.youkuaiyun.com/oJohnny123/article/details/81988424

本教程介绍如何使用Python的Flask框架构建前端项目。内容包括创建前端文件夹、添加静态资源如js和css，以及创建base文件夹内的_head.html、_sidebar.html、_navbar.html和layout.html模版。同时讲解了如何根据current_user判断登录状态来显示不同链接，并提供了index.html的修改示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

使用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=