[Python知识库]flask搭建一个图书管理平台02-注册蓝图和模板渲染

上节回顾

上节主要分析了平台预实现的功能、所需技术栈、以及flask项目初始化。详细可点击查看：

flask搭建一个图书管理平台01-环境配置和项目初始化

本节预览

• 目录树调整
• 注册蓝图
• mock数据
• 模板渲染

本节正文

目录树调整
目前我们仅仅是创建了一个app.py文件，用做测试Flask是否正常运行。

后边还会有log日志、models模型类、orm进行数据的curd以及views视图(路由)函数等。所以要对包进行分类

以下是我整理后的目录结构(可根据需要更改),注意除了之后的log和templates

bookmanage
  -app 
    -views # 项目下的所有视图(路由)函数
        -book.py # 图书管理相关的方法
    -templates #模板文件夹，不要拼写错
        -index.html #首页html模板文件
    -models # 这里写数据模型类
    -curd # 这里是对数据的增删改查
    -utils # 这里作为工具类管理，如log、error等封装
    -init.py #初始化Flask实例app
  -run.py #项目启动文件，可直接python run.py运行
  -conf.py #项目配置文件，后边接入sqlalchemy配置文件用
  -logs #存储日志文件
  -bookvenv #虚拟环境，后边接入git，可以操作忽略上传

注册蓝图
上节我们只有一个app.py文件，要进行拆分，测试一下原本的程序是否正常运行

book.py文件代码如下：

# book.py
from app import meng

@meng.route('/')
def hello_world():
    return 'hello_world'
    

app包下的__init__.py文件代码如下：

from flask import Flask

meng = Flask(__name__)

run.py文件的代码如下：

from app import meng

if __name__ == '__main__':
    meng.run(host='0.0.0.0',port=5000,debug=True)

运行测试一下，发现404，找不到原来的路径了，这是什么原因那？

这里可以看到，我们run.py从__init__.py中获取到了实例化对象meng,并直接返回，没有走book.py中的路由，所有找不到，提示404

这里有2中方法去解决：
1.修改run.py中app实例的导入(from app.views.book import meng)
2.通过注册蓝图去解决

我们这里通过flask中的蓝图进行解决，因为第一种处理方法，如果后边模块比较多的话，不利于管理，容易引起循环导入的异常问题

修改book.py文件

from flask import Blueprint

book = Blueprint('book', __name__)


@book.route('/', methods=['GET'])
def index():
    return 'hello world目录更新版'

修改run.py文件

from app import meng
from app.views.book import book
meng.register_blueprint(book)


if __name__ == '__main__':
    meng.run(host='0.0.0.0', port=5000, debug=True)

运行测试一下，发现显示正常，‘hello world目录更新版’

mock数据
book.py文件如下:

from flask import Blueprint, render_template

book = Blueprint('book', __name__)


@book.route('/', methods=['GET'])
def index():
    nick_name = 'xf meng'

    books = [
        {'title': 'flask web开发入门、进阶与实战', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'django程序设计', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'python学习手册', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'python程序设计', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': '算法指南', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'leetcode进阶', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战1', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战2', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战3', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战4', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'}
    ]

    # return render_template('index.html', nick_name=nick_name, books=books)
    return dict(nick_name=nick_name,books=books)

访问http://127.0.0.1:5000/#，检查返回数据是否一致

{
  "books": [
    {
      "desc": "\u8fd9\u662f\u4e00\u95e8flask\u5165\u95e8\u4e66\u7c4d\uff0c\u6709\u5174\u8da3\u53ef\u4ee5\u770b\u4e0b",
      "link": "https://weread.qq.com/web/reader/53332d50724b400c533286e",
      "time": "2022-10-26",
      "title": "flask web\u5f00\u53d1\u5165\u95e8\u3001\u8fdb\u9636\u4e0e\u5b9e\u6218"
    },
    ......
    ],
  "nick_name": "xf meng"
}
    

这里看到数据是返回了，但是中文变成字符集了，这个flask返回中文的一个问题，需要对实例对象meng进行配置JSON_AS_ASCII为False

修改app.py文件

from app import meng
from app.views.book import book
meng.register_blueprint(book)
meng.config['JSON_AS_ASCII'] = False #这个是新增的配置


if __name__ == '__main__':
    meng.run(host='0.0.0.0', port=5000, debug=True)

好了，下边我们运行下，再次测试mock数据的展示,发现成功展示

{
  "books": [
    {
      "desc": "这是一门flask入门书籍，有兴趣可以看下",
      "link": "https://weread.qq.com/web/reader/53332d50724b400c533286e",
      "time": "2022-10-26",
      "title": "flask web开发入门、进阶与实战"
    },
    {
      "desc": "这是一门flask入门书籍，有兴趣可以看下",
      "link": "https://weread.qq.com/web/reader/53332d50724b400c533286e",
      "time": "2022-10-26",
      "title": "django程序设计"
    },
    ......
     ],
  "nick_name": "xf meng"
}

模板渲染
数据有了，可以利用flask中的render_template，将所需变量返回给templates下的模板文件，去展示数据

在templates目录下新建index.html模板文件，然后修改book.py文件

from flask import Blueprint, render_template

book = Blueprint('book', __name__)


@book.route('/', methods=['GET'])
def index():
    nick_name = 'xf meng'

    books = [
        {'title': 'flask web开发入门、进阶与实战', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'django程序设计', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'python学习手册', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'python程序设计', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': '算法指南', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'leetcode进阶', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战1', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战2', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战3', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'},
        {'title': 'flask web开发入门、进阶与实战4', 'link': 'https://weread.qq.com/web/reader/53332d50724b400c533286e',
         'desc': '这是一门flask入门书籍，有兴趣可以看下', 'time': '2022-10-26'}
    ]

    return render_template('index.html', nick_name=nick_name, books=books)

templates下的index.html可以加个p标签接收返回的nick_name

通过for循环遍历books变量，用li标签展示书籍内容

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BookList</title>
</head>
<body>
    <h2>电子图书管理平台</h2>
    <p>{{nick_name}},欢迎进入</p>
    <ul>
        {% for book in books %}
        <li>{{book.title}}</li>
        {% endfor %}
    </ul>
    <footer><small>copy;2022 <a href="#">跟小孟一起学习flask吧，搞起来~ </a></small></footer>

</body>
</html>

访问http://127.0.0.1:5000/#,发现模板渲染成功

到此，注册蓝图和模板渲染相关的功能已经实现了，但是我们的数据都是mock的，下节我们学习下通过sqlalchemy操作数据库，添加真实的数据