未完善的、简陋的图书管理系统,一个Spring Boot + Vue实现前后端分离的项目。
因为时间太有限,决定只花一半时间用来写前端,前端写多少,后面就实现多少。不论整个系统的架构如何,首先实现了关键的功能。
技术栈: 基于Spring Boot 后端 + Vue+axios和ElementUI前端 + mysql和Spring Boot的JPA ORM数据库框架和连接池hikari 实现
关键业务流程设计
功能实现介绍
-
管理员:
- 可查看、更改读者信息,增加或删除读者
- 可查看、更改图书信息,增加或删除图书
- 可查看图书借还日志记录
-
读者:
-
可更改个人信息
-
可查看图书借阅情况
-
判断读者id是否合法,合法则可借阅图书。
-
可按图书id归还读书。
数据库实现流程
需求分析
- 用户表(用于管理员与读者,登录与注销)
- 图书表(记录图书的信息以及借出归还情况)
- 借还记录表(用于管理员图书借还日志,以及读者查看个人借还情况)
表结构
-
user:
- id (int 11)
- username (varchar 30)
- password (varchar 30)
- name (varchar 30)
- phone (varchar 30)
-
book:
- id (int 11)
- cover (varchar 255) —>the url of the cover of a book
- title (varchar 30)
- author (varchar 30)
- press (var char 30)
- total (int 11)
- left (int 11)
-
log:
-
id (int 11)
-
book_id (int 11)
-
user_id (int 11)
-
date (timestamp)
-
status (varchar 10)
-
由于时间关系,很多操作没法完成,表的设计也尽量从简了。因为对外键操作不太了解,降低数据库表与表之间的联系,同时加强了后端借还操作与日志记录操作之间的耦合性,这是后面必须修改的。
整体功能实现
思路概述:
前端通过axios发送get请求,经过后端的Controller层将请求交到service层代理完成操作数据库的业务,然后将数据返回到前端。前端利用data和template里对应元素的双向绑定实现页面的动态渲染。
-
查询功能:
需要查询功能的概括起来有两处
-
页面初始化,默认查询出表中所有内容并显示
-
在搜索栏中输入某些字段准确或模糊查询相关表的内容
-
-
增、删、改功能:
需要增删改功能的地方概括起来有两处
- 管理员权限:对图书、用户表进行增删改操作
- 读者权限:对个人信息进行修改;对图书表进行借阅、归还操作,这里同时也对日志表进行操作。
-
权限功能:
- 如果是传统的前后端项目,实现权限功能的思路可以是:按需加载页面或组件。为不同权限的用户写一个单独的页面,在后端判断有权限返回需要访问的页面,否则返回未授权页面。或者是一个页面加载全部组件,通过后端判断用户是否可以操作该组件。
- 而在前后端分离,通常的实现思路是:按权限加载组件,即在渲染页面前向后端发送请求,获取有权限使用的组件并动态渲染。
第二种太难了...考虑到时间有限,还是选择第一种了。但是,新增的不同权限的前端页面和后端处理,对于一个前后端分离的项目来说是很不优雅的。为了不让前后端的架构崩掉,干脆取巧地,重写一个新的前端项目,假装实现了权限。这样,后端和数据库都可以不作任何改动。
-
借还图书与日志功能:
思路是仅当用户进行借书或还书操作时记录该操作,即存储到Log表中的同时完成借阅和归还。借书只要藏书量大于当前借书量都能成功借出;还书只要用户有未归还的该借书记录则可还书。
总结:
- 前后端分离项目对于团队开发极其便捷有效。
- Web项目中权限分离至关重要(因为没做这点,很多功能都难以实现。)
- 数据库和前后端接口必须严格地遵循良好的设计规范,设计好了在开始完成项目,否则对后期开发过程将会导致维护、扩展开发等等崩塌性灾难。