SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for books
-- ----------------------------
DROP TABLE IF EXISTS `books`;
CREATE TABLE `books`  (
  `bookId` int(0) NOT NULL AUTO_INCREMENT COMMENT '书id',
  `bookName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '书名',
  `bookCounts` int(0) NOT NULL COMMENT '数量',
  `detail` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '描述',
  PRIMARY KEY (`bookId`) USING BTREE,
  INDEX `bookID`(`bookId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of books
-- ----------------------------
INSERT INTO `books` VALUES (1, 'Java', 1, '从入门到放弃');
INSERT INTO `books` VALUES (2, 'MySQL', 10, '从删库到跑路');
INSERT INTO `books` VALUES (3, 'Linux', 5, '从进门到进牢');

SET FOREIGN_KEY_CHECKS = 1;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.0</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>3.4.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.bower</groupId>
        <artifactId>jquery</artifactId>
        <version>3.6.0</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>vue</artifactId>
        <version>2.6.14</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>axios</artifactId>
        <version>0.20.0</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.78</version>
    </dependency>
</dependencies>

1
2
3
4
5
6
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/ssmbuild?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.type-aliases-package=com.example.pojo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.example.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book {
    private Integer bookId;
    private String bookName;
    private Integer bookCounts;
    private String detail;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.example.mapper;

import com.example.pojo.Book;
import org.springframework.stereotype.Repository;
import java.util.List;

@Repository
public interface BookMapper {

    List<Book> findAll();

    int addBook(Book book);

    int updateBook(Book book);

    int deleteBook(Integer bookId);

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.BookMapper">

    <resultMap id="bookMap" type="com.example.pojo.Book">
        <id column="bookId" property="bookId" javaType="Integer"/>
        <result column="bookName" property="bookName" javaType="String"/>
        <result column="bookCounts" property="bookCounts" javaType="Integer"/>
        <result column="detail" property="detail" javaType="String"/>
    </resultMap>

    <select id="findAll" resultMap="bookMap">
        select *
        from books
    </select>

    <insert id="addBook" parameterType="com.example.pojo.Book">
        insert into books (bookName, bookCounts, detail)
        values (#{bookName}, #{bookCounts}, #{detail});
    </insert>

    <update id="updateBook" parameterType="com.example.pojo.Book">
        update books
        set bookName=#{bookName},
            bookCounts=#{bookCounts},
            detail=#{detail}
        where bookId = #{bookId}
    </update>

    <delete id="deleteBook" parameterType="Integer">
        delete
        from books
        where bookId = #{bookId}
    </delete>

</mapper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.example.service;

import com.example.pojo.Book;
import com.example.vo.ResultVO;
import java.util.List;

public interface BookService {

    List<Book> findAll();

    ResultVO addBook(Book book);

    ResultVO updateBook(Book book);

    int deleteBook(Integer bookId);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package com.example.service.impl;

import com.example.mapper.BookMapper;
import com.example.pojo.Book;
import com.example.service.BookService;
import com.example.vo.ResultVO;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;

@Service
public class BookServiceImpl implements BookService {

    @Resource
    private BookMapper bookMapper;

    @Override
    public List<Book> findAll() {
        return bookMapper.findAll();
    }

    @Override
    public ResultVO addBook(Book book) {
        int i = bookMapper.addBook(book);
        if (i==1){
            return new ResultVO(10000,"success");
        }else {
            return new ResultVO(10001,"defeat");
        }
    }


    @Override
    public ResultVO updateBook(Book book) {
        int i = bookMapper.updateBook(book);
        if (i==1){
            return new ResultVO(10000,"success");
        }else {
            return new ResultVO(10001,"defeat");
        }
    }

    @Override
    public int deleteBook(Integer bookId) {
        return bookMapper.deleteBook(bookId);
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
package com.example.controller;

import com.example.pojo.Book;
import com.example.service.BookService;
import com.example.vo.ResultVO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;

@Controller
public class BookController {

    @Resource
    private BookService bookService;

    @RequestMapping("/bookAll")
    @ResponseBody
    public List<Book> bookAll(){
        List<Book> bookList = bookService.findAll();
        return bookList;
    }

    @PostMapping("/bookAdd")
    @ResponseBody
    public ResultVO addBook(@RequestBody Book book){
        ResultVO resultVO = bookService.addBook(book);
        return resultVO;
    }

    @PostMapping("/bookUpdate")
    @ResponseBody
    public ResultVO updateBook(@RequestBody Book book){
        return bookService.updateBook(book);
    }

    @GetMapping("/bookDelete/{bookId}")
    @ResponseBody
    public int deleteBook(@PathVariable("bookId") Integer bookId){
        return bookService.deleteBook(bookId);
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.example.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ResultVO {

    //响应码
    private int code;

    //提示消息
    private String msg;

    //响应数据
    private Object data;

    public ResultVO(int code,String msg){
        this.code=code;
        this.msg=msg;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <!--1. 添加vue依赖-->
    <script src="/webjars/vue/2.6.14/dist/vue.min.js"></script>
    <!--2. 添加axios依赖-->
    <script src="/webjars/axios/0.20.0/dist/axios.min.js"></script>
    <!--3. 添加jquery依赖-->
    <script src="/webjars/jquery/3.6.0/dist/jquery.min.js"></script>
    <!--4. 添加bootstrap依赖-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">
                <h3>书籍列表（SpringBoot+ Vue + Axios + BootStrap）</h3>
            </div>
        </div>
        <table class="table table-striped table-hover">
            <tr>
                <td>书籍编号</td>
                <td>书籍名称</td>
                <td>书籍数量</td>
                <td>书籍描述</td>
                <td>操作</td>
            </tr>
            <tr v-for="bk in bookList">
                <td>{{bk.bookId}}</td>
                <td>{{bk.bookName}}</td>
                <td>{{bk.bookCounts}}</td>
                <td>{{bk.detail}}</td>
                <td>
                    <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal"
                       @click="book=bk;title='修改书籍'">修改</a>
                    <a href="" class="btn btn-danger btn-sm" @click="delBook(bk.bookId)">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer text-right">
            <a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"
               @click="book={};title='添加书籍'">添加书籍</a>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{title}}</h4>
                        --{{book}}
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="post">
                            <input type="hidden" v-model="book.bookId">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">书籍名称:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="book.bookName" placeholder="书籍名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">书籍数量:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="book.bookCounts" placeholder="书籍数量">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">书籍描述:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" v-model="book.detail" placeholder="书籍描述">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                        <button type="button" class="btn btn-primary" @click="save()">保存(S)</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>
<script>
    let vs = new Vue({
        el: '.container',
        data: {
            bookList: [],
            book: {},
            title: '添加书籍',
        },
        created() {
            //查询所有图书信息
            this.findAllBooks();
        },
        methods: {
            //1、查询全部图书信息
            findAllBooks() {
                axios.get("/bookAll").then(data => {
                    this.bookList = data.data
                })
            },
            //2、保存图书
            save() {
                //根据bkl.bookId是否有值，决定添加还是修改
                let url = "/bookAdd";
                if (this.book.bookId) {
                    url = "/bookUpdate";
                }
                //向后台发送请求
                axios({
                    method:'post',
                    url:url,
                    data:JSON.stringify(this.book),
                    headers:{
                        'Content-type':'application/json'
                    }
                }).then(res=>{
                    if (res.data.code==10000){
                        this.findAllBooks();
                    }
                    $("#myModal").modal('hide');
                })
            },
            //3、删除书籍
            delBook(bookId) {
                let url = "/bookDelete/"+bookId;
                if (confirm("你确定要删除吗？")) {
                    axios.get(url).then(function (res){
                        if (res.data.code===10000){
                            this.findAllBooks();
                        }
                    })
                }
            }
        }
    })
</script>