目录

前端

add.html

时间框

大文本框

Ajax校验

自定义校验

回显选中图片

JS对添加下拉列元素

edit.html

下拉列

回显时间

list.html

搜索栏

时间框

mapper.xml

Table表格

格式化时间

前端

表格匹配字典值

表格增加.减少功能项

全局

其他

关闭标签页

输入框锁定

弹出某页面

JS校验空值

JS绑定input事件

自定义AJAX

添加Class元素

操作结果提示

回显选中图片

Thymeleaf

后端

系统

当前用户

定时器

新增定时器

Controller

关于权限

Service

Dao

Mapper

属性封装

集合遍历

多参数:

其他

BigDecimal使用

MYSQL

前言:

接触若依也很长时间了从1.0到现在的4.0 期间一直想写个手册 但一直没有很好地切入点 最近在开发新系统 正好根据开发中遇到或者使用到的内容作为切入点来进行写文档 可能会有些混乱 一开始先写上准备后续再排版精修 推荐Git拉取,方便文档实时更新

CSDN过来的同学注意 文档已经停止在CSDN的维护

目录结构:

大致分为前端、后端，前端根据使用的页面add、edit、list来进行详细划分，后端根据三层加上其他特殊内容点划分

前端

add.html

下拉列

// 1 其中t_vip_user_details_vip_type 为字典表的字典类型 可前往-系统管理-->字段管理 --> 添加新的字典// 2 取非字典的数据(model)--请选择(非必选)--//3 使下拉列带有搜索功能:引入该JS即可https://www.cnblogs.com/tianxinyu/p/9988763.htmlselect的class样式为// 该JS需要在include下方

时间框

大文本框

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")@ResponseBodypublic 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:  */@Getterpublic 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

下拉列

回显时间

list.html

搜索栏

