图书管理系统（SpringBoot+SpringMVC+MyBatis）

1.数据库表设计

数据库表是应⽤程序开发中的⼀个重要环节, 数据库表的设计往往会决定我们的应⽤需求是否能顺利实现, 甚至决定我们的实现方式. 如何设计表以及这些表有哪些字段、关系也是非常重要的.

数据库表设计是依据业务需求来设计的，数据库表通常分两种: 实体表和关系表.

创建数据库 book_test

1. -- 创建数据库

2. DROP DATABASE IF EXISTS book_test;

3. CREATE DATABASE book_test DEFAULT CHARACTER SET utf8mb4;

4. USE book_test;

5. -- ⽤户表

6. DROP TABLE IF EXISTS user_info;

7. CREATE TABLE user_info (

8. `id` INT NOT NULL AUTO_INCREMENT,

9. `user_name` VARCHAR ( 128 ) NOT NULL,

10. `password` VARCHAR ( 128 ) NOT NULL,

11. `delete_flag` TINYINT ( 4 ) NULL DEFAULT 0,

12. `create_time` DATETIME DEFAULT now(),

13. `update_time` DATETIME DEFAULT now() ON UPDATE now(),

14. PRIMARY KEY ( `id` ),

15. UNIQUE INDEX `user_name_UNIQUE` ( `user_name` ASC )) ENGINE = INNODB DEFAULT CHARSET = utf8mb4 COMMENT = '⽤户表 ';

16. -- 图书表

17. DROP TABLE IF EXISTS book_info;

18. CREATE TABLE `book_info` (

19. `id` INT ( 11 ) NOT NULL AUTO_INCREMENT,

20. `book_name` VARCHAR ( 127 ) NOT NULL,

21. `author` VARCHAR ( 127 ) NOT NULL,

22. `count` INT ( 11 ) NOT NULL,

23. `price` DECIMAL (7,2 ) NOT NULL,

24. `publish` VARCHAR ( 256 ) NOT NULL,

25. `status` TINYINT ( 4 ) DEFAULT 1 COMMENT '0-⽆效 , 1-正常 , 2-不允许借阅 ',

26. `create_time` DATETIME DEFAULT now(),

27. `update_time` DATETIME DEFAULT now() ON UPDATE now(),

28. PRIMARY KEY ( `id` )

29. ) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;

31. -- 初始化数据

32. INSERT INTO user_info ( user_name, PASSWORD ) VALUES ( "admin", "admin" );

33. INSERT INTO user_info ( user_name, PASSWORD ) VALUES ( "zhangsan", "123456" );

34. -- 初始化图书数据

35. INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('活着 ','Romised',100,12.2,'出版社');

36. INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('不活着', 'Romised', 100, 22.2, '出版社');

37. INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('想活着 ','Romised',100,32.2,'出版社');

38. INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('要活着 ','Romised',100,42.2,'出版社');

2.引入MyBatis和MySQL驱动依赖

修改pom.xml文件：

<dependency>

1. <groupId>org.mybatis.spring.boot</groupId>

2. <artifactId>mybatis-spring-boot-starter</artifactId>

3. <version>2.3.1</version>

4. </dependency>

5. <dependency>

6. <groupId>com.mysql</groupId>

7. <artifactId>mysql-connector-j</artifactId>

8. <scope>runtime</scope>

9. </dependency>

3.配置数据库&日志

修改application.yml配置文件：

1. # 数据库连接配置

2. spring:

3. datasource:

4. url: jdbc:mysql://127.0.0.1:3306/book_test?characterEncoding=utf8&useSSL=false

5. username: root

6. password: 123456

7. driver-class-name: com.mysql.cj.jdbc.Driver

8. mybatis:

9. configuration:

10. map-underscore-to-camel-case: true #配置驼峰自动转换

11. # log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #打印sql语句

