文章目录

0 前言
1 前言
2 系统实现
- 2.1 数据库表
- 2.2 前后端分离架构
- 2.3 技术栈
- 2.4 相关代码
3 项目展示
4 最后

0 前言

Hi，同学们好呀，学长今天带大家复盘一个学长帮往届同学做的一个毕业作品

java web 图书管理系统

1 前言

由于帮助以为同学做的课设，于是就抽了点闲余时间，写了下，基本全部都涉及到，包括书籍信息的更新，查看所有的书籍。

MIS最重要的就是需求分析，只有分析清晰了，才能动手编程，所谓编程，不过是把一种思路用代码实现而已，这里就图书管理系统来说，这个系统至少要完成如下内容：

图书信息的增加与删除
图书信息的更新
全部书籍的查看

2 系统实现

2.1 数据库表

当需求分析完成之后，我们要考虑的就是这些信息如何存储在表里，需要几张表，每张表存储什么信息，字段名是什么，什么类型；在这里，我认为只用一张表，用来存储书籍的有关信息

搭建数据库

DROP TABLE IF EXISTS `book`;/*!40101 SET @saved_cs_client     = @@character_set_client */;SET character_set_client = utf8mb4 ;CREATE TABLE `book` (`id` int(10) NOT NULL AUTO_INCREMENT,`name` varchar(20) DEFAULT NULL,`author` varchar(20) DEFAULT NULL,`publish` varchar(20) DEFAULT NULL,`pages` int(10) DEFAULT NULL,`price` float(10,2) DEFAULT NULL,`bookcaseid` int(10) DEFAULT NULL,`abled` int(10) DEFAULT NULL,PRIMARY KEY (`id`),KEY `FK_ieh6qsxp6q7oydadktc9oc8t2` (`bookcaseid`),CONSTRAINT `FK_ieh6qsxp6q7oydadktc9oc8t2` FOREIGN KEY (`bookcaseid`) REFERENCES `bookcase` (`id`)) ENGINE=InnoDB AUTO_INCREMENT=119 DEFAULT CHARSET=utf8;/*!40101 SET character_set_client = @saved_cs_client */;---- Dumping data for table `book`--LOCK TABLES `book` WRITE;/*!40000 ALTER TABLE `book` DISABLE KEYS */;INSERT INTO `book` VALUES (1,'解忧杂货店','东野圭吾','电子工业出版社',102,27.30,9,1),(2,'追风筝的人','卡勒德·胡赛尼','中信出版社',330,26.00,1,1),(3,'人间失格','太宰治','作家出版社',150,17.30,1,1),(4,'这就是二十四节气','高春香','电子工业出版社',220,59.00,3,1),(5,'白夜行','东野圭吾','南海出版公司',300,27.30,4,1),(6,'摆渡人','克莱儿·麦克福尔','百花洲文艺出版社',225,22.80,1,1),(7,'暖暖心绘本','米拦弗特毕','湖南少儿出版社',168,131.60,5,1),(8,'天才在左疯子在右','高铭','北京联合出版公司',330,27.50,6,1),(9,'我们仨','杨绛','生活.读书.新知三联书店',89,17.20,7,1),(10,'活着','余华','作家出版社',100,100.00,6,1),(11,'水浒传','施耐庵','三联出版社',300,50.00,1,1),(12,'三国演义','罗贯中','三联出版社',300,50.00,2,1),(13,'红楼梦','曹雪芹','三联出版社',300,50.00,5,1),(14,'西游记','吴承恩','三联出版社',300,60.00,3,1);/*!40000 ALTER TABLE `book` ENABLE KEYS */;UNLOCK TABLES;

2.2 前后端分离架构

前后端分离就是将⼀个应⽤的前端代码和后端代码分开写，为什么要这样做？

如果不使⽤前后端分离的⽅式，会有哪些问题？

传统的 Java Web 开发中，前端使⽤ JSP 开发，JSP 不是由后端开发者来独⽴完成的。

前端—》HTML 静态⻚⾯ —〉后端 —》JSP

这种开发⽅式效率极低，可以使⽤前后端分离的⽅式进⾏开发，就可以完美地解决这⼀问题。

前端只需要独⽴编写客户端代码，后端也只需要独⽴编写服务端代码提供数据接⼝即可。

前端通过 Ajax 请求来访问后端的数据接⼝，将 Model 展示到 View 中即可。

前后端开发者只需要提前约定好接⼝⽂档（URL、参数、数据类型…），然后分别独⽴开发即可，前端可以造假数据进⾏测试，完全不需要依赖于后端，最后完成前后端集成即可，真正实现了前后端应⽤的解耦合，极⼤地提升了开发效率。
单体—》前端应⽤ + 后端应⽤

前端应⽤：负责数据展示和⽤户交互。

后端应⽤：负责提供数据处理接⼝。

前端 HTML —》Ajax —〉RESTful 后端数据接⼝。

传统的单体应⽤

前后端分离的结构

2.3 技术栈

Spring Boot + Vue
使⽤ Spring Boot 进⾏后端应⽤开发，使⽤ Vue 进⾏前端应⽤开发

Vue + Element UI

Vue 集成 Element UI
Element UI 后台管理系统主要的标签
el-container：构建整个⻚⾯框架。
el-aside：构建左侧菜单。
el-menu：左侧菜单内容，常⽤属性：
default-openeds：默认展开的菜单，通过菜单的 index 值来关联。
default-active：默认选中的菜单，通过菜单的 index 值来关联。
el-submenu：可展开的菜单，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。
template：对应 el-submenu 的菜单名。
i：设置菜单图标，通过 class 属性实则
el-icon-messae
el-icon-menu
el-icon-setting
el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。

