前言:
接触若依也很长时间了从1.0到现在的4.0 期间一直想写个手册 但一直没有很好地切入点 最近在开发新系统 正好根据开发中遇到或者使用到的内容作为切入点来进行写文档 可能会有些混乱 一开始先写上准备后续再排版精修 推荐Git拉取,方便文档实时更新
CSDN过来的同学注意 文档已经停止在CSDN的维护
目录结构:
大致分为前端、后端，前端根据使用的页面add、edit、list来进行详细划分，后端根据三层加上其他特殊内容点划分
前端
add.html
下拉列
// 1 其中t_vip_user_details_vip_type 为字典表的字典类型 可前往-系统管理-->字段管理 --> 添加新的字典 <div class="form-group"> <label class="col-sm-3 control-label">VIP用户类别：</label> <div class="col-sm-8"> <select id="xxxxx" name="xxxxx" class="form-control m-b" th:with="type=${@dict.getType('t_vip_user_details_vip_type')}"> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </div> </div> // 2 取非字典的数据(model) <div class="form-group"> <label class="col-sm-3 control-label">司机：</label> <div class="col-sm-8"> <select id="xxxx" name="xxxx" class="form-control m-b"> <option value="">--请选择(非必选)--</option> <option th:each="xxxx : ${xxxxList}" th:text="${xxxx.name}" th:value="${xxxx.id}"></option> </select> </div> </div> //3 使下拉列带有搜索功能:引入该JS即可 https://www.cnblogs.com/tianxinyu/p/9988763.html select的class样式为 <div th:include="include::footer"></div> // 该JS需要在include下方 <script th:src="@{/ajax/libs/select/select2.js}"></script>
时间框
<div class="form-group"> <label class="col-sm-3 control-label">设备到期时间：</label> <div class="col-sm-8"> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input name="xxxxx" class="time-input" placeholder="yyyy-MM-dd" type="text"> </div> </div> </div>
大文本框
<textarea name="content" style="width: 762px ;margin: 0px; height: 295px;"></textarea>
Ajax校验
$("#form-motorman-add").validate({ rules: { name: { required: true, }, identityCard: { required: true, isIdentity: true, remote: { url: ctx + "iot/motorman/checkIdentityCard", type: "post", dataType: "json", data: { name: function () { return $.common.trim($("#identityCard").val()); }, id: '' }, dataFilter: function (data, type) { return $.validate.unique(data); } } }, contactPhone: { required: true, isPhone: true }, }, messages: { "identityCard": { remote: "身份证号已存在" }, } });
/** * 校验身份证 */ @PostMapping("/checkIdentityCard") @ResponseBody public Integer checkIdentityCard(String identityCard, Integer id) { // 存在 return CommonEnum.EXIST.getCode(); // 不存在 return CommonEnum.EXIST.NOT_EXIST(); }
package com.ruoyi.common.constant; import lombok.Getter; /** * @author: 童小纯 * @Date: 2019-08-08 10:24 * @Description: < 通用校验是否存在返回状态码 > */ @Getter public enum CommonEnum { /** * 用户是否存在返回码 */ EXIST(1, "存在"), NOT_EXIST(0, "不存在"); private Integer code; private String msg; CommonEnum(Integer code, String msg) { this.code = code; this.msg = msg; } }
自定义校验
jQuery.validator.addMethod("isAllNumber", function (value, element) { var loginName = $("#loginName").val(); var patrn = /^[0-9]*$/; if (patrn.test(loginName)) { return false; } else { return true; } }, "用户名不能为纯数字"); $("#form-product-edit").validate({ rules: { loginName: { required: true, // 自定义属性 属性名要和上方的一参一样 isAllNumber: true, }, } });
回显选中图片
在下方已经写过了
路径:前端 --> 其他 --> 回显选中图片
如果需要放大回显图片可以看
前端 --> 其他 --> 放大图片
JS对添加下拉列元素
http://ourjs.com/detail/5be7fa5cac52fe63eba502af 看这种方式 很好用
edit.html
下拉列
<div class="form-group"> <label class="col-sm-3 control-label">性别：</label> <div class="col-sm-8"> <select id="xxx" name="xxx" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}"> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{sex}"></option> </select> </div> </div>
回显时间
<div class="form-group"> <label class="col-sm-3 control-label">合同到期日期：</label> <div class="col-sm-8" > <input id="xxxxxx" name="xxxxxx" class="time-input" type="text" readonly th:value="${#dates.format(xx.xxxxxx,'yyyy-MM-dd HH:mm:ss')}"> </div> </div>
list.html
搜索栏
下拉列
<li> 用户状态：<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </li> //2: 下拉列带搜索功能 主要是select class加了form-control 属性 // 然后引入 // <script th:src="@{/ajax/libs/select/select2.css}"></script> // <script th:src="@{/ajax/libs/select/select2.js}"></script> <li style="width: 280px;"> <p>设备类别: </p> <select name="equipmentType" id="equipmentType" th:with="type=${@dict.getType('t_equipment_equipment_type')}" class="form-control"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </li>
sys_normal_disable为字典类型值 字典类型值一般为表名字段名来命名防止出现重复
时间框
根据开始时间结束时间搜索
如果使用的是MybatisPlus版本 注意后台接收数据需要创建Vo对象 或者直接使用Map对象来进行接收开始时间 和 结束时间 不然会报错的哈
**Html: **
<li class="select-time"> <label>创建时间： </label> <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/> <span>-</span> <input type="text" class="time-input" id="endTime" placeholder="结束时间"name="params[endTime]"/> </li>
Vo:
注意set get方法和普通实体类有区别 这么写的原因是防止前端没有传入开始时间和结束时间 然后mapper.xml 这样去判断就会报错 因为params是null 可以在这个判断外边再加一层if判断params是否为空即可解决 但还是推荐 下边这种方式写get set方法
/** 请求参数 */ private Map<String, Object> params; /** get()*/ public Map<String, Object> getParams(){if (params == null){params = new HashMap<>();}return params;} /** set() */ public void setParams(Map<String, Object> params){this.params = params;}
mapper.xml
<if test="params.beginTime != null and params.beginTime !=''"><!-- 开始时间检索 --> AND date_format(xxxxx,'%y%m%d') >= date_format(#{params.beginTime},'%y%m%d') </if> <if test="params.endTime != null and params.endTime !='' "><!-- 结束时间检索 --> AND date_format(xxxxx,'%y%m%d') <= date_format(#{params.endTime},'%y%m%d') </if>
Table表格
刷新表格
// 这是封装好的方法 不需要在去调用原生的JS了 $.table.refresh();
按钮颜色
后边加上 btn-xs 样式会使按钮缩小
深蓝色 btn btn-primary 浅蓝色 btn btn-info 绿色 btn btn-success 黄色 btn btn-warning 红色 btn btn-danger 透明 btn btn-link 默认 btn btn-default
自定义按钮颜色
有时候bootstrap提供的按钮颜色并不能完全满足系统的需要 只有仅限的几个 所以在这时候需要增加自定义的按钮颜色
下边是两个在线生成bootstrap按钮颜色的网址
twitterbootstrap3buttons.w3masters.nl/
以下为增加一个紫色按钮的示例
- 创建一个.css文件
- 将下方的css复制到css文件中
- 页面引入该css文件
- 页面创建个按钮
<a class="btn btn-sample single disabled"> <i class="fa fa-sun-o"></i> 审核 </a>
第二步所需要的代码:
.btn-sample { color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #611BBD; *background-color: #611BBD; background-image: -moz-linear-gradient(top, #AF4CE8, #611BBD); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#AF4CE8), to(#611BBD)); background-image: -webkit-linear-gradient(top, #AF4CE8, #611BBD); background-image: -o-linear-gradient(top, #AF4CE8, #611BBD); background-image: linear-gradient(to bottom, #AF4CE8, #611BBD); background-repeat: repeat-x; border-color: #611BBD; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AF4CE8', endColorstr='#611BBD', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-sample:hover, .btn-sample:focus, .btn-sample:active, .btn-sample.active, .btn-sample.disabled, .btn-sample[disabled] { color: #FFFFFF; background-color: #611BBD; *background-color: #003bb3; }
按钮大小
<div class="container"> <button class="btn btn-primary">btn-primary</button> <button class="btn btn-warning btn-xs">btn-warning</button> <button class="btn btn-success btn-sm">btn-success</button> <button class="btn btn-info btn-lg">btn-info</button> </div>
格式化时间
/** 合同创建日期 */ @JsonFormat(pattern = "yyyy-MM-dd", timezone="GMT+8") private Date contractCreateTime;
前端
th:value="*{#dates.format(reserveTime,'yyyy-MM-dd HH:mm:ss')}"
设置默认排序列
sortName: 'createTime', sortOrder: "desc",
例:
表格匹配字典值
var userType = [[${@dict.getType('sys_user_user_type')}]]; // 在table相关属性字段的操作 { field: 'userType', title: '类型', align: "left", formatter: function (value, item, index) { return $.table.selectDictLabel(userType, value); } },
表格增加.减少功能项
单页
若依的table是用BootstarpTable 而且若依也BootStarpTable简单封装了 如果想要去掉 table右上角的 下载 列表刷新搜索 几个按钮该怎么做呢?也很简单 增加这几个的属性该并为false即可:
若依框架文档开发手册----开发中常用功能模块（中）：https://developer.aliyun.com/article/1418633