12. mapper-locations: classpath:mapper/**Mapper.xml

13. # 设置日志文件的文件名

14. logging:

15. file:

16. name: logger/spring-book.log

4.Model创建

创建UserInfo类：

1. @Data

2. public class UserInfo {

3. private Integer id;

4. private String userName;

5. private String password;

6. private Integer deleteFlag;

7. private Date createTime;

8. private Date updateTime;

9. }

创建BookInfo类：

1. @Data

2. public class BookInfo {

3. private Integer id;

4. private String bookName;

5. private String author;

6. private Integer count;

7. //前端展示精度

8. @JsonFormat(shape = JsonFormat.Shape.STRING)

9. private BigDecimal price;

10. private String publish;

11. private Integer status; //0-删除 1-可借阅,2-不可借阅

12. private String statusCN;

13. }

5.用户登录功能实现

约定前后端交互接口:

1. [请求]

2. /user/login

3. Content-Type: application/x-www-form-urlencoded; charset=UTF-8

5. [参数]

6. name=zhangsan&password=123456 8

7. [响应]

8. true //账号密码验证正确 , 否则返回false

浏览器给服务器发送/user/login这样的HTTP请求，服务器给浏览器返回Boolean类型的数据

实现服务器代码

控制层:从数据库中, 根据名称查询用户, 如果可以查到, 并且密码⼀致, 就认为登录成功 

创建UserController：

1. @RequestMapping("/user")

2. @RestController

3. public class UserController {

4. @Autowired

5. private UserService userService;

7. @RequestMapping("/login")

8. public Boolean login(String userName, String password, HttpSession session){

9. //校验参数是否为空

10. if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){

11. return false;

12. }

14. //验证账号密码是否正确

15. //1. 根据用户名去查找用户信息

16. UserInfo userInfo = userService.getUserInfoByName(userName);

17. //2. 比对密码是否正确

18. if (userInfo==null || userInfo.getId()<=0){

19. return false;

20. }

21. if (password.equals(userInfo.getPassword())){

22. //账号密码正确

23. //存Session

24. userInfo.setPassword("");

25. session.setAttribute(Constants.SESSION_USER_KEY,userInfo);

26. return true;

27. }

29. return false;

31. }

32. }

业务层:

创建UserService：

1. @Service

2. public class UserService {

3. @Autowired

4. private UserInfoMapper userInfoMapper;

6. public UserInfo getUserInfoByName(String name){

7. return userInfoMapper.selectUserByName(name);

8. }

9. }

数据层:

创建UserInfoMapper：

1. @Mapper

2. public interface UserInfoMapper {

3. /**

4. * 根据用户名称查询用户信息

5. * @param name

6. * @return

7. */

8. @Select("select * from user_info where user_name=#{name}")

9. UserInfo selectUserByName(String name);

11. }

这边使用*是为了方便观察，开发中需要挨个写出数据库字段名

 测试：

部署程序，验证服务器是否能够正确返回数据，可以在Postman中输入URL进行测试，最好联动前端一起进行测试：

输⼊错误的⽤户名和密码, 页面弹窗警告

 输入正确的用户名和密码, 页面正常跳转到booklist.html页面

 6.实现添加图书功能

约定前后端交互接口：

1. [请求]

2. /book/addBook

3. Content-Type: application/x-www-form-urlencoded; charset=UTF-8

4. [参数]

5. bookName=图书1&author=作者1&count=23&price=36&publish=出版社1&status=1

6. [响应]

7. "" //失败信息 , 成功时返回空字符串

我们约定，浏览器给服务器发送book/addBook这样的HTTP请求，以from表单的形式提交数据

服务器返回处理结果, 返回""表示添加图书成功, 否则, 返回失败信息.

实现服务器代码 

控制层:

创建BookController：

1. @Slf4j

2. @RequestMapping("/book")

3. @RestController