下拉列

  •  用户状态：所有  
    • //2: 下拉列带搜索功能 主要是select class加了form-control 属性// 然后引入////
  • 设备类别: 
      所有

    • sys_normal_disable为字典类型值 字典类型值一般为表名字段名来命名防止出现重复

    时间框

    根据开始时间结束时间搜索

    如果使用的是MybatisPlus版本 注意后台接收数据需要创建Vo对象 或者直接使用Map对象来进行接收开始时间和结束时间不然会报错的哈

    **Html: **

  • -

    • Vo:

    注意setget方法和普通实体类有区别这么写的原因是防止前端没有传入开始时间和结束时间然后mapper.xml 这样去判断就会报错因为params是null 可以在这个判断外边再加一层if判断params是否为空即可解决但还是推荐 下边这种方式写get set方法
    /** 请求参数 */private Map params;/** get()*/public Map getParams(){if (params == null){params = new HashMap();}return params;}/** set() */public void setParams(Map params){this.params = params;}

    mapper.xml

    AND date_format(xxxxx,'%y%m%d') >= date_format(#{params.beginTime},'%y%m%d')AND date_format(xxxxx,'%y%m%d') <= date_format(#{params.endTime},'%y%m%d')

    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按钮颜色的网址

    blog.koalite.com/bbg/v2/

    twitterbootstrap3buttons.w3masters.nl/

    以下为增加一个紫色按钮的示例

    1. 创建一个.css文件

    2. 将下方的css复制到css文件中

    3. 页面引入该css文件

    4. 页面创建个按钮

     审核

    第二步所需要的代码:

    .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;}

    按钮大小

    格式化时间

    /** 合同创建日期 */@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右上角的 下载 列表刷新搜索 几个按钮该怎么做呢” />

    全局

    找到ry-ui.js将这几个属性设置为false即可

    表格初始化完成后执行的回调

    其实就是BootstarpTable的回调函数 网上有很多介绍 这里直接放怎么使用就不介绍了

    onLoadSuccess: function (data) {}

    用法:

    $(function () {var options = {url: prefix + "/list",createUrl: prefix + "/add",updateUrl: prefix + "/edit/{id}",removeUrl: prefix + "/remove",exportUrl: prefix + "/export",modalName: "车辆信息",fixedColumns: true, // 是否启用冻结列（左侧）fixedNumber: 7, // 列冻结的个数（左侧）rightFixedColumns: false, // 是否启用冻结列（右侧）rightFixedNumber: 1,columns: [{checkbox: true},{field: 'id',title: '车辆编号',visible: false},],onLoadSuccess: function (data) {console.log("页面初始化完成后会调用一次本方法");},};$.table.init(options);});

    表格固定左|右列后,滚动条被覆盖的bug以及解决

    找到bootstrap-table-fixed-columns.js 的224行 heigth属性值减13就好了

    更改后:

    this.$fixedBody.css({width: this.$fixedHeader.width(),height: height-13,top: top + 1}).show();

    其他

    JS循环

    添加个链接这个博主写的很详细

    blog.csdn.net/qq_41899174…

    validator

    1、动态校验提示信息

    来源:

    $.validator.addMethod('PD_password', function (value, element) {var len = value.length;if(len15){$(element).data('error-msg','长度不能大于15位');return false;}return true;}, function(params, element) {return $(element).data('error-msg');});

    2、清空提示信息

    $("#form-consignor-add").validate().resetForm();

    3、单独校验指定输入框

    // 某个表单里的指定行$("#form-xxx").validate().element($("#xxx"))

    4、validate使用tooltip提示错误信息

    $("#form-add").validate({rules: {},// 下边这些是重要的unhighlight: function (element, errorClass, validClass) { //验证通过$(element).tooltip('destroy').removeClass(errorClass);},errorPlacement: function (error, element) {if ($(element).next("div").hasClass("tooltip")) {$(element).attr("data-original-title", $(error).text()).tooltip("show");} else {$(element).attr("title",$(error).text()).tooltip("show");}},});

    放大图片

    有时候为了页面美观显示的图片比较小 只能看到缩略图 但是在某些情况下又想看到放大后的图片 这时候就需要图片放大功能了 layui的就不介绍了 这里介绍两种其他的

    • 放大镜方法图片(鼠标悬浮在缩略图上就可以放大)
    • 弹出层放大图片(点击弹出遮罩层,放大图片)

    放大镜放大:

    使用jQuery Zoom Plugin插件

    github:github.com/elevateweb/…

    文档地址:www.myfreax.com/elevatezoom…

    Html

    JS:

    $(function(){$(".pimg").click(function(){var _this = $(this);//将当前的pimg元素作为_this传入函数imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);});}); function imgShow(outerdiv, innerdiv, bigimg, _this){var src = _this.attr("src");//获取当前点击的pimg元素中的src属性$(bigimg).attr("src", src);//设置#bigimg元素的src属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/$("

    方法源代码:

    源代码就不贴出来了 贴出来也没什么意义 位置:

    common.js-->createMenuItem(dataUrl, menuName)

    关闭标签页

    // 源代码在index.js里$('.tabCloseCurrent').on('click', function () {$('.page-tabs-content').find('.active i').trigger("click");});// common.js增加了一个 closeItem方法function closes() {// 关闭当前页closeItem();// 关闭指定Item页, 123为指定的选项卡IdcloseItem(123);}

    输入框锁定

    这个相信大家都会 还是再写一下吧 这段话是从网站上直接复制过来的

    disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与

    //disabled 属性无法与 一起使用。示例：

    readonly属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。

    // readonly 属性可与  或  配合使用。示例：

    readonly unselectable=”on”该属性跟disable类似，input 元素，不可编辑，不可复制，不可选择，不能接收焦点，设置后文字的颜色也会变成灰色，但是后台可以接收到传值。

    示例：

    弹出某页面

    弹窗

    // 弹出添加用户积分日志页面function open_account_log(userId) {// 1. 调用方法弹出$.modal.open("用户积分修改", '/system/accountDetailsLog/add');// 2. 指定弹窗宽高(后两个参数分别为宽,高)$.modal.open("用户积分修改", '/system/accountDetailsLog/add','80','120');}

    JS校验空值

    function isEmpty(obj){if(typeof obj == "undefined" || obj == null || obj == ""){return true;}else{return false;}}

    JS绑定input事件

    js绑定input事件而不是使用改变值的change事件

    可以实现输入值后就做某些操作 而不是在输入完然后失去焦点再进行触发

    // 输入框自动去空格其中propertychange 是对ie9以下浏览器的支持$(".form-control").bind("input propertychange", function () {$(this).val($(this).val().replace(/\s*/g, ""));});

    自定义AJAX

    这里是使用解绑按钮来进行示例

    解绑操作不需要弹窗 如果直接调用封装好的修改的方法或者操作成功处理操作成功的方法会关闭弹窗刷新父级页面 导致全局刷新 这样写就可以 既可以向后台执行想要执行的操作 也可以弹出消息提醒 又不导致全局刷新 只刷新Table表格

    // 上传文件function sendFile(file, obj) {var data = new FormData();data.append("file", file);$.ajax({type: "POST",url: ctx + "common/upload",data: data,cache: false,contentType: false,processData: false,dataType: 'json',success: function (result) {if (result.code == web_status.SUCCESS) {$(obj).summernote('editor.insertImage', result.url, result.fileName);} else {$.modal.alertError(result.msg);}},error: function (error) {$.modal.alertWarning("图片上传失败。");}});}

    添加Class元素

     .abc{background: red;}test divvar div = document.getElementById('d1');div.classlist.add("abc");//添加div.classlist.remove("abc"); //删除

    操作结果提示

    // 需要引入 ry-ui.js文件 content为提示文字// 错误$.modal.msg(content, modal_status.FAIL);// 成功 $.modal.msg(content, modal_status.SUCCESS);

    回显选中图片

    如果需要放大回显图片可以看

    前端 –> 其他 –> 放大图片

    回显浏览器选中的图片

    如果在选择文件的时候,只想显示图片文件可以这样写

    HTML示例:

    JS:

    function changepic(obj) {var reads = new FileReader();f = document.getElementById('file').files[0];reads.readAsDataURL(f);reads.onload = function (e) {document.getElementById('show').src = this.result;};}

    JS创建集合对象

    // js中创建集合var list=[];// js中创建cs对象var cs = {id=1,name='admin',password01='admin'}//保存对象list.push( cs );

    显示隐藏HTML

    隐藏html代码块 分为两种方式隐藏

    1. style=”visibility: hidden;” (隐藏但是位置会占用)
    2. style=”display: none;” (隐藏并且位置会释放)
     hello
    // visibility: nonedocument.getElementById("id").style.visibility="hidden";//隐藏document.getElementById("id").style.visibility="visible";//显示// display: nonevar userType =2;if (userType == 2) {//获取要显示的div对象 document.getElementById('id').style.display = "block"; //显示} else {document.getElementById('id').style.display = "none";// 隐藏}

    Js版本

    $("#id").hide();// 隐藏$("#id").show();// 显示

    页面加载完成执行

    页面加载完成执行有两种加载时机

    1. 页面所有资源加载完成后执行 (包括图片或者其他资源)
    2. 页面的Dom结构在家完成就开始执行

    //1 资源加载完成才执行 (图片资源等等)window.onload = function() { }; //2 Dom加载完成就执行$(document).ready(function() { }); //2.1 简写$(function() {});

    默认全屏打开添加页

     新增

    Thymeleaf

    标签

    1.all:删除包含标签和所有的孩子。

    2.body:不包含标记删除,但删除其所有的孩子。

    3.tag:包含标记的删除,但不删除它的孩子。

    4.all-but-first:删除所有包含标签的孩子,除了第一个。

    5.none:什么也不做。这个值是有用的动态评估。

    循环

     Onionstest@test.com.cnyes 状态变量：index状态变量：count状态变量：size状态变量：current状态变量：even****状态变量：odd状态变量：first状态变量：last

    判断

    JS取值

    // 注意script属性var message = [[${message}]];console.log(message);// 注意 这种也可以取值 并且取出的值为字符串类型作用嘛// 举例 比如在加载页面的icon的时候 如果直接取值fa fa-user-o 就会报错但是如果在去之前外边加上''那取出的值就是字符串类型 // 设置icon图标var one_icon = $('#one_icon');// 正确赋值one_icon.addClass('[[${oneIcon}]]');// 报错one_icon.addClass([[${oneIcon}]]);

    th:onclick

    传递单个参数

    th:οnclick="searchHot([[${hot.name}]])"

    传递多个Model中参数

    th:οnclick="'javascript:searchHot(\''+${hot.name}+'\',\''+${hot.hotType}+'\')'"

    传递一个Model中参数 一个非Model中参数

    th:οnclick="'javascript:searchHot(\''+${hot.name}+'\','+this+')'"

    格式化时间

    th:value="*{#dates.format(reserveTime,'yyyy-MM-dd HH:mm:ss')}"

    截取字符串

    msg.content为被截取的字符串 15为截取长度

    其他-网络文章

    blog.csdn.net/zoubo0812/a…

    JQuery相关

    返回上页

    function goBack() {window.history.go(-1);}

    后端

    系统

    当前用户

    对当前登录用户的操作已经进行了封装有获取当前登陆用户 获取当前登录用户ID 等这里不贴源码了该工具类位置:com.ruoyi.framework.util.ShiroUtils

    定时器

    关闭定时器

    有时候定时器大家并不一定需要用到 又想把定时器阉割掉 时怎么做呢? 难道要删大量的定时器相关代码吗? 很显然不需要只需要将定时器在启动时初始化的注解注释掉就可以了

    新增定时器

    在系统监控 –> 定时任务 –>新增定时任务

    Controller

    关于权限

    若依框架使用的是Shiro来进行权限控制

    下边介绍一下在Controller新增一个请求地址 然后使这个地址被管理需要做那些操作

    1. 添加注解
    2. 插入sql
    3. 按钮控制

    Service

    Dao

    Mapper

    属性封装

    发现一篇很有意思的关于封装返回的文章 大概看了一下 这里记录一下 有时间再看

    www.cnblogs.com/stefanking/…

    说到Mapper不得不说一下vo封装 之前都是写一个association然后再写相应的属性的result 然后导致mapper文件 全是result

    这里介绍一下封装的时候引入本文件的其他 或其他文件里的

    POJO:

    // 继承原实体类得到原实体类的所有属性@Datapublic class EquipmentVo extends Equipment implements Serializable{//增加两个属性/** 供应商 */private Supplier supplier;/** 所属用户 */private SysUser sysUser;}

    association标签中的属性

    property:vo中的属性名column:该属性id对应的的字段名[非必须]javaType:该属性的Java类型resultMap:引入的本文件的话就是resultMap 的idresultMap的id 引入其他文件的resultMap 时是xml文件所对应的Dao的全路径加resultMap的Id

    例:

    注意:

    Association和Collection使用时机区别:

    Association 在一对一,多对一时使用

    Collection 在一对多,多对多时使用

    在association标签中 javaType属性指向的是实体类的属性

    在collection标签中 javaType属性指向的是集合的类型 ofType指向的是集合的泛型类型

    Mapper:

    集合遍历

    单参数

    Dao:

    Integer selectEquipmentNumber(List statusList);

    XML:

     equipment_status = #{item}

    多参数:

    Dao:

    XML:

    其他

    MP忽略null值

    // 修改时忽略null 和空值@TableField(strategy = FieldStrategy.IGNORED)private BigDecimal discountPrice;

    BigDecimal使用

    直接复制过来的就不在重复写了

    注意除法 divide 是重载的方法 如果直接 a.divide(b) 的话可能会出现该异常:

    [ Non-terminating decimal expansion; no exact representable decimal result.]

    相当于10/3 无法除尽 尽量指定小数长度和规则

    BigDecimalbignum1=newBigDecimal("10");BigDecimalbignum2=newBigDecimal("5");BigDecimalbignum3=null;// 加法bignum3=bignum1.add(bignum2);System.out.println("和是："+bignum3);// 减法bignum3=bignum1.subtract(bignum2);System.out.println("差是："+bignum3);// 乘法bignum3=bignum1.multiply(bignum2);System.out.println("积是："+bignum3);// 除法bignum3=bignum1.divide(bignum2);System.out.println("商是："+bignum3);// 除法2// scale表示保留小数位数 roundingMode表示为小数模式divide(BigDecimal divisor, int scale, RoundingMode roundingMode) ;BigDecimal bignum3 = bignum1.divide(bignum2，10，ROUND_HALF_DOWN);

    小数模式常量

    ROUND_CEILING=如果 BigDecimal 是正的，则做 ROUND_UP 操作；如果为负，则做 ROUND_DOWN 操作。
    ROUND_DOWN=从不在舍弃(即截断)的小数之前增加数字。
    ROUND_FLOOR=如果 BigDecimal 为正，则作 ROUND_UP ；如果为负，则作 ROUND_DOWN 。
    ROUND_HALF_DOWN=若舍弃部分> .5，则作 ROUND_UP；否则，作 ROUND_DOWN 。
    ROUND_HALF_EVEN=如果舍弃部分左边的数字为奇数，则作 ROUND_HALF_UP ；如果它为偶数，则作ROUND_HALF_DOWN 。
    ROUND_HALF_UP=若舍弃部分>=.5，则作 ROUND_UP ；否则，作 ROUND_DOWN 。
    ROUND_UNNECESSARY=该“伪舍入模式”实际是指明所要求的操作必须是精确的,因此不需要舍入操作。
    ROUND_UP=总是在非 0 舍弃小数(即截断)之前增加数字。

    正整数判断

    BigDecimal bigDecimal = new BigDecimal();int num = bigDecimal.signum();// num是-1, 负数// num是0, 零// num是1，正数

    比较大小

    BigDecimal a = new BigDecimal (101);BigDecimal b = new BigDecimal (111); //使用compareTo方法比较//注意：a、b均不能为null，否则会报空指针if(a.compareTo(b) == -1){System.out.println("a小于b");} if(a.compareTo(b) == 0){System.out.println("a等于b");} if(a.compareTo(b) == 1){System.out.println("a大于b");} if(a.compareTo(b) > -1){System.out.println("a大于等于b");} if(a.compareTo(b) < 1){System.out.println("a小于等于b");}

    转String

    // 浮点数的打印 10000000000System.out.println(new BigDecimal("10000000000").toString());// 普通的数字字符串 100.000System.out.println(new BigDecimal("100.000").toString());// 去除末尾多余的0 1E+2System.out.println(new BigDecimal("100.000").stripTrailingZeros().toString());// 避免输出科学计数法 100System.out.println(new BigDecimal("100.000").stripTrailingZeros().toPlainString());

    MYSQL

    获取时间

    mysql查询当前系统时间不保留时分秒，保留时分秒，当前时间加一天，当前时间减少一天等

    转发至CSDN原文链接 :blog.csdn.net/liu_yulong/…

    SELECTCURDATE( ),now( ),CURTIME( ),date_sub( CURDATE( ), INTERVAL 1 DAY ) yestorday,date_sub( CURDATE( ), INTERVAL 1 DAY ) today FROMDUAL;

    SELECTCURDATE( ) date,now( ) dateTime,DATE_FORMAT( now( ), '%Y-%m-%d' ) dateFmt,DATE_FORMAT( now( ), '%Y-%m-%d' ) dateTimeFmt,DATE_FORMAT( now( ), '%Y-%m-%d %H:%i:%s' ) daymins,CURTIME( ) times,date_sub( CURDATE( ), INTERVAL 1 DAY ) Yesterday ,date_sub( CURDATE( ), INTERVAL 0 DAY ) Today,date_sub( CURDATE( ), INTERVAL 1 DAY ) Tomorrow FROMDUAL;