本文章源代码（附于文末）是经由 Bilibili视频手敲而来，再经过实际情况做了小的改良（使用 MySQL 数据库），是视频教程内容的源码部分的补充，强烈建议配合视频食用。

当然有一定相关知识基础，但不愿意看视频的，可以直接理解源码，读代码注解即可。

不管你做过多少的项目，图书管理系统你总该做过吧？

面试官：你是我见过的第 XXX 个做图书管理系统的。

像这种不大不小的前后端开发项目，是最适合个人学习新技术的。这篇文章分享一个极简图书管理系统的前后端开发项目源码学习实践，帮助你快速熟悉 Flask+Vue 前后端分离的开发流程。适合基本了解 Vue 与 Flask 基本功能，但想进行前后端交互实践的学习者，动手体验自己造一个小项目。

前置知识：

Python 基础，懂 python 基本的语法
一点点 HTML+CSS+Javascript+AJAX 基础，不需要特别深入
Vue 基础，这里推荐做完互动教程（API 风格：组合式）就行：教程 | Vue.js (vuejs.org)
Flask 基础，推荐一边做一边查阅：Flask 入门教程 (helloflask.com)
MySQL 基础（非必需）

功能展示

基本页面：

实现了图书管理系统增删改查功能。

环境与依赖

环境：Python 3.10

后端：

Python 安装 Flask
pip 安装 Flask-Cors、Flask-Cors、PyMySQL

前端：Vite、Vue、axios、element-plus

案例代码使用

后端

创建好 Flask 项目后，把以下文件放入项目文件夹中即可

后端项目
│  .env         # python-dotenv 相关
│  .flaskenv    # python-dotenv 相关
│  app.py       # flask主程序
│  demo.http    # HTTP请求测试文件
│  extension.py # 扩展
│  models.py    # 数据库

你在 PyCharm 看到的应该是这样的：

通过以下命令启动后端服务器:

1
2
3

flask run
# 或
python app.py

前端

通过 Vite 创建 Vue 项目后，把/src/assets/main.css 中的内容注释掉，免得后面网页显示异常。

用本案例的两个文件替换原项目的对应文件：

1 2	App.vue main.js

你在 VSCode 看到的应该是这样的：

通过以下命令启动客户端：

1	npm run dev

问题解决记录

这个板块记录我在参照视频敲代码所遇到的问题。在我提供的代码中，这些问题已被解决。

Q: 我使用的数据库是 mysql

A: 安装 PyMySQL Python 包之后，app.config 可以这样写：

1	app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:<your mysql key>@localhost:3306/<your database name>?charset=utf8mb4'

改变上述代码中的：

<your mysql key>：你的 Mysql 数据库密码
<your database name>：你创建的数据库名，记得要预先创建好

Q: js 中模板字符串 ${var} 无效

A: 注意，字符串用`来括住，不是单引号，不是双引号。

参考：ES6 模板字符串 ${} 无效-CSDN社区

Q: 出现跨域问题

A: 代码里已经解决了跨域问题，请检查请求的 URL 是否正确

参考：flask restful 处理跨域请求 - 知乎 (zhihu.com)

Q: 希望服务端的响应报文返回中文而不是 Unicode 字符串

A: 对服务端的返回结果进行处理，如：

1 2	ret= { '''your data''' } return json.dumps(ret, ensure_ascii=False)

注意，由于 Flask 版本更新，为 Flask app 设置变量 JSON_AS_ASCII 的方法已经失效。

参考：

[flask 或 flask-restful 的接口开发，返回的 json 数据能显示中文的方法 _flask 设置 json 数据显示中文格式 _fj_changing 的博客 -CSDN 博客](https://blog.csdn.net/fj_changing/article/details/116385130#:~:text=用,flask 或 flask-restful 开发接口时，返回给前端的 json 数据中若有中文，在 postman 的 raw 里或浏览器直接访问，中文会显示成 unicode 编码之后的形式，下面是使之显示成中文的方法。)
Changes — Flask Documentation (2.3.x) (palletsprojects.com)