4. public class BookController {

6. @Autowired

7. private BookService bookService;

9. @RequestMapping("/getBookListByPage")

10. public Result getBookListByPage(PageRequest pageRequest, HttpSession session){

11. log.info("查询翻页信息, pageRequest:{}",pageRequest);

12. //用户登录校验

13. UserInfo userInfo = (UserInfo) session.getAttribute(Constants.SESSION_USER_KEY);

14. if (userInfo==null|| userInfo.getId()<=0 || "".equals(userInfo.getUserName())){

15. //用户未登录

16. return Result.unlogin();

17. }

18. //校验成功

19. if (pageRequest.getPageSize()<0 || pageRequest.getCurrentPage()<1){

20. return Result.fail("参数校验失败");

21. }

22. PageResult<BookInfo> bookInfoPageResult = null;

23. try {

24. bookInfoPageResult = bookService.selectBookInfoByPage(pageRequest);

25. return Result.success(bookInfoPageResult);

26. }catch (Exception e){

27. log.error("查询翻页信息错误,e:{}",e);

28. return Result.fail(e.getMessage());

29. }

30. }

32. @RequestMapping(value = "/addBook", produces = "application/json")

33. public String addBook(BookInfo bookInfo){

34. log.info("接收到添加图书请求, bookInfo:{}",bookInfo);

35. //参数校验

36. if (!StringUtils.hasLength(bookInfo.getBookName())

37. || !StringUtils.hasLength(bookInfo.getAuthor())

38. || bookInfo.getCount()<0

39. || bookInfo.getPrice()==null

40. || !StringUtils.hasLength(bookInfo.getPublish())){

41. return "参数校验失败, 请检查入参";

42. }

43. Integer result = bookService.addBook(bookInfo);

44. if (result<=0){

45. log.error("添加图书出错:bookInfo:{}",bookInfo);

46. return "添加图书出错, 请联系管理人";

47. }

48. return "";

49. }

50. }

业务层:

创建BookService：

1. @Slf4j

2. @Service

3. public class BookService {

5. @Autowired

6. private BookInfoMapper bookInfoMapper;

7. /**

8. * 添加图书

9. *

10. * @param bookInfo

11. * @return

12. */

13. public Integer addBook(BookInfo bookInfo) {

14. Integer result = 0;

15. try {

16. result = bookInfoMapper.insertBook(bookInfo);

17. } catch (Exception e) {

18. log.error("添加图书出错, e:{}", e);

19. }

20. return result;

21. }

22. }

数据层:

创建BookInfoMapper文件：

1. @Mapper

2. public interface BookInfoMapper {

3. /**

4. * 获取当前页的信息

5. * @param offset

6. * @param pageSize

7. * @return

8. */

9. @Select("select * from book_info where status !=0 " +

10. "order by id asc limit #{offset},#{pageSize}")

11. List<BookInfo> selectBookInfoByPage(Integer offset, Integer pageSize);

13. @Insert("insert into book_info (book_name,author, count, price, publish, status) " +

14. "values(#{bookName}, #{author}, #{count}, #{price},#{publish}, #{status})")

15. Integer insertBook(BookInfo bookInfo);

16. }

前端代码中补全add()：

1. function add() {

2. $.ajax({

3. type:"post",

4. url: "/book/addBook",

5. data:$("#addBook").serialize(),//提交整个form表单

6. success:function(result){

8. if (result != null && result.code == "SUCCESS" && result.data=="") {

9. //图书添加成功

10. location.href = "book_list.html";

11. }else{

12. console.log(result.code);

13. alert(result);

14. }

15. },

16. error: function (error) {

17. console.log(error);

18. //用户未登录

19. if (error != null && error.status == 401) {

20. location.href = "login.html";

21. }

23. }

24. });

26. }

7.实现翻页功能

假设数据库中的数据有很多，一下子全部展示出来肯定不现实，我们可以使用分页来解决这个问题

分页时, 数据是如何展示的呢 第1页: 显⽰1-10 条的数据、第2页: 显⽰11-20 条的数据 第3页: 显⽰21-30 条的数据 以此类推...

