10-1 图书管理系统（SSM+LayUi）

图书类型管理模块(类型查询)

新建图书类型管理页面

• 在WEB-INF/pages里新建type/typeIndex.jsp，把table.html里的代码拷贝进去

• webapp/api/init.json里的类型管理的页面路径相应更改以对应(改成typeIndex，是Controller层的路径)

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户性别</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户城市</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户职业</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classify" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon">�</i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<script>
    layui.use(['form', 'table','miniPage','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage;

        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox",  50},
                {field: 'id',  80, title: 'ID', sort: true},
                {field: 'username',  80, title: '用户名'},
                {field: 'sex',  80, title: '性别', sort: true},
                {field: 'city',  80, title: '城市'},
                {field: 'sign', title: '签名', minWidth: 150},
                {field: 'experience',  80, title: '积分', sort: true},
                {field: 'score',  80, title: '评分', sort: true},
                {field: 'classify',  80, title: '职业'},
                {field: 'wealth',  135, title: '财富', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                var content = miniPage.getHrefContent('page/table/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '添加用户',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var content = miniPage.getHrefContent('page/table/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '编辑用户',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

    });
</script>

在sqlMapConfig.xml里设置分页配置

在配置分页时遇到了BUG，插件版本的问题，修改了下pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.gychen</groupId>
  <artifactId>libraryManagerSystem</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>libraryManagerSystem Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <spring.version>5.1.3.RELEASE</spring.version>
    <slf4j.version>1.6.6</slf4j.version>
    <log4j.version>1.2.12</log4j.version>
    <mysql.version>8.0.20</mysql.version>
    <mybatis.version>3.4.5</mybatis.version>
  </properties>

  <dependencies>

    <!-- spring -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.6.8</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!-- 单元测试 -->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>compile</scope>
    </dependency>

    <!-- mysql -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>${mysql.version}</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>

    <!-- log start -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>${slf4j.version}</version>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>${slf4j.version}</version>
    </dependency>
    <!-- log end -->

    <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.0</version>
    </dependency>

    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.5.2</version>
      <type>jar</type>
      <scope>compile</scope>
    </dependency>

    <!-- mybatis逆向工程 -->
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.3.7</version>
    </dependency>

    <!-- jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>

    <!-- el -->
    <dependency>
      <groupId>javax.el</groupId>
      <artifactId>javax.el-api</artifactId>
      <version>3.0.0</version>
      <scope>provided</scope>
    </dependency>

    <!-- 分页 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>3.7.5</version>
    </dependency>
    <dependency>
      <groupId>com.github.jsqlparser</groupId>
      <artifactId>jsqlparser</artifactId>
      <version>0.9.1</version>
    </dependency>

    <!-- jackson时间格式 -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.11.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.11.0</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>libraryManagerSystem</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>

        <!-- mybatis逆向工程 -->
        <plugin>
          <groupId>org.mybatis.generator</groupId>
          <artifactId>mybatis-generator-maven-plugin</artifactId>
          <version>1.3.2</version>
          <configuration>
            <!-- 在控制台打印执行日志 -->
            <verbose>true</verbose>
            <!-- 重复生成时会覆盖之前的文件-->
            <overwrite>true</overwrite>
          </configuration>
        </plugin>

      </plugins>
    </pluginManagement>
  </build>
</project>

    <!-- 配置分页内容 -->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageHelper">
            <property name="dialect" value="mysql"/>
        </plugin>
    </plugins>

新建工具类

• 在com.gychen.util里新建Constants和RestRespond
  • Constants

      package com.gychen.util;
      
      /**
       * 常量类
       */
      
      public class Constants {
      
          public final static int OK_CODE = 0;
          public final static int FAIL_CODE = 400;
          public final static int OTHER_FAIL_CODE = 333;
          public final static String  OK_MSG = "请求成功";
          public final static String FAIL_MSG = "请求失败";
          public final static int STATUS_0 = 0;  //可用状态
          public final static int STATUS_1 = 1;   //禁用状态
      
          // 单个对象
          public static final String ITEM = "item";
      
          // 返回的对象列表
          public static final String LIST = "list";
      
          public final static String CACHE_NAME = "KACache";
      
      }
    
    

  • RestRespond

      package com.gychen.util;
      
      import java.util.HashMap;
      import java.util.List;
      
      /**
       * REST 接口返回数据
       *
       * @author gychen
       */
      public class RestResponse extends HashMap<String, Object> {
      
          /**
           * 禁止通过构造函数构造对象，只能通过静态方法获取实例。
           *
           * @see #ok()
           * @see #ok(String)
           * @see #fail()
           * @see #fail(String)
           */
          private RestResponse() {
          }
      
      
      
          /**
           * 设置接口返回的文本消息，属性 key: message
           *
           * @param msg
           * @return
           */
          public RestResponse msg(String msg) {
              this.put(Constants.OK_MSG, msg);
              return this;
          }
      
          /**
           * 设置接口返回的数据对象，属性 key: item
           *
           * @param item
           * @return
           */
          public RestResponse item(Object item) {
              this.put(Constants.ITEM, item);
              return this;
          }
      
          /**
           * 设置接口返回的数据对象列表，属性 key: list
           *
           * @param list
           * @return
           */
          public RestResponse list(List<?> list) {
              this.put("data", list);
              return this;
          }
      
          /**
           * 设置接口返回的数据项，并指定数据项的属性 key
           *
           * @param key
           * @param value
           * @return
           */
          public RestResponse put(String key, Object value) {
              super.put(key, value);
              return this;
          }
      
          /**
           * 接口执行成功的返回数据，其中属性 OK_CODE = 0
           *
           * @return
           */
          public static RestResponse ok() {
              RestResponse result = new RestResponse();
              result.put("code", Constants.OK_CODE);
              result.put("msg", Constants.OK_MSG);
              return result;
          }
      
          /**
           * 接口执行成功的返回数据，并设置文本消息
           *
           * @param msg
           * @return
           */
          public static RestResponse ok(String msg) {
              RestResponse result = new RestResponse();
              result.put("code", Constants.OK_CODE);
              result.put("msg", Constants.OK_MSG).msg(msg);
              return result;
          }
      
          /**
           * 接口执行成功的返回数据，并设置对象数据
           *
           * @param item
           * @return
           */
          public static RestResponse ok(Object item) {
              RestResponse result = new RestResponse();
              result.put("msg", Constants.OK_MSG);
              result.put("code", Constants.OK_CODE).item(item);
              return result;
          }
      
          /**
           * 接口执行成功的返回数据，并设置列表对象数据
           *
           * @param list
           * @return
           */
          public static RestResponse ok(List<?> list) {
              RestResponse result = new RestResponse();
              result.put("code", Constants.OK_CODE);
              result.put("msg",Constants.OK_MSG).list(list);
              return result;
          }
      
          /**
           * 接口执行失败的返回数据，其中属性 FIAL_CODE = 1
           *
           * @return
           */
          public static RestResponse fail() {
              RestResponse result = new RestResponse();
              result.put("code", Constants.FAIL_CODE);
              result.put("msg", Constants.FAIL_MSG);
              return result;
          }
      
          /**
           * 接口执行失败的返回数据，并设置文本消息，其中属性 error = 1, message = {msg}
           *
           * @param msg
           * @return
           */
          public static RestResponse fail(String msg) {
              RestResponse result = new RestResponse();
              result.put("msg", Constants.FAIL_MSG);
              result.put("code", Constants.FAIL_CODE).msg(msg);
              return result;
          }
      
          /**
           * 接口执行失败的返回数据，自定义状态码，其中属性 error = {errcode}
           *
           * @param errcode
           * @return
           */
          public static RestResponse fail(int errcode) {
              RestResponse result = new RestResponse();
              result.put("msg", Constants.FAIL_MSG);
              result.put("code", errcode);
              return result;
          }
      }
    

（详见10-1 图书类型管理-类型查询）