Study Notes of Guns

发表于 更新于 分类于 ， 阅读次数： Valine：
更简洁的后台管理系统

Guns基于SpringBoot 2，致力于做更简洁的后台管理系统，完美整合springmvc + shiro + mybatis-plus + beetl!Guns项目代码简洁，注释丰富，上手容易，同时Guns包含许多基础模块(用户管理，角色管理，部门管理，字典管理等10个模块)，可以直接作为一个后台管理系统的脚手架!

http://stylefeng.cn

后端分页

可参考 Guns 的【日志管理】模块

分页插件| MyBatis-Plus

使用

  1. 前端初始化Bootstrap Table时设置分页方式为服务端分页。（static/modular/system/log/log.js）
  2. 后端接口使用Guns提供的工具类common.constant.factory.PageFactory来获取MyBatis-Plus分页插件所需的Page对象。
  3. 然后将Page对象传递到Mapper层进行查询，MyBatis-Plus分页插件会自动帮你实现分页。
  4. 将查询结果放入Page对象的records属性中。
  5. 使用Guns的core.common.page.PageInfoBT对分页结果进行封装后返回给前端。

分析

  1. Guns配置分页插件的地方在com.dubbo.pay.config.datasource

表单验证

参考 Guns 的【用户管理】模块

BootstrapValidator

BootstrapValidator指南

  1. 必要的css和js文件在src\main\webapp\WEB-INF\view\common\_container.html文件中引入。

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 全局css -->
    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/plugins/validate/bootstrapValidator.min.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxPath}/static/js/plugins/validate/bootstrapValidator.min.js"></script>

  2. HTML 表单

    • 表单要指定 ID

      WEB-INF/view/system/user/user_add.html
      1
      2
      3
      <div class="form-horizontal" id="userInfoForm">
          ...
      </div>

    • 需验证的字段，默认需要以<div class=”form-group”></div>包裹（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值（作为验证匹配字段）。

      WEB-INF/view/system/user/user_add.html
      1
      <#input id="account" name="账户" underline="true"/>

      自定义标签 input ：

      WEB-INF/view/common/tags/input.tag
      1
      2
      3
      4
      5
      <div class="form-group">
          <label class="col-sm-3 control-label">${name}</label>
          <div class="col-sm-9">
              <input class="form-control" id="${id}" name="${id}"
                     ...

    • 表单域配置（官方默认验证）

      static/modular/system/user/user_info.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      var UserInfoDlg = {
          ...
          validateFields: {
              account: {
                  validators: {
                      notEmpty: {
                          message: '账户不能为空'
                      }
                  }
              }
              ...
          }
      };

    • js 入口函数中初始化验证器

      static/modular/system/user/user_info.js
      1
      2
      3
      $(function () {
          Feng.initValidator("userInfoForm", UserInfoDlg.validateFields);
      	...

    • 提交时手动触发

      static/modular/system/user/user_info.js
      1
      2
      3
      4
      5
      6
      7
      8
      UserInfoDlg.validate = function () {
          // 重置表单所有验证规则
          $('#userInfoForm').data("bootstrapValidator").resetForm();
          // 触发全部验证
          $('#userInfoForm').bootstrapValidator('validate');
          // 获取当前表单验证状态
          return $("#userInfoForm").data('bootstrapValidator').isValid();
      };

      • 当提交按钮的type=”submit”时，会在 success 之前自动触发表单验证，Guns 提交按钮为普通按钮，故需要手动触发。

        WEB-INF/view/common/tags/button.tag
        1
        2
        3
        <button type="button" ...>
            ...
        </button>

正整数

方式一：

用 BootstrapValidator 验证正整数时需要适用正则表达式：

1
2
3
4
5
6
7
8
9
10
validateFields: {
        count: {
            validators: {
                regexp: {
                    regexp: /^[1-9]\d*$ /,
                    message: '格式错误，请输入正整数'
                }
            }
        }
    }

方式二：

H5 提供了 number 的表单类型，用来控制数字输入。

将 input.tag 复制到对应 html 文件，该填的填，该删的删。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row">
    <div class="col-sm-6 b-r">
        <#input id="name" name="姓名" underline="true"/>

        <div class="form-group">
            <label class="col-sm-3 control-label">数量</label>
            <div class="col-sm-9">
                <input class="form-control" id="count" name="count" type="number" min="1">
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <#input id="age" name="年龄"/>
    </div>
</div>