本文将分享个人自主开发的一套图书管理系统,后端基于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] = v
return param_dict
except 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 前端部分页面展示
书籍列表页面:
借阅人列表页面:
添加书籍:
添加借阅人:
借书:
借书记录:
关注作者微信公众号,追踪更多有价值的内容!