2.4 相关代码

项目配置

spring:datasource:url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driverjpa:show-sql: trueproperties:hibernate:format_sql: trueserver:port: 8181

跨域配置

@Configurationpublic class CrosConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}}

实体类

@Entity@Datapublic class Book {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Integer id;private String name;private String author;}

业务代码

@RestController@RequestMapping("/book")@CrossOriginpublic class BookHandler {@Autowiredprivate BookRepository bookRepository;@GetMapping("/findAll/{page}/{size}")public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){Pageable pageable= PageRequest.of(page-1,size);return bookRepository.findAll(pageable);}@PostMapping("/save")public String save(@RequestBody Book book){Book result = bookRepository.save(book);if(result != null){return "success";}else{return "error";}}@GetMapping("/findById/{id}")public Book findById(@PathVariable("id") Integer id){return bookRepository.findById(id).get(); //返回的是optional，book上又包了一层，所以get才能取出来}@PutMapping("/update")public String update(@RequestBody Book book){Book result = bookRepository.save(book);if(result != null){return "success";}else{return "error";}}@DeleteMapping("/deleteById/{id}")public void deleteById(@PathVariable("id") Integer id){bookRepository.deleteById(id);}}

前端视图层

<template><el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="编号" ><el-input v-model="ruleForm.id" readonly></el-input></el-form-item><el-form-item label="图书名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="作者" prop="author"><el-input v-model="ruleForm.author"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">修改</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></template><script>export default {data() {return {ruleForm: {id:'',name: '',author: '',},rules: {name: [{ required: true, message: '图书名不能为空哦', trigger: 'blur' },],author: [{ required: true, message: '作者不能为空哦', trigger: 'blur' },]}};},methods: {submitForm(formName) {const _this=this;this.$refs[formName].validate((valid) => {if (valid) {axios.put('http://localhost:8181/book/update',this.ruleForm).then((res=>{if(res.data=="success"){_this.$alert('《'+_this.ruleForm.name+'》修改成功', '恭喜你',{confirmButtonText: '确定',callback: action => {_this.$router.push('/BookManager');}});}}));} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},created() {         /*要拿参数的时候写route 跳转的时候写router*/const _this=this;axios.get('http://localhost:8181/book/findById/' + this.$route.query.id).then((res) => {_this.ruleForm=res.data;});}}</script>

3 项目展示

主页

修改页面

添加图书

删除图书

4 最后

【毕业设计】基于SSM的图书管理系统相关推荐

基于SSM框架图书管理系统开发与设计(附源码资料)-毕业设计
文章目录 1. 适用人群 2. 你将收获 3.项目简介 4.技术实现 5.系统功能 5.1.管理员身份登录 5.1.1.登录 5.1.2.管理员登录首页 5.1.3.借阅管理 5.1.4.图书管理 5 ...
含文档+PPT+源码等]精品基于SSM的图书管理系统[包运行成功]
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称含文档+PPT+源码等]精品基于SSM的图书管理系统[包运行成功] 系统介绍 & ...
java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试
java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试本源码技术栈 ...
java计算机毕业设计基于Ssm学生信息管理系统源码+数据库+系统+lw文档+mybatis+运行部署
java计算机毕业设计基于Ssm学生信息管理系统源码+数据库+系统+lw文档+mybatis+运行部署 java计算机毕业设计基于Ssm学生信息管理系统源码+数据库+系统+lw文档+mybatis+运 ...
毕业设计-基于SSM医院信息管理系统
环境:开发工具:idea,数据库:MySQL5.7 jdk1.8 架构:springMVC,前端jsp 主要功能管理员: 员工管理(添加员工.修改员工.删除员工.查询指定员工.导出数据) 岗位管理( ...
计算机毕业设计-基于ssm的问卷调查管理系统
计算机毕业设计-基于ssm的问卷调查管理系统-线上调查问卷系统java代码 1.开发环境及工具下载开发语言:Java 架构:B/S 框架:SSM(Spring.SpringMVC.MyBatis) ...
计算机毕业设计-基于ssm的健身房管理系统-基于javaweb的健身房系统代码
计算机毕业设计-基于ssm的健身房管理系统-基于javaweb的健身房系统代码注意:该项目只展示部分功能,如需了解,联系咨询即可. 作者:IT跃迁谷 1.开发环境开发语言:Java 后台:SSM( ...
【JAVA程序设计】基于SSM的图书管理系统-有论文文档
基于SSM的图书管理系统-有文档项目获取项目简介开发环境项目技术功能结构文档目录运行截图项目获取获取方式(点击下载):是云猿实战项目经过多人测试运行,可以确保100%成功运行. 项 ...
SSM毕业设计-基于SSM的个人相册管理系统
源码编号:D-I20 点击查看项目类型:Java web项目/Java EE项目/SSM项目(非开源) 源码获取:基于SSM的个人相册管理系统当前版本:V2.0版本用户类型:双角色(普通用户.管 ...
毕业设计——基于SSM的健身房管理系统
该系统已经上传CSDN官方资源,下载地址: https://download.csdn.net/download/qq_16397653/14027661 1.包含源程序,数据库脚本.代码和数据库脚本 ...

【毕业设计】基于SSM的图书管理系统