编写一个简单的flask的前后端交互的网页(flask简单知识的讲解)

实验原理：

1.什么是flask

Flask是一个使用Python编写的轻量级Web应用框架，其WSGI工具采用Werkzeng，模板引擎使用Jinja2。Flask与 Django之间的区别就是Django将所有的拓展功能全部集中在了一起，因此其占据内存较多，而Flask作为一个轻量级的框架，通过拓展或者python的库来增加功能，因此占据的内存小。需要什么，导入什么。

并且flask基于python语言，对有一定python基础的开发者十分友好。

2.Flask基础知识

a.Flask目录结构：

对于一个项目，flask对于项目文件的命名具有一定的要求。

在工作目录下一定要有两个文件夹和一个文件，其中图片，视频，css代码，js代码，icon等静态的资源放 在static文件夹下（名字一定不能弄错），css代码要新建一个css目录并放在该目录下，js代码要新建一个js目录并放在该目录下。

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

总之如下：

b.Flask基础用法：

首先，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中的变量名。

d.Flask中的数据库flask_sqlalchemy

使用这个数据库，首先需要指定db文件的工作目录，

WIN = sys.platform.startswith('win')
if WIN:
    prefix = 'sqlite:///'
else:
    prefix = 'sqlite:////'
app.config['SECRET_KEY'] = os.getenv('SECRET_KEY', 'secret string')

app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATABASE_URL', prefix + os.path.join(app.root_path, 'data.db'))
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
```html

      这些配置的目的就是将db文件命名为data.db然后将db文件的生成以及工作目录都指定到根目录下。
      由于数据库在python中也是一个对象，因此也需要实例化，使用db = SQLAlchemy(app)实例化。
      在flask_sqlalchemy中，一个表就是python中的一个类，因此，要定义表，就得定义一个类。

class books(db.Model):

id = db.Column(db.Integer, primary_key=True)

book_id = db.Column(db.Integer)

book_name = db.Column(db.String(100))

classification = db.Column(db.String(20))

      然后使用db.create_all()方式来在db文件中创建一个这样的表，然后实例化这个类，将这个类的对象作为一行添加到表中(db.session.add(Book))，然后再使用db.session.commit()提交更新，就可以完成一个数据的填入了，之后在使用类方法的query.all()就可以查询出所有的信息了。

  e.如何引用css文件：
    html引用flask项目中的文件，只能使用url_for方法，并且由于这个是python函数，因此要用{{}}括起来，然后有两个参数，第一个参数代表这个文件是静态文件还是其他的文件，因此是”static”，第二个参数代表的是以一个参数为根目录的css文件的路径信息。代码如下：

```css

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

首先，如果不想让环境之间相互影响，建议使用pipenv来管理包，首先使用pipenv install来安装需要的包，如果没有对应的配置文件，会生成两个配置文件，Pipfile以及Pipfile.lock，以后使用pipenv install的时候，相关包的文件就会自动存储在Pipfile和.lock当中，下次到新环境时使用pipenv install就可以自动下载。之后，使用pipenv shell来创建一个新的虚拟环境。然后使用flask run命令就可以跑起来了。

如果要进入开发者模式的话，可以手动建立一个.flaskenv文件，个app.py文件同目录，然后写上FLASK_ENV=development一句话就行了。

进入开发者模式后，每次修改完代码只要将浏览器硬刷新后就可以实时显示修改完的信息，不用重启程序，并且错误之后会进入了Jinja2提供的debug页面，里面详细的说了错误的信息（有时）。

实验内容：

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

实验步骤及具体实现：

1.读取book.txt中的数据

定义一个函数read_file()，使用python中open方法打开文件，然后使用f.readlines将文件一行一行以列表的形式读入，去除\n以及一些奇怪的字符后使用split获得包含所有信息的二维数组。

代码以及结果如下：

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

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

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

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

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

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

b)前端建立一个表格，然后使用for循环不断地添加表格的行

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

p.s 当然，这其中使用了css文件调整了样式，这里不细说了。

最后的实验结果如下：

心得体会：

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

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

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