2023年11月28日发(作者：)

编写⼀个简单的flask的前后端交互的⽹页（flask简单知识的讲

解）

实验原理：

1.什么是flask

Flask是⼀个使⽤Python编写的轻量级Web应⽤框架，其WSGI⼯具采⽤Werkzeng，模板引擎使⽤Jinja2。Flask与 Django之间的区别就是

Django将所有的拓展功能全部集中在了⼀起，因此其占据内存较多，⽽Flask作为⼀个轻量级的框架，通过拓展或者python的库来增加功

能，因此占据的内存⼩。需要什么，导⼊什么。

并且flask基于python语⾔，对有⼀定python基础的开发者⼗分友好。

基础知识

⽬录结构：

对于⼀个项⽬，flask对于项⽬⽂件的命名具有⼀定的要求。

在⼯作⽬录下⼀定要有两个⽂件夹和⼀个⽂件，其中图⽚，视频，css代码，js代码，icon等静态的资源放 在static⽂件夹下（名字⼀定不能

弄错），css代码要新建⼀个css⽬录并放在该⽬录下，js代码要新建⼀个js⽬录并放在该⽬录下。

之后，对于html⽂件，要放在templates⽂件夹下。最后，运⾏的.py⽂件默认命名为以及。

总之如下：

基础⽤法：

⾸先，Flask在python中是作为类封装好的，因此要先使⽤import来导⼊flask类，其次就是要实例化类，使⽤app = Flask(name)可以实例化

⼀个flask类。之后，Flask开发的基本模式就是在程序中将⼀个视图函数分配⼀个URL，当⽤户访问⼀个URL时，系统就会执⾏这个URL对

应的视图函数，然后将返回值渲染到浏览器上。

将视图函数赋予url需要使⽤@route(“url”)装饰器，url为要访问的资源页⾯，默认情况下在根⽬录，也就是“/”，然后在这个装饰器后定义视图

函数。

视图函数的返回值，可以直接插⼊html代码，也可以使⽤render_template()函数来指定html⽂件（该⽂件⼀定要放在templates⽂件夹下），

也可以使⽤redirect函数将其重定向到另⼀个视图函数对应的url。

c.如何在html中插⼊flask代码，如何将flask中的数据传⼊html中？

在html中，使⽤变量以及调⽤函数要使⽤{{变量名}}来指定flask代码中的变量，Flask的python语句要使⽤{% %}来插⼊，如：

注意，if语句后⾯要有endif，for语句后⾯要有endfor。

如何传输数据：

可以使⽤render_template()函数，第⼀个参数为要渲染的html⽂件，后⾯的多个参数为 html中的变量名 = py中的变量名。

中的数据库flask_sqlalchemy

使⽤这个数据库，⾸先需要指定db⽂件的⼯作⽬录，

WIN = with('win')

if WIN:

prefix = 'sqlite:///'

else:

prefix = 'sqlite:////'

['SECRET_KEY'] = ('SECRET_KEY', 'secret string')

['SQLALCHEMY_DATABASE_URI'] = ('DATABASE_URL', prefix + (_path, ''))

['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

这些配置的⽬的就是将db⽂件命名为然后将db⽂件的⽣成以及⼯作⽬录都指定到根⽬录下。

由于数据库在python中也是⼀个对象，因此也需要实例化，使⽤db = SQLAlchemy(app)实例化。

在flask_sqlalchemy中，⼀个表就是python中的⼀个类，因此，要定义表，就得定义⼀个类。

class books():

id = (r, primary_key=True)

book_id = (r)

book_name = ((100))

classification = ((20))

然后使⽤_all()⽅式来在db⽂件中创建⼀个这样的表，然后实例化这个类，将这个类的对象作为⼀⾏添加到表中

((Book))，然后再使⽤()提交更新，就可以完成⼀个数据的填⼊了，之后在使⽤类⽅法的()就可以

查询出所有的信息了。

e.如何引⽤css⽂件：

html引⽤flask项⽬中的⽂件，只能使⽤url_for⽅法，并且由于这个是python函数，因此要⽤{{}}括起来，然后有两个参数，第⼀个参数代表这

个⽂件是静态⽂件还是其他的⽂件，因此是”static”，第⼆个参数代表的是以⼀个参数为根⽬录的css⽂件的路径信息。代码如下：

f.如何运⾏以及开发flask程序：

⾸先，如果不想让环境之间相互影响，建议使⽤pipenv来管理包，⾸先使⽤pipenv install来安装需要的包，如果没有对应的配置⽂件，会⽣

成两个配置⽂件，Pipfile以及，以后使⽤pipenv install的时候，相关包的⽂件就会⾃动存储在Pipfile和.lock当中，下次到新环境

时使⽤pipenv install就可以⾃动下载。之后，使⽤pipenv shell来创建⼀个新的虚拟环境。然后使⽤flask run命令就可以跑起来了。

如果要进⼊开发者模式的话，可以⼿动建⽴⼀个.flaskenv⽂件，个⽂件同⽬录，然后写上FLASK_ENV=development⼀句话就⾏了。

进⼊开发者模式后，每次修改完代码只要将浏览器硬刷新后就可以实时显⽰修改完的信息，不⽤重启程序，并且错误之后会进⼊了Jinja2提

供的debug页⾯，⾥⾯详细的说了错误的信息（有时）。

实验内容：

本次实验需要使⽤python读取中的内容，将其使⽤某种数据结构化存储，然后以表格的形式显⽰在web的页⾯上。

实验步骤及具体实现：

1.读取中的数据

定义⼀个函数read_file()，使⽤python中open⽅法打开⽂件，然后使⽤nes将⽂件⼀⾏⼀⾏以列表的形式读⼊，去除n以及⼀些奇怪的

字符后使⽤split获得包含所有信息的⼆维数组。

代码以及结果如下：

2.创建数据库，将书籍信息存⼊到数据库中。

⾸先是实例化数据库，之后修改配置⽂件，这个之前在基本原理中已经讲了，代码如下：

创建⼀个书籍的表，该表⼀共有三个字段，分别为书籍序号，书籍名，书籍分类。

然后创建视图函数，将读到每⼀本图书的信息作为参数将books类实例化，然后加⼊到表中。

3.编写前端html，渲染html并且将书籍信息传⼊到html中。

a)在视图函数中调⽤查询函数，将书籍信息从数据库中查询出来，然后使⽤render_template()函数渲染html并且将取得的books信息传⼊html

⽂件中：

b)前端建⽴⼀个表格，然后使⽤for循环不断地添加表格的⾏

该代码使⽤for循环不断读取books中的图书信息，然后⽣成表格的⼀列。

p.s 当然，这其中使⽤了css⽂件调整了样式，这⾥不细说了。

最后的实验结果如下：

⼼得体会：

1.在创建数据库的时候，要先调⽤create_all()才可以重新创建已经定义好的表类，不然的话()会报错。

2.在html中使⽤for语句，可以快速的形成重复的代码，使代码更加简洁，⽽且可以根据数据库动态更新。

3.这次实验可以说是简单编写了⼀下flask的前后端，前端简单使⽤了html和css代码，后端简单使⽤了数据库，并且实现了前后端的交互，还

是很不错的。