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

谁践踏了优雅 2024-03-30 11:56 88阅读 0赞

#### 文章目录 ####

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

## 0 前言 ##

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

java web 图书管理系统

## 1 前言 ##

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

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

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

## 2 系统实现 ##

### 2.1 数据库表 ###

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16]

**搭建数据库**

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 后端数据接⼝。

**传统的单体应⽤**

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 1]

前后端分离的结构

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 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/Shanghai
    
        username: root
    
        password: 123456
    
        driver-class-name: com.mysql.cj.jdbc.Driver
    
      jpa:
    
        show-sql: true
    
        properties:
    
          hibernate:
    
            format_sql: true
    
    server:
    
      port: 8181

**跨域配置**

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

**实体类**

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

**业务代码**

@RestController
    
    @RequestMapping("/book")
    
    @CrossOrigin
    
    public class BookHandler {
        
    
        @Autowired
    
        private 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 项目展示 ##

**主页**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 3]

**修改页面**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 4]

**添加图书**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 5]

**删除图书**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 6]

## 4 最后 ##

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8b09d165a280404e8993b160a83d28f1.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ca9d198f47e14e288fbc9e0c9ef4d92e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4095a5d9f469472bb6951c7f281c8f66.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7d1cd4def48e4a19926998fd34a4727d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cd135efd3ddb414893cf7c298e6e873f.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2fdf9786b20448a1b04993916133575f.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f63c9b9f0ecb40daa4b2a0811eaeed5e.png