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

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/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 项目展示

主页

修改页面

添加图书

删除图书

4 最后