要想实现这个功能, 从数据库中进行分页查询 ，我们要使用LIMIT关键字

查询第一页的SQL语句：

 SELECT * FROM book_info LIMIT 0,10

查询第二页的SQL语句：

 SELECT * FROM book_info LIMIT 10,10

查询第三页的SQL语句：

 SELECT * FROM book_info LIMIT 20,10

观察以上SQL语句 ，发现: 开始索引⼀直在改变, 每页显⽰条数是固定的 开始索引的计算公式： 开始索引 = (当前页码 - 1) * 每页显示条数

前端在发起查询请求时 ，需要向服务端传递的参数 。

currentPage  当前页码，默认值为1

pageSize 每页显示条数，默认值为10

为了项⽬更好的扩展性, 通常不设置固定值,而是以参数的形式来进行传递 扩展性: 软件系统具备面对未来需求变化而进行扩展的能⼒

比如当前需求⼀页显示10条, 后期需求改为⼀页显示20条, 后端代码不需要任何修改

后端响应时, 需要响应给前端的数据

records 所查询到的数据列表(存储到List 集合中)

total  总记录数 (用于告诉前端显示多少页, 显示页数为:（total+pageSize-1）/pageSize

显示页数totalPage 计算公式为 : total % pagesize == 0 ? total / pagesize : (total / pagesize)+1 ;

pagesize - 1 是 total / pageSize 的最⼤的余数 ，所以(total + pagesize -1) / pagesize就得到总页数

 翻页请求和响应部分, 我们通常封装在两个对象中

翻页请求对象：

1. @Data

2. public class PageRequest {

3. private int currentPage = 1; // 当前页

4. private int pageSize = 10; // 每页中的记录数

5. private int offset;

6. public int getOffset() {

7. return (currentPage-1) * pageSize;

8. }

9. }

翻页列表结果类:

1. import lombok.Data;

2. import java.util.List;

3. @Data

4. public class PageResult<T> {

5. private int total;//所有记录数

6. private List<T> records; // 当前页数据

7. public PageResult(Integer total, List<T> records) {

8. this.total = total;

9. this.records = records;

10. }

11. }

 返回结果中, 使⽤泛型来定义记录的类型 

约定前后端交互接口

1. [请求]

2. /book/getListByPage?currentPage=1

3. Content-Type: application/x-www-form-urlencoded; charset=UTF-8

4. [参数]

7. [响应]

8. Content-Type: application/json 10

9. {

10. "total": 25,

11. "records": [{

12. "id": 25,

13. "bookName": "图书21",

14. "author": "作者2",

15. "count": 29,

16. "price": 22.00,

17. "publish": "出版社1",

18. "status": 1,

19. "statusCN": "可借阅 "

20. }, {

21. ......

22. } ]

23. }

我们约定，浏览器给服务器发送book/getListByPage这样的HTTP请求，通过currentPage参数告诉服务器当前请求为第几页的数据, 后端根据请求参数, 返回对应页的数据

实现服务器代码 

控制层:

完善 BookController：

1. @Slf4j

2. @RequestMapping("/book")

3. @RestController

4. public class BookController {

6. @Autowired

7. private BookService bookService;

9. @RequestMapping("/getBookListByPage")

10. public Result getBookListByPage(PageRequest pageRequest, HttpSession session){

11. log.info("查询翻页信息, pageRequest:{}",pageRequest);

12. // //用户登录校验

13. // UserInfo userInfo = (UserInfo) session.getAttribute(Constants.SESSION_USER_KEY);

14. // if (userInfo==null|| userInfo.getId()<=0 || "".equals(userInfo.getUserName())){

15. // //用户未登录

16. // return Result.unlogin();

17. // }

18. //校验成功

19. if (pageRequest.getPageSize()<0 || pageRequest.getCurrentPage()<1){

20. return Result.fail("参数校验失败");

21. }

22. PageResult<BookInfo> bookInfoPageResult = null;

23. try {

24. bookInfoPageResult = bookService.selectBookInfoByPage(pageRequest);

25. return Result.success(bookInfoPageResult);

26. }catch (Exception e){

27. log.error("查询翻页信息错误,e:{}",e);

28. return Result.fail(e.getMessage());

29. }

30. }

32. @RequestMapping(value = "/addBook", produces = "application/json")

33. public String addBook(BookInfo bookInfo){

34. log.info("接收到添加图书请求, bookInfo:{}",bookInfo);

35. //参数校验

36. if (!StringUtils.hasLength(bookInfo.getBookName())

37. || !StringUtils.hasLength(bookInfo.getAuthor())

38. || bookInfo.getCount()<0

39. || bookInfo.getPrice()==null

40. || !StringUtils.hasLength(bookInfo.getPublish())){

41. return "参数校验失败, 请检查入参";

42. }

43. Integer result = bookService.addBook(bookInfo);

44. if (result<=0){

45. log.error("添加图书出错:bookInfo:{}",bookInfo);

46. return "添加图书出错, 请联系管理人";

47. }

48. return "";

50. }

52. @RequestMapping("/queryBookInfoById")

53. public BookInfo queryBookInfoById(Integer bookId){

54. // long start = System.currentTimeMillis();

55. log.info("根据ID查询图书, bookId:"+bookId);

56. BookInfo bookInfo = null;

57. try {

58. bookInfo = bookService.queryBookInfoById(bookId);

59. }catch (Exception e){

60. log.error("查询图书失败, e:{}",e);

61. }

62. // long end = System.currentTimeMillis();

63. // log.info("queryBookInfoById 执行耗时: "+ (end-start) + "ms");

64. return bookInfo;

65. }

67. @RequestMapping(value = "/updateBook", produces = "application/json")

68. public String updateBook(BookInfo bookInfo){

69. log.info("接收到更新图书的请求, bookInfo:{}",bookInfo);

70. Integer result = bookService.updateBook(bookInfo);

71. if (result == 0){

72. log.error("更新图书失败, 请联系管理员");

73. return "更新图书失败, 请联系管理员";

74. }

75. return "";

76. }

78. @RequestMapping(value = "/batchDelete", produces = "application/json")

79. public String batchDelete(@RequestParam List<Integer> ids){

80. log.info("接收请求, 批量删除图书, 图书ID:{}",ids);

81. Integer result = bookService.batchDelete(ids);

82. if (result<=0){

83. log.error("批量删除失败, ids:{}",ids);

84. return "批量删除失败, 请联系管理员";

85. }

86. return "";

87. }

88. }

业务层:

BookService

1. @Slf4j

2. @Service

3. public class BookService {

5. @Autowired

6. private BookInfoMapper bookInfoMapper;

8. public PageResult<BookInfo> selectBookInfoByPage(PageRequest pageRequest) {

9. if (pageRequest == null) {

10. return null;

11. }

12. //获取总记录数

13. Integer count = bookInfoMapper.count();

14. //获取当前记录

15. List<BookInfo> bookInfos = bookInfoMapper.selectBookInfoByPage(pageRequest.getOffset(), pageRequest.getPageSize());

16. if (bookInfos != null && bookInfos.size() > 0) {

17. for (BookInfo bookInfo : bookInfos) {

18. //根据status 获取状态的定义

19. bookInfo.setStatusCN(BookStatusEnum.getNameByCode(bookInfo.getStatus()).getName());

20. }

21. }

23. return new PageResult<>(bookInfos, count, pageRequest);

25. }

27. /**

28. * 添加图书

29. *

30. * @param bookInfo

31. * @return

32. */

33. public Integer addBook(BookInfo bookInfo) {

34. Integer result = 0;

35. try {

36. result = bookInfoMapper.insertBook(bookInfo);

37. } catch (Exception e) {

38. log.error("添加图书出错, e:{}", e);

39. }

40. return result;

41. }

43. public BookInfo queryBookInfoById(Integer id) {

44. return bookInfoMapper.queryBookInfoById(id);

45. }

47. /**

48. * 更新图书

49. * @param bookInfo

50. * @return

51. */

52. public Integer updateBook(BookInfo bookInfo) {

53. Integer result = 0;

54. try {

55. result = bookInfoMapper.updateBook(bookInfo);

56. } catch (Exception e) {

57. log.error("更新图书失败, e:{}", e);

58. }

59. return result;

60. }

61. public Integer batchDelete(List<Integer> ids){

62. Integer result =0;

63. try {

64. result = bookInfoMapper.batchDelete(ids);

65. }catch (Exception e){

66. log.error("批量删除图书失败, ids:{}",ids);

67. }

68. return result;

69. }

70. }

 翻页信息需要返回数据的总数和列表信息, 需要查两次SQL

 图书状态: 图书状态和数据库存储的status有⼀定的对应关系

如果后续状态码有变动, 我们需要修改项目中所有涉及的代码, 这种情况, 通常采用枚举类来处理映射关系

数据层:

翻页查询SQL

1. @Mapper

2. public interface BookInfoMapper {

3. /**

4. * 获取当前页的信息

5. * @param offset

6. * @param pageSize

7. * @return

8. */

9. @Select("select * from book_info where status !=0 " +

10. "order by id asc limit #{offset},#{pageSize}")

11. List<BookInfo> selectBookInfoByPage(Integer offset, Integer pageSize);

13. /**

14. * 获取总记录数

15. * @return

16. */

17. @Select("select count(1) from book_info where status !=0")

18. Integer count();

19. }

 实现客户端代码：

1. function getBookList() {

2. $.ajax({

3. type: "get",

4. url: "/book/getBookListByPage" + location.search,

5. success: function (result) {

6. //真实的前端处理逻辑, 要比咱们代码复杂

7. if (result.code == "UNLOGIN") {

8. location.href = "login.html";

9. return;

10. }

12. var finalHtml = "";

13. //加载列表

14. var pageResult = result.data;

15. for (var book of pageResult.records) {

16. //根据每一条记录去拼接html, 也就是一个tr

17. finalHtml += '<tr>';

18. finalHtml += '<td><input type="checkbox" name="selectBook" value="' + book.id + '" id="selectBook" class="book-select"></td>';

19. finalHtml += '<td>' + book.id + '</td>';

20. finalHtml += '<td>' + book.bookName + '</td>';

21. finalHtml += '<td>' + book.author + '</td>';

22. finalHtml += '<td>' + book.count + '</td>';

23. finalHtml += '<td>' + book.price + '</td>';

24. finalHtml += '<td>' + book.publish + '</td>';

25. finalHtml += '<td>' + book.statusCN + '</td>';

26. finalHtml += '<td><div class="op">';

27. finalHtml += '<a href="book_update.html?bookId=' + book.id + '">修改</a>';

28. finalHtml += '<a href="javascript:void(0)" onclick="deleteBook(' + book.id + ')">删除</a>';

29. finalHtml += '</div></td></tr>';

30. }

32. $("tbody").html(finalHtml);

34. //翻页信息

35. $("#pageContainer").jqPaginator({

36. totalCounts: pageResult.total, //总记录数

37. pageSize: 10, //每页的个数

38. visiblePages: 5, //可视页数

39. currentPage: pageResult.pageRequest.currentPage, //当前页码

40. first: '<li class="page-item"><a class="page-link">首页</a></li>',

41. prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',

42. next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',

43. last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',

44. page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',

45. //页面初始化和页码点击时都会执行

46. onPageChange: function (page, type) {

47. console.log("第" + page + "页, 类型:" + type);

48. if (type == "change") {

49. location.href = "book_list.html?currentPage=" + page;

50. }

52. }

53. });

55. },

56. error: function (error) {

57. console.log(error);

58. if (error.status == 401) {

59. console.log("401");

60. location.href = "login.html";

61. }

62. }

63. });

64. }