本文将分享个人自主开发的一套图书管理系统,后端基于Python语言,采用flask-restful开发后端接口,前端采用Vue+AntDesignVue实现。对其他类似系统的实现,比如学生管理系统等也有一定的参考作用。有问题欢迎留言讨论~
关注公众号:仰望天空的蜗牛并回复“图书管理系统”可免费获取前后端源码。系统也已部署上线,实际效果可以浏览器访问网址:http://39.105.117.99/预览。
欢迎关注作者公众号,追踪更多更新更有价值的内容。
—、后端实现
1.1 接口统计
实现有以下9个接口:
1. /addBook 添加书籍 2. /queryAllBooks 查询所有书籍 3. /updateBookValid 更新书籍状态 4. /addBorrower 添加借阅人 5. /queryAllBorrowers 查询所有借阅人 6. /updateBorrowerValid 更新借阅人状态 7. /borrowBook 借书 8. /returnBook 还书 9. /queryBookHis 查询书籍借阅历史
1. /addBook 添加书籍
请求参数示例:
{"book_name": "苏东坡传", //必填项"book_code": "book-001", //必填项"book_author": "林语堂" //必填项}
响应示例(success):
{"content": "苏东坡传添加成功~","result": "success"}
2. /queryAllBooks 查询所有书籍
请求参数示例:
{}
响应示例(success):
{"result": "success","content": [{"id": 1,"book_name": "苏东坡传","book_code": "book-001","book_author": "林语堂","borrow_status": 1,"book_valid": 1,"creation_ts": "20240613115427"}],"count": 1}
3. /updateBookValid 更新书籍状态
请求参数示例:
{"book_id": 1 //必填项,书籍id}
响应示例(success):
{"content": "书籍状态更新成功","result": "success"}
4. /addBorrower 添加借阅人
请求参数示例:
{"person_name": "韩梅梅" //必填项,人员姓名}
响应示例(success):
{"content": "韩梅梅添加成功~","result": "success"}
5. /queryAllBorrowers 查询所有借阅人
请求参数示例:
{}
响应示例(success):
{"result": "success","content": [{"id": 1,"person_name": "韩梅梅","person_valid": 1,"creation_ts": "20240613120452"}],"count": 1}
6. /updateBorrowerValid 更新借阅人状态
请求参数示例:
{"person_id": 1 //必填项,人员id}
响应示例(success):
{"content": "人员在/离职状态更新成功","result": "success"}
7. /borrowBook 借书
请求参数示例:
{"book_id": 1, //必填项 借阅书籍id"borrower_id": 1 //必填项,借阅人id}
响应示例(success):
{"content": "借书成功","result": "success"}
8. /returnBook 还书
请求参数示例:
{"book_id": 1 //必填性,待还书籍id}
响应示例(success):
{"content": "还书成功","result": "success"}
9. /queryBookHis 查询书籍借阅历史
请求参数示例:
{"book_id": 1 //必填项,目标书籍id}
响应示例(success):
{"result": "success","content": [{"borrower_id": 1,"borrower_name": "韩梅梅","borrower_time": "20240613121948","return_time": "20240613122055"}],"count": 1}
1.2 创建数据库、表
项目使用mysql数据库,数据库安装教程请查询网络资源,非常多安装教程,本文不再做冗余介绍。
安装成功后,首先需创建数据库:test_library,也可以自定义数据库名;
创建数据表books、borrowers和books_borrowers_relation。
books表创建语句,
CREATE TABLE `books`(`id` int NOT NULL AUTO_INCREMENT,`name` varchar(150) NOT NULL COMMENT '书名',`code` varchar(150) NOT NULL COMMENT '书编码',`author` varchar(50) NOT NULL COMMENT '书作者',`status` int NOT NULL DEFAULT '1' COMMENT '书借用状态,1-可借,0-不可借',`valid` int NOT NULL DEFAULT '1' COMMENT '书籍状态,1-有效,0-无效',`creation` varchar(50) DEFAULT NULL COMMENT '创建时间,书籍录入到数据库的时间',PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
数据表books存储书籍相关信息。
borrowers表创建语句,
CREATE TABLE `borrowers`(`id` int NOT NULL AUTO_INCREMENT,`name` varchar(150) NOT NULL COMMENT '人员名称',`valid` int NOT NULL DEFAULT '1' COMMENT '人员状态,1-在职,0-离职',`creation` varchar(50) DEFAULT NULL COMMENT '创建时间,人员录入到数据库的时间',PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
数据表borrowers存储借阅人信息。
books_borrowers_relation创建语句,
CREATE TABLE `books_borrowers_relation`(`id` int NOT NULL AUTO_INCREMENT,`book_id` int NOT NULL COMMENT '书籍id',`borrower_id` int NOT NULL COMMENT '人员id',`valid` int NOT NULL DEFAULT '1' COMMENT '借用关系状态,1-有效,0-无效',`borrow_time` varchar(50) DEFAULT NULL COMMENT '借用时间',`return_time` varchar(50) DEFAULT NULL COMMENT '归还时间',constraint fk_book_id foreign key(book_id) references books(id),constraint fk_borrower_id foreign key(borrower_id) references borrowers(id),PRIMARY KEY(`id`)) ENGINE = InnoDB DEFAULT CHARSET = utf8;
用于存储书籍和人员借阅记录关系。
1.3 配置文件
通过yaml配置文件对数据库的连接信息进行配置。yaml文件配置内容如下,

其中library_db_name配置为你创建的数据库名,这里是"test_library";library_db_info配置的数据库连接信息,包括host、port、登录用户user和登录密码password等。
配置文件读取,读取yaml文件内容,以字典数据类型返回配置信息,供数据库连接使用。代码实现,
import yaml# 读取yaml文件,以字典类型存储def load_yaml(filename):try:with open(filename, 'r', encoding='utf-8') as stream:docs = yaml.load_all(stream, Loader=yaml.FullLoader)param_dict = dict()for doc in docs:for k, v in doc.items():param_dict[k] = vreturn param_dictexcept Exception as e:print(f"读取配置文件失败\n{e}")
load_yaml(filename)返回的param_dict即是字典类型的配置数据。

二、前端实现
2.1 开发环境准备
安装node.js和npm,安装Vue CLI,npm install -g @vue/cli。创建Vue3项目,
vue create your-project-name
启动项目,
npm run serve
启动项目后,你可以根据提示在浏览器中访问。
项目构建,
npm run build
构建完成,将生成dist目录,把该目录下的内容部署到服务器上。
安装前端框架ant-design-vue,
npm install ant-design-vue --save
安装axios、vue-router,分别用于请求后端接口和前端页面路由配置,
npm install axios vue-router --save
2.2 安装nginx
在服务器中安装nginx,nginx安装教程网上有很多,不再赘述。前端项目构建成功后,放置在nginx配置文件的http server location指定位置即可。
2.3 前端部分页面展示
书籍列表页面:

借阅人列表页面:

添加书籍:

添加借阅人:

借书:

借书记录:

![]()
关注作者微信公众号,追踪更多有价值的内容!