首页
作者
青衫
前言:
:boom:接触若依也很长时间了从1.0到现在的4.0 期间一直想写个手册 但一直没有很好地切入点 最近在开发新系统 正好根据开发中遇到或者使用到的内容作为切入点来进行写文档 可能会有些混乱 一开始先写上准备后续再排版精修 推荐Git拉取,方便文档实时更新
CSDN过来的同学注意 文档已经停止在CSDN的维护
目录结构:
大致分为前端、后端，前端根据使用的页面add、edit、list来进行详细划分，后端根据三层加上其他特殊内容点划分
@TOC
前端
add.html
下拉列
1 | html复制代码// 1 其中t_vip_user_details_vip_type 为字典表的字典类型 可前往-系统管理-->字段管理 --> 添加新的字典 |
时间框
1 | html复制代码<div class="form-group"> |
大文本框
1 | html复制代码<textarea name="content" style="width: 762px ;margin: 0px; height: 295px;"></textarea> |
Ajax校验
1 | javascript复制代码 $("#form-motorman-add").validate({ |
1 | java复制代码 /** |
1 | java复制代码package com.ruoyi.common.constant; |
自定义校验
1 | javascript复制代码jQuery.validator.addMethod("isAllNumber", function (value, element) { |
回显选中图片
在下方已经写过了
路径:前端 –> 其他 –> 回显选中图片
如果需要放大回显图片可以看
前端 –> 其他 –> 放大图片
JS对添加下拉列元素
2
3
>
>
edit.html
下拉列
1 | html复制代码 <div class="form-group"> |
回显时间
1 | html复制代码 <div class="form-group"> |
list.html
搜索栏
下拉列
1 | html复制代码<li> |
sys_normal_disable 为字典类型值 字典类型值一般为表名字段名来命名防止出现重复
时间框
根据开始时间结束时间搜索
如果使用的是MybatisPlus版本 注意后台接收数据需要创建Vo对象 或者直接使用Map对象来进行接收开始时间 和 结束时间 不然会报错的哈
**Html: **
1 | html复制代码<li class="select-time"> |
Vo:
注意set get方法和普通实体类有区别
这么写的原因是防止前端没有传入开始时间和结束时间
然后mapper.xml 这样去判断就会报错 因为params是null 可以在这个判断外边再加一层if判断params是否为空即可解决 但还是推荐 下边这种方式写get set方法
1 | java复制代码 /** 请求参数 */ |
mapper.xml:
1 | xml复制代码<if test="params.beginTime != null and params.beginTime !=''"><!-- 开始时间检索 --> |
Table表格
刷新表格
1 | javascript复制代码// 这是封装好的方法 不需要在去调用原生的JS了 |
按钮颜色
后边加上 btn-xs 样式会使按钮缩小
1 | html复制代码 深蓝色 btn btn-primary |
自定义按钮颜色
有时候bootstrap提供的按钮颜色并不能完全满足系统的需要 只有仅限的几个 所以在这时候需要增加自定义的按钮颜色
下边是两个在线生成bootstrap按钮颜色的网址
twitterbootstrap3buttons.w3masters.nl/
以下为增加一个紫色按钮的示例
- 创建一个.css文件
- 将下方的css复制到css文件中
- 页面引入该css文件
- 页面创建个按钮
1. 1
2
3
4
5
html复制代码<a class="btn btn-sample single disabled">
<i class="fa fa-sun-o"></i> 审核
</a>
```**第二步所需要的代码:**
css复制代码.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;
}
1 |
|
html复制代码
1 |
|
java复制代码 /** 合同创建日期 */
@JsonFormat(pattern = “yyyy-MM-dd”, timezone=”GMT+8”)
private Date contractCreateTime;
1 |
|
html复制代码th:value=”*{dates.format(reserveTime,’yyyy-MM-dd HH:mm:ss’)}”
1 |
|
javascript复制代码sortName: ‘createTime’,
sortOrder: “desc”,
1 |
|
javascript复制代码 var userType = [[${@dict.getType(‘sys_user_user_type’)}]];
// 在table相关属性字段的操作
{
field: ‘userType’,
title: ‘类型’,
align: “left”,
formatter: function (value, item, index) {
return $.table.selectDictLabel(userType, value);
}
},
1 |
|
javascript复制代码onLoadSuccess: function (data) {
}
1 |
|
javascript复制代码
1 |
|
javascript复制代码this.$fixedBody.css({
width: this.$fixedHeader.width(),
height: height-13,
top: top + 1
}).show();
1 |
|
javascript复制代码$.validator.addMethod(‘PD_password’, function (value, element) {
var len = value.length;
if(len<6){
$(element).data(‘error-msg’,’长度不能少于6位’);
return false;
}
if(len>15){
$(element).data(‘error-msg’,’长度不能大于15位’);
return false;
}
return true;
}, function(params, element) {
return $(element).data(‘error-msg’);
});
1 | 2. ##### **清空提示信息** |
javascript复制代码$(“#form-consignor-add”).validate().resetForm();
1 | 3. ##### 单独校验指定输入框 |
javascript复制代码// 某个表单里的指定行
$(“#form-xxx”).validate().element($(“#xxx”))
1 | 5. ##### validate使用tooltip提示错误信息 |
javascript复制代码
$(“#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”);
}
},
});1 | 6. |
html复制代码
2
3
4
5
6
7
8
9
10
11
> **JQuery**
>
>
> 有六种显示效果 根据需要选择 推荐第一种 如果需要可以访问文档看它的其他属性
>
>
>
>
javascript复制代码
$(‘#zoom_01’).elevateZoom({});//默认效果$(‘#zoom_01’).elevateZoom({ //内置镜头
zoomType: “inner”,//类型：内置镜头
cursor: “crosshair”, //光标：十字
zoomWindowFadeIn: 500,//镜头窗口淡入速度
zoomWindowFadeOut: 750 //镜头窗口淡出速度
});$(“#zoom_01”).elevateZoom({ //镜头聚焦
zoomType: “lens”,//类型：透镜效果
lensShape: “round”, //透镜形状：圆形
lensSize: 200 //透镜尺寸：长和宽：200px
});$(“#zoom_01”).elevateZoom({ //淡入/淡出设置
zoomWindowFadeIn: 500,//镜头窗口淡入速度
zoomWindowFadeOut: 500,//镜头窗口淡出速度
lensFadeIn: 500,//透镜淡入速度
lensFadeOut: 500//透镜淡出速度
});$(“#zoom_01”).elevateZoom({ //动画
easing: true //是否开启动画效果
});$(“#zoom_01”).elevateZoom({ //鼠标滚动
scrollZoom: true //是否开启鼠标滚动
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
**弹出层放大:**
> 这个就是弹出一个遮罩层 显示图片 没什么好说的直接是上代码吧
>
>
> 原文链接: [blog.csdn.net/m0\_37865510…](https://blog.csdn.net/m0_37865510/article/details/84636488)
> **缩略图位置:**
>
>
>
>
html复制代码注意class为:pimg 下边会用到
2
3
4
5
6
7
8
9
10
11
> 在html最下边 添加下边这一段代码(**遮罩层**)
>
>
> 注意:**z-index:2;** 为遮罩层显示的高度如果想显示在最上层直接将2改为9999就行了
>
>
>
>
html复制代码
2
3
4
5
6
7
8
> JS:
>
>
>
>
javascript复制代码
2
3
4
5
6
7
8
9
10
11
12
13
#### 新建标签页
> 若依已经对创建新的标签页已经进行封装 JS方法为: createMenuItem()
1. $.modal.openTab()
现在 在ry-ui.js里已经又对新建菜单页(createMenuItem)进行了封装
javascript复制代码// 方式1 打开新的选项卡
function dept() {
var url = ctx + “system/dept”;
$.modal.openTab(“部门管理”, url);
}
// 方式2 选卡页同一页签打开
function dept() {
var url = ctx + “system/dept”;
$.modal.parentTab(“部门管理”, url);
}
// 方式3 html创建
部门管理
1 | 2. createMenuItem |
javascript复制代码// 要打开的地址
var url=prefix+”/details?userId=”+userId;
// 调用createMenuItem()方法 1参:要打开的地址 ,2参:标签页名称
createMenuItem(url, “用户详情”);
1 |
|
javascript复制代码
1 |
|
javascript复制代码common.js –> createMenuItem(dataUrl, menuName)
1 |
|
javascript复制代码// 源代码在index.js里
$(‘.tabCloseCurrent’).on(‘click’, function () {
$(‘.page-tabs-content’).find(‘.active i’).trigger(“click”);
});
// common.js增加了一个 closeItem方法
function closes() {
// 关闭当前页
closeItem();
// 关闭指定Item页, 123为指定的选项卡Id
closeItem(123);
}
1 |
|
javascript复制代码//disabled 属性无法与 一起使用。
示例：
1 |
|
javascript复制代码// readonly 属性可与 或 配合使用。
示例：
1 |
|
javascript复制代码示例：
1 |
|
javascript复制代码// 弹出添加用户积分日志页面
function open_account_log(userId) {
// 1. 调用方法弹出
$.modal.open(“用户积分修改”, ‘/system/accountDetailsLog/add’);
// 2. 指定弹窗宽高(后两个参数分别为宽,高)
$.modal.open(“用户积分修改”, ‘/system/accountDetailsLog/add’,’80’,’120’);
}
1 |
|
javascript复制代码function isEmpty(obj){
if(typeof obj == “undefined” || obj == null || obj == “”){
return true;
}else{
return false;
}
}
1 |
|
javascript复制代码 // 输入框自动去空格 其中propertychange 是对ie9以下浏览器的支持
$(“.form-control”).bind(“input propertychange”, function () {
$(this).val($(this).val().replace(/\s*/g, “”));
}
);
1 |
|
javascript复制代码 // 上传文件
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(“图片上传失败。”);
}
});
}
1 |
|
javascript复制代码 .abc{
background: red;
}
test div
var div = document.getElementById(‘d1’);
div.classlist.add(“abc”); //添加
div.classlist.remove(“abc”); //删除
1 |
|
javascript复制代码// 需要引入 ry-ui.js文件 content为提示文字
// 错误
$.modal.msg(content, modal_status.FAIL);
// 成功
$.modal.msg(content, modal_status.SUCCESS);
1 |
|
html复制代码
2
3
**HTML示例:**
html复制代码
1 |
|
javascript复制代码 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;
};
}
1 |
|
javascript复制代码// js中创建集合
var list=[];
// js中创建cs对象
var cs = {
id=1,
name=’admin’,
password=’admin’
}
//保存对象
list.push( cs );
1 |
|
html复制代码 hello
1 |
javascript复制代码// visibility: none
document.getElementById(“id”).style.visibility=”hidden”;//隐藏
document.getElementById(“id”).style.visibility=”visible”;//显示
// display: none
var userType =2;
if (userType == 2) {
//获取要显示的div对象
document.getElementById(‘id’).style.display = “block”; //显示
} else {
document.getElementById(‘id’).style.display = “none”; // 隐藏
}
1 |
|
js复制代码 $(“#id”).hide();// 隐藏
$(“#id”).show();// 显示
1 |
|
javascript复制代码//1 资源加载完成才执行 (图片资源等等)
window.onload = function() {
};
//2 Dom加载完成就执行
$(document).ready(function() {
});
//2.1 简写
$(function() {
});
1 |
|
html复制代码
新增
1 |
|
html复制代码
1 |
|
html复制代码<th:block th:if=”…”>
1 |
|
javascript复制代码// 注意script属性
1 |
|
html复制代码th:οnclick=”searchHot([[${hot.name}]])”
1 |
|
html复制代码th:οnclick=”‘javascript:searchHot('‘+${hot.name}+’','‘+${hot.hotType}+’')’”
1 |
|
html复制代码th:οnclick=”‘javascript:searchHot('‘+${hot.name}+’',’+this+’)’”
1 |
|
javascript复制代码th:value=”*{dates.format(reserveTime,’yyyy-MM-dd HH:mm:ss’)}”
1 |
|
html复制代码msg.content为被截取的字符串 15为截取长度
1 |
|
javascript复制代码function goBack() {
window.history.go(-1);
}
1 |
|
java复制代码// 继承原实体类得到原实体类的所有属性
@Data
public class EquipmentVo extends Equipment implements Serializable
{
//增加两个属性
/** 供应商 */
private Supplier supplier;
/** 所属用户 */
private SysUser sysUser;
}1 |
|
properties复制代码property: vo中的属性名
column: 该属性id对应的的字段名[非必须]
javaType: 该属性的Java类型
resultMap: 引入的本文件的话就是resultMap 的id
resultMap的id 引入其他文件的resultMap 时是xml文件所对应的Dao的全路径加 resultMap的Id
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
> 例:
>
>
> **注意:**
>
>
> **Association和Collection使用时机区别:**
>
>
> **Association 在一对一,多对一时使用**
>
>
> **Collection 在一对多,多对多时使用**
>
>
> 在association标签中 javaType属性指向的是**实体类的属性**
>
>
> 在collection标签中 javaType属性指向的是**集合的类型** ofType指向的是集合的泛型类型
**Mapper:**
xml复制代码
<!-- 供应商 引入其他文件的resultMap 路径dao层路径加resultMap 的id-->
<association property="supplier" column="s.id" javaType="com.ruoyi.iot.domain.Supplier" resultMap="com.ruoyi.iot.mapper.SupplierMapper.SupplierResult">
<result property="createTime" column="screate_time"/>
</association>
<!--用户 引入当前文件resultMap-->
<association property="sysUser" column="user_id" javaType="com.ruoyi.system.domain.SysUser" resultMap="SysUserResult">
</association>
</resultMap><resultMap type="com.ruoyi.system.domain.SysUser" id="SysUserResult">
<id property="userId" column="user_id"/>
<result property="deptId" column="dept_id"/>
<result property="loginName" column="login_name"/>
</resultMap>1 |
|
java复制代码Integer selectEquipmentNumber(List
1 |
|
xml复制代码
equipment_status = #{item}
1 |
|
xml复制代码
1 |
|
java复制代码 // 修改时忽略null 和空值
@TableField(strategy = FieldStrategy.IGNORED)
private BigDecimal discountPrice;
1 |
|
java复制代码BigDecimal bignum1 = new BigDecimal(“10”);
BigDecimal bignum2 = new BigDecimal(“5”);
BigDecimal bignum3 = 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);
1 |
|
properties复制代码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 舍弃小数(即截断)之前增加数字。
1 |
|
java复制代码BigDecimal bigDecimal = new BigDecimal();
int num = bigDecimal.signum();
// num是-1, 负数
// num是0, 零
// num是1，正数
1 |
|
java复制代码
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”);
}
1 |
|
java复制代码 // 浮点数的打印 10000000000
System.out.println(new BigDecimal(“10000000000”).toString());
// 普通的数字字符串 100.000
System.out.println(new BigDecimal("100.000").toString());
// 去除末尾多余的0 1E+2
System.out.println(new BigDecimal("100.000").stripTrailingZeros().toString());
// 避免输出科学计数法 100
System.out.println(new BigDecimal("100.000").stripTrailingZeros().toPlainString());1 |
|
mysql复制代码SELECT
CURDATE( ),
now( ),
CURTIME( ),
date_sub( CURDATE( ), INTERVAL 1 DAY ) yestorday,
date_sub( CURDATE( ), INTERVAL 1 DAY ) today
FROM
DUAL;
1 |
|
mysql复制代码
SELECT
CURDATE( ) 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
FROM
DUAL;
**本文转载自:** [掘金](https://juejin.cn/post/6971684849094492168)
*[开发者博客 – 和开发相关的 这里全都有](https://dev.newban.cn/)*