基于Vue+SSM+SpringCloudAlibaba书籍管理系统(下)

简介: 基于Vue+SSM+SpringCloudAlibaba书籍管理系统

2.3 编辑图书

【编辑用户】界面如下,点击要操作的记录右侧的【编辑】按钮,进行编辑分类。

  1. 回显数据
  2. 点击确认之后,刷新页面


33a87402fbba4e2fbccb4fa4be7a6760.png

3.3 删除图书

点击要操作的记录右侧的【删除】按钮,进行删除分类。

  1. 点击删除后,询问是否删除;
  2. 删除成功,给出提示,并刷新页面

4827d2cabcef4b72af2fd9a03f862257.png

3.4 批量删除图书

批量删除图书

  1. 选中要删除的记录
  2. 点击批量删除

ca0b4c4d757b444490cfc1444d8ec088.png

  • 借阅图书
  1. 在【图书管理】界面点击想要借阅的图书右侧的【借阅】按钮,进入【借阅图书】界面

2df6f82c4e9e4fa697b633c1d132ce46.png

借阅界面

2b70e0aa5ea74407b074a96a5251a0cf.png


或者

点击【借阅图书】进入图书借阅界面

c868bb20b6bb45d3af03118a30380fec.png

5.1 图书名称输入建议

1. 输入【图书名称】,查询数据库相关图书,给出输入建议

2d864ef8878b4efeb26d07717f1b7d20.png



2.选中书籍后,回显图书ISBN编码和剩余库存数据


fdff78657e464f05b68e3eabefdceb39.png

5.2 用户名输入建议

1. 输入【借阅人姓名】,查询数据库相关用户,给出输入建议

c706270728d847cd9e5a2ba4171ad353.png



2.选中书籍后,回显借阅人编号


6473dfbfa81e45a8b848f177f7131954.png

5.3 确认借阅

1. 点击确认借阅

2. 书籍库存-1,且书籍借出数量+1

18fbbb5565bb45dba55a9824ff5a6121.png68e59f9fe489449da3872085ab462144.png



借阅前:


fac9628ddeb9482f85e13f97162fb4e8.png


借阅后:


2cbae4eda4f6439ca3ba4bbb16f06186.png

  • 归还图书

点击【归还图书】进入归还图书界面

bf2073f65b8c4f5b88b6e0cc3ddb88e4.png


6.1 输入建议

图书标题输入建议

8daa9183498b4a9e9887fb3fa0c29bd4.png


用户名输入建议


e6f76272917843f5a9e52c72948ad82c.png

6.2 还书操作

1. 点击还书按钮

2. 书籍库存+1,借出数量-1


eff807caa09f408287ef813f923e6e48.png

9bbf7e939c8848d5b27fca0db077ebca.png

还书前:


f02bff1839ef474f95983fc35674cfb0.png

还书后:

cec13bcccdf64a22964b3f72082303d3.png

6.3 图书丢失处理

如果用户丢失了图书,点击【丢失】按钮,记录书籍丢失情况。

  1. 点击【丢失】按钮
  2. 书籍库存不变,已借数量-1


8afcd7fe2c8141a5a8e8c3e67a15472e.png

丢失前:


c9410de2783c4cf98bb97d2e87e8f463.png

丢失后:

deef14db38574514ab65cc406777580f.png


6.4 查看所有【借还】记录

在【归还图书】界面,勾选【查看全部】可以查看所有书籍的借阅、归还、丢失记录。

默认只显示【借阅中】状态的记录。


af132c38ead3433fbbb05f515824ce39.png


相关文章
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
32 1
vue学习第一章
|
28天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
26 1
vue学习第三章
|
28天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章
|
25天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
22 1
|
25天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
25天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
25天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能