目录
1.数据库表设计
2.引入MyBatis和MySQL驱动依赖
3.配置数据库&日志
4.Model创建
5.用户登录功能实现
6.实现添加图书功能
7.实现翻页功能
1.数据库表设计
数据库表是应⽤程序开发中的⼀个重要环节, 数据库表的设计往往会决定我们的应⽤需求是否能顺利实现, 甚至决定我们的实现方式. 如何设计表以及这些表有哪些字段、关系也是非常重要的.
数据库表设计是依据业务需求来设计的，数据库表通常分两种: 实体表和关系表.
创建数据库 book_test
-- 创建数据库DROP DATABASE IF EXISTS book_test;CREATE DATABASE book_test DEFAULT CHARACTER SET utf8mb4;USE book_test;-- ⽤户表DROP TABLE IF EXISTS user_info;CREATE TABLE user_info (`id` INT NOT NULL AUTO_INCREMENT,`user_name` VARCHAR ( 128 ) NOT NULL,`password` VARCHAR ( 128 ) NOT NULL,`delete_flag` TINYINT ( 4 ) NULL DEFAULT 0,`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now() ON UPDATE now(),PRIMARY KEY ( `id` ),UNIQUE INDEX `user_name_UNIQUE` ( `user_name` ASC )) ENGINE = INNODB DEFAULT CHARSET = utf8mb4 COMMENT = '⽤户表 ';-- 图书表DROP TABLE IF EXISTS book_info;CREATE TABLE `book_info` (`id` INT ( 11 ) NOT NULL AUTO_INCREMENT,`book_name` VARCHAR ( 127 ) NOT NULL,`author` VARCHAR ( 127 ) NOT NULL,`count` INT ( 11 ) NOT NULL,`price` DECIMAL (7,2 ) NOT NULL,`publish` VARCHAR ( 256 ) NOT NULL,`status` TINYINT ( 4 ) DEFAULT 1 COMMENT '0-⽆效 , 1-正常 , 2-不允许借阅 ',`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now() ON UPDATE now(),PRIMARY KEY ( `id` )) ENGINE = INNODB DEFAULT CHARSET = utf8mb4;-- 初始化数据INSERT INTO user_info ( user_name, PASSWORD ) VALUES ( "admin", "admin" );INSERT INTO user_info ( user_name, PASSWORD ) VALUES ( "zhangsan", "123456" );-- 初始化图书数据INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('活着 ','Romised',100,12.2,'出版社');INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('不活着', 'Romised', 100, 22.2, '出版社');INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('想活着 ','Romised',100,32.2,'出版社');INSERT INTO `book_info` (book_name,author,count, price, publish) VALUES ('要活着 ','Romised',100,42.2,'出版社');2.引入MyBatis和MySQL驱动依赖
修改pom.xml文件：
<dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.3.1</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency>3.配置数据库&日志
修改application.yml配置文件：
# 数据库连接配置
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/book_test?characterEncoding=utf8&useSSL=falseusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:configuration:map-underscore-to-camel-case: true #配置驼峰自动转换
# log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #打印sql语句mapper-locations: classpath:mapper/**Mapper.xml
# 设置日志文件的文件名
logging:file:name: logger/spring-book.log4.Model创建
创建UserInfo类：
@Data
public class UserInfo {private Integer id;private String userName;private String password;private Integer deleteFlag;private Date createTime;private Date updateTime;
}
创建BookInfo类：
@Data
public class BookInfo {private Integer id;private String bookName;private String author;private Integer count;//前端展示精度@JsonFormat(shape = JsonFormat.Shape.STRING)private BigDecimal price;private String publish;private Integer status; //0-删除 1-可借阅,2-不可借阅private String statusCN;
}
5.用户登录功能实现
约定前后端交互接口:
[请求]/user/loginContent-Type: application/x-www-form-urlencoded; charset=UTF-8[参数]name=zhangsan&password=123456 8[响应]true //账号密码验证正确 , 否则返回false浏览器给服务器发送/user/login这样的HTTP请求，服务器给浏览器返回Boolean类型的数据
实现服务器代码
控制层:从数据库中, 根据名称查询用户, 如果可以查到, 并且密码⼀致, 就认为登录成功
创建UserController：
@RequestMapping("/user")
@RestController
public class UserController {@Autowiredprivate UserService userService;@RequestMapping("/login")public Boolean login(String userName, String password, HttpSession session){//校验参数是否为空if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}//验证账号密码是否正确//1. 根据用户名去查找用户信息UserInfo userInfo = userService.getUserInfoByName(userName);//2. 比对密码是否正确if (userInfo==null || userInfo.getId()<=0){return false;}if (password.equals(userInfo.getPassword())){//账号密码正确//存SessionuserInfo.setPassword("");session.setAttribute(Constants.SESSION_USER_KEY,userInfo);return true;}return false;}
}业务层:
创建UserService：
@Service
public class UserService {@Autowiredprivate UserInfoMapper userInfoMapper;public UserInfo getUserInfoByName(String name){return userInfoMapper.selectUserByName(name);}
}
数据层:
创建UserInfoMapper：
@Mapper
public interface UserInfoMapper {/*** 根据用户名称查询用户信息* @param name* @return*/@Select("select * from user_info where user_name=#{name}")UserInfo selectUserByName(String name);}这边使用*是为了方便观察，开发中需要挨个写出数据库字段名
测试：
部署程序，验证服务器是否能够正确返回数据，可以在Postman中输入URL进行测试，最好联动前端一起进行测试：
输⼊错误的⽤户名和密码, 页面弹窗警告
输入正确的用户名和密码, 页面正常跳转到booklist.html页面
6.实现添加图书功能
约定前后端交互接口：
[请求]/book/addBookContent-Type: application/x-www-form-urlencoded; charset=UTF-8 [参数]bookName=图书1&author=作者1&count=23&price=36&publish=出版社1&status=1 [响应]"" //失败信息 , 成功时返回空字符串我们约定，浏览器给服务器发送book/addBook这样的HTTP请求，以from表单的形式提交数据
服务器返回处理结果, 返回""表示添加图书成功, 否则, 返回失败信息.
实现服务器代码
控制层:
创建BookController：
@Slf4j
@RequestMapping("/book")
@RestController
public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/getBookListByPage")public Result getBookListByPage(PageRequest pageRequest, HttpSession session){log.info("查询翻页信息, pageRequest:{}",pageRequest);//用户登录校验UserInfo userInfo = (UserInfo) session.getAttribute(Constants.SESSION_USER_KEY);if (userInfo==null|| userInfo.getId()<=0 || "".equals(userInfo.getUserName())){//用户未登录return Result.unlogin();}//校验成功if (pageRequest.getPageSize()<0 || pageRequest.getCurrentPage()<1){return Result.fail("参数校验失败");}PageResult<BookInfo> bookInfoPageResult = null;try {bookInfoPageResult = bookService.selectBookInfoByPage(pageRequest);return Result.success(bookInfoPageResult);}catch (Exception e){log.error("查询翻页信息错误,e:{}",e);return Result.fail(e.getMessage());}}@RequestMapping(value = "/addBook", produces = "application/json")public String addBook(BookInfo bookInfo){log.info("接收到添加图书请求, bookInfo:{}",bookInfo);//参数校验if (!StringUtils.hasLength(bookInfo.getBookName())|| !StringUtils.hasLength(bookInfo.getAuthor())|| bookInfo.getCount()<0|| bookInfo.getPrice()==null|| !StringUtils.hasLength(bookInfo.getPublish())){return "参数校验失败, 请检查入参";}Integer result = bookService.addBook(bookInfo);if (result<=0){log.error("添加图书出错:bookInfo:{}",bookInfo);return "添加图书出错, 请联系管理人";}return "";}
}业务层:
创建BookService：
@Slf4j
@Service
public class BookService {@Autowiredprivate BookInfoMapper bookInfoMapper; /*** 添加图书** @param bookInfo* @return*/public Integer addBook(BookInfo bookInfo) {Integer result = 0;try {result = bookInfoMapper.insertBook(bookInfo);} catch (Exception e) {log.error("添加图书出错, e:{}", e);}return result;}
}数据层:
创建BookInfoMapper文件：
@Mapper
public interface BookInfoMapper {/*** 获取当前页的信息* @param offset* @param pageSize* @return*/@Select("select * from book_info where status !=0 " +"order by id asc limit #{offset},#{pageSize}")List<BookInfo> selectBookInfoByPage(Integer offset, Integer pageSize);@Insert("insert into book_info (book_name,author, count, price, publish, status) " +"values(#{bookName}, #{author}, #{count}, #{price},#{publish}, #{status})")Integer insertBook(BookInfo bookInfo);
}前端代码中补全add()：
function add() {$.ajax({type:"post",url: "/book/addBook",data:$("#addBook").serialize(),//提交整个form表单success:function(result){if (result != null && result.code == "SUCCESS" && result.data=="") {//图书添加成功location.href = "book_list.html";}else{console.log(result.code);alert(result);}},error: function (error) {console.log(error);//用户未登录if (error != null && error.status == 401) {location.href = "login.html";}}}); }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就得到总页数
翻页请求和响应部分, 我们通常封装在两个对象中
翻页请求对象：
@Datapublic class PageRequest {private int currentPage = 1; // 当前页private int pageSize = 10; // 每页中的记录数private int offset; public int getOffset() {return (currentPage-1) * pageSize;}}翻页列表结果类:
import lombok.Data; import java.util.List; @Datapublic class PageResult<T> {private int total;//所有记录数private List<T> records; // 当前页数据 public PageResult(Integer total, List<T> records) {this.total = total;this.records = records;}}返回结果中, 使⽤泛型来定义记录的类型
约定前后端交互接口
[请求]/book/getListByPage?currentPage=1Content-Type: application/x-www-form-urlencoded; charset=UTF-8 [参数][响应]Content-Type: application/json 10{"total": 25,"records": [{"id": 25,"bookName": "图书21","author": "作者2","count": 29,"price": 22.00,"publish": "出版社1","status": 1,"statusCN": "可借阅 "}, {......} ]}我们约定，浏览器给服务器发送book/getListByPage这样的HTTP请求，通过currentPage参数告诉服务器当前请求为第几页的数据, 后端根据请求参数, 返回对应页的数据
实现服务器代码
控制层:
完善 BookController：
@Slf4j
@RequestMapping("/book")
@RestController
public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/getBookListByPage")public Result getBookListByPage(PageRequest pageRequest, HttpSession session){log.info("查询翻页信息, pageRequest:{}",pageRequest);
// //用户登录校验
// UserInfo userInfo = (UserInfo) session.getAttribute(Constants.SESSION_USER_KEY);
// if (userInfo==null|| userInfo.getId()<=0 || "".equals(userInfo.getUserName())){
// //用户未登录
// return Result.unlogin();
// }//校验成功if (pageRequest.getPageSize()<0 || pageRequest.getCurrentPage()<1){return Result.fail("参数校验失败");}PageResult<BookInfo> bookInfoPageResult = null;try {bookInfoPageResult = bookService.selectBookInfoByPage(pageRequest);return Result.success(bookInfoPageResult);}catch (Exception e){log.error("查询翻页信息错误,e:{}",e);return Result.fail(e.getMessage());}}@RequestMapping(value = "/addBook", produces = "application/json")public String addBook(BookInfo bookInfo){log.info("接收到添加图书请求, bookInfo:{}",bookInfo);//参数校验if (!StringUtils.hasLength(bookInfo.getBookName())|| !StringUtils.hasLength(bookInfo.getAuthor())|| bookInfo.getCount()<0|| bookInfo.getPrice()==null|| !StringUtils.hasLength(bookInfo.getPublish())){return "参数校验失败, 请检查入参";}Integer result = bookService.addBook(bookInfo);if (result<=0){log.error("添加图书出错:bookInfo:{}",bookInfo);return "添加图书出错, 请联系管理人";}return "";}@RequestMapping("/queryBookInfoById")public BookInfo queryBookInfoById(Integer bookId){
// long start = System.currentTimeMillis();log.info("根据ID查询图书, bookId:"+bookId);BookInfo bookInfo = null;try {bookInfo = bookService.queryBookInfoById(bookId);}catch (Exception e){log.error("查询图书失败, e:{}",e);}
// long end = System.currentTimeMillis();
// log.info("queryBookInfoById 执行耗时: "+ (end-start) + "ms");return bookInfo;}@RequestMapping(value = "/updateBook", produces = "application/json")public String updateBook(BookInfo bookInfo){log.info("接收到更新图书的请求, bookInfo:{}",bookInfo);Integer result = bookService.updateBook(bookInfo);if (result == 0){log.error("更新图书失败, 请联系管理员");return "更新图书失败, 请联系管理员";}return "";}@RequestMapping(value = "/batchDelete", produces = "application/json")public String batchDelete(@RequestParam List<Integer> ids){log.info("接收请求, 批量删除图书, 图书ID:{}",ids);Integer result = bookService.batchDelete(ids);if (result<=0){log.error("批量删除失败, ids:{}",ids);return "批量删除失败, 请联系管理员";}return "";}
}业务层:
BookService
@Slf4j
@Service
public class BookService {@Autowiredprivate BookInfoMapper bookInfoMapper;public PageResult<BookInfo> selectBookInfoByPage(PageRequest pageRequest) {if (pageRequest == null) {return null;}//获取总记录数Integer count = bookInfoMapper.count();//获取当前记录List<BookInfo> bookInfos = bookInfoMapper.selectBookInfoByPage(pageRequest.getOffset(), pageRequest.getPageSize());if (bookInfos != null && bookInfos.size() > 0) {for (BookInfo bookInfo : bookInfos) {//根据status 获取状态的定义bookInfo.setStatusCN(BookStatusEnum.getNameByCode(bookInfo.getStatus()).getName());}}return new PageResult<>(bookInfos, count, pageRequest);}/*** 添加图书** @param bookInfo* @return*/public Integer addBook(BookInfo bookInfo) {Integer result = 0;try {result = bookInfoMapper.insertBook(bookInfo);} catch (Exception e) {log.error("添加图书出错, e:{}", e);}return result;}public BookInfo queryBookInfoById(Integer id) {return bookInfoMapper.queryBookInfoById(id);}/*** 更新图书* @param bookInfo* @return*/public Integer updateBook(BookInfo bookInfo) {Integer result = 0;try {result = bookInfoMapper.updateBook(bookInfo);} catch (Exception e) {log.error("更新图书失败, e:{}", e);}return result;}public Integer batchDelete(List<Integer> ids){Integer result =0;try {result = bookInfoMapper.batchDelete(ids);}catch (Exception e){log.error("批量删除图书失败, ids:{}",ids);}return result;}
}
翻页信息需要返回数据的总数和列表信息, 需要查两次SQL
图书状态: 图书状态和数据库存储的status有⼀定的对应关系
如果后续状态码有变动, 我们需要修改项目中所有涉及的代码, 这种情况, 通常采用枚举类来处理映射关系
数据层:
翻页查询SQL
@Mapper
public interface BookInfoMapper {/*** 获取当前页的信息* @param offset* @param pageSize* @return*/@Select("select * from book_info where status !=0 " +"order by id asc limit #{offset},#{pageSize}")List<BookInfo> selectBookInfoByPage(Integer offset, Integer pageSize);/*** 获取总记录数* @return*/@Select("select count(1) from book_info where status !=0")Integer count();
}实现客户端代码：
function getBookList() {$.ajax({type: "get",url: "/book/getBookListByPage" + location.search,success: function (result) {//真实的前端处理逻辑, 要比咱们代码复杂if (result.code == "UNLOGIN") {location.href = "login.html";return;}var finalHtml = "";//加载列表var pageResult = result.data;for (var book of pageResult.records) {//根据每一条记录去拼接html, 也就是一个trfinalHtml += '<tr>';finalHtml += '<td><input type="checkbox" name="selectBook" value="' + book.id + '" id="selectBook" class="book-select"></td>';finalHtml += '<td>' + book.id + '</td>';finalHtml += '<td>' + book.bookName + '</td>';finalHtml += '<td>' + book.author + '</td>';finalHtml += '<td>' + book.count + '</td>';finalHtml += '<td>' + book.price + '</td>';finalHtml += '<td>' + book.publish + '</td>';finalHtml += '<td>' + book.statusCN + '</td>';finalHtml += '<td><div class="op">';finalHtml += '<a href="book_update.html?bookId=' + book.id + '">修改</a>';finalHtml += '<a href="javascript:void(0)" onclick="deleteBook(' + book.id + ')">删除</a>';finalHtml += '</div></td></tr>';}$("tbody").html(finalHtml);//翻页信息$("#pageContainer").jqPaginator({totalCounts: pageResult.total, //总记录数pageSize: 10, //每页的个数visiblePages: 5, //可视页数currentPage: pageResult.pageRequest.currentPage, //当前页码first: '<li class="page-item"><a class="page-link">首页</a></li>',prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',//页面初始化和页码点击时都会执行onPageChange: function (page, type) {console.log("第" + page + "页, 类型:" + type);if (type == "change") {location.href = "book_list.html?currentPage=" + page;}}});},error: function (error) {console.log(error);if (error.status == 401) {console.log("401");location.href = "login.html";}}});}
