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

    目录

    1.数据库表设计

    2.引入MyBatis和MySQL驱动依赖

    3.配置数据库&日志

    4.Model创建

    5.用户登录功能实现

     6.实现添加图书功能

    7.实现翻页功能

    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;
    30.  
    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文件：

    1.  <dependency>
    2.     <groupId>org.mybatis.spring.bootgroupId>
    3.     <artifactId>mybatis-spring-boot-starterartifactId>
    4.     <version>2.3.1version>
    5.  dependency>
    6.  <dependency>
    7.     <groupId>com.mysqlgroupId>
    8.     <artifactId>mysql-connector-jartifactId>
    9.     <scope>runtimescope>
    10.  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
    4.  
    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;
    6.  
    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.         }
    13.  
    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.         }
    28.  
    29.         return false;
    30.  
    31.     }
    32. }

    业务层:

    创建UserService：

    1. @Service
    2. public class UserService {
    3.     @Autowired
    4.     private UserInfoMapper userInfoMapper;
    5.  
    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);
    10.  
    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 {
    5.  
    6.     @Autowired
    7.     private BookService bookService;
    8.  
    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 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.     }
    31.  
    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 {
    4.  
    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 selectBookInfoByPage(Integer offset, Integer pageSize);
    12.  
    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){
    7.                 
    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.                     }
    22.  
    23.                 }
    24.             });        
    25.             
    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 {
    5.      private int total;//所有记录数
    6.      private List records; // 当前页数据 
    7.      public PageResult(Integer total, List 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.  [参数]
    5.  
    6.  
    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 {
    5.  
    6.     @Autowired
    7.     private BookService bookService;
    8.  
    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 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.     }
    31.  
    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.     }
    51.  
    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.     }
    66.  
    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.     }
    77.  
    78.     @RequestMapping(value = "/batchDelete", produces = "application/json")
    79.     public String batchDelete(@RequestParam List 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. }
    89.

    业务层:

    BookService

    1. @Slf4j
    2. @Service
    3. public class BookService {
    4.  
    5.     @Autowired
    6.     private BookInfoMapper bookInfoMapper;
    7.  
    8.     public PageResult selectBookInfoByPage(PageRequest pageRequest) {
    9.         if (pageRequest == null) {
    10.             return null;
    11.         }
    12.         //获取总记录数
    13.         Integer count = bookInfoMapper.count();
    14.         //获取当前记录
    15.         List 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.         }
    22.  
    23.         return new PageResult<>(bookInfos, count, pageRequest);
    24.  
    25.     }
    26.  
    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.     }
    42.  
    43.     public BookInfo queryBookInfoById(Integer id) {
    44.         return bookInfoMapper.queryBookInfoById(id);
    45.     }
    46.  
    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 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 selectBookInfoByPage(Integer offset, Integer pageSize);
    12.  
    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.                         }
    11.  
    12.                         var finalHtml = "";
    13.                         //加载列表
    14.                         var pageResult = result.data;
    15.                         for (var book of pageResult.records) {
    16.                             //根据每一条记录去拼接html, 也就是一个tr
    17.                             finalHtml += '';
    18.                             finalHtml += 'id + '" id="selectBook" class="book-select">';
    19.                             finalHtml += '' + book.id + '';
    20.                             finalHtml += '' + book.bookName + '';
    21.                             finalHtml += '' + book.author + '';
    22.                             finalHtml += '' + book.count + '';
    23.                             finalHtml += '' + book.price + '';
    24.                             finalHtml += '' + book.publish + '';
    25.                             finalHtml += '' + book.statusCN + '';
    26.                             finalHtml += '
      ';
    27.                             finalHtml += 'id + '">修改';
    28.                             finalHtml += 'id + ')">删除';
    29.                             finalHtml += '
      ';
  • }
  • $("tbody").html(finalHtml);
  • //翻页信息
  • $("#pageContainer").jqPaginator({
  • totalCounts: pageResult.total, //总记录数
  • pageSize: 10, //每页的个数
  • visiblePages: 5, //可视页数
  • currentPage: pageResult.pageRequest.currentPage, //当前页码
  • first: '
  • 首页
    • ',
  • prev: '
  • 上一页<\/a><\/li>',
  • next: '
  • 下一页<\/a><\/li>',
  • last: '
  • 最后一页<\/a><\/li>',
  • page: '
  • {{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";
  • }
  • }
  • });
  • }
  • 相关阅读:
    淘宝商品详情API接口（H5端和APP端），淘宝详情页，商品属性接口,商品信息查询
    Nacos注册中心11-Server端（处理服务发现请求）
    什么是 eCPM？它与 CPM 有何不同？
    面试经验分享 | 驻场安全服务工程师面试
    Vue的学习之安装Vue
    阻塞车间调度
    article-码垛机器人admas仿真
    重制版 day 18 CSV和excel文件操作
    Android设计模式--原型模式
    测试/开发程序员的思考，突破变得更强......
  • 原文地址：https://blog.csdn.net/Romised/article/details/139703716