初次 使用RuoYi 若依框架总结（前端）
程序员文章站
2022-07-10 15:51:57
...
本人是做java开发的小白，偶然间看到了一篇关于若依框架的文章，顿时吸引过来，经过自己的摸索，从无知到认知，到现在能简单的使用，在此把自己用到的前端页面用到的东西做了一个小小总结，给大家做个分享（本人小白，有错误地方希望提出，本人能及时改正，相互成长！！叩谢）
1. th:if
<span th:if="${cusSecond.marriage} eq 1">已婚</span>
<span th:if="${cusSecond.marriage} eq 2">未婚</span>
<div th:if="${cusSecond.cusIdcard} ne null">
<span th:text="${cusSecond.cusIdcard.name}"></span>
</div>
<div th:if="${cusSecond.cusIdcard} eq null">--</div>
2. th:switch
<div th:switch="${cusSecond.marriage}">
<span th:case="'1'">已婚</span>
<span th:case="'2'">未婚</span>
<span th:case="'3'">离异</span>
<span th:case="'4'">丧偶</span>
<span th:case="'5'">未知</span>
</div>
3. th:href
第一次用thymeleaf模版引擎的a标签还有点不适应！<a th:href="@{/standard/{type}(type=${type})}">view</a>
4. th:内联JS
<script th:inline="javascript">
引入外部js css
<script type="text/javascript" th:src="@{/layer/layer.js}">
<link type="text/css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" /></script>
5. th:text
<span th:text="${#dates.format(cusProposer.workInfo.firstTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
{#dates.format(new java.util.Date().getTime(), ‘yyyy-MM-dd hh:mm:ss’)}
format里第一个参数是自己需求的时间，可以是当前时间戳new java.util.Date().getTime()，也可以说后台传过来的时间，第二个参数是页面想要展示的时间格式类型。
6. input设置为disabled，表单无法提交后台无法接收
<input name="num" id="number" size=8 value="disabled提交时得不到该值 " disabled="disabled" >
解决办法：放在form表单中提交后得不到该值。将disabled=”disabled” 改为 readonly = “readonly” 即可
按照W3C的规范：
设置为disabled的input将会有下面的限制：
- 不能接收焦点
- 使用tab键时将被跳过
- 可能不是successful的
设置为readonly的input将会有下面的限制：
- 可以接收焦点但不能被修改
- 可以使用tab键进行导航
- 可能是successful的
- 只有successful的表单元素才是有效数据，也即是可以进行提交。disabled和readonly的文本输入框只能通过脚本进行修改value属性。
以上来自化风的CSDN如有侵权请联系本人，做修改。
7. th标签
这里引入一个ht标签的链接，很多标签，讲解的很详细，
很详细的th标签
很多细节，本人在此学到了很多。
8. 取值
<span th:text="${name}"></span>
9. 校验数字
页面input标签：<input name="age" id="age" minlength="11" maxlength="11" class="form-control" type="text" required>
JS：
function checkSize(obj) {
//如果输入非数字，则替换为''
obj.value = obj.value.replace(/[^\d\.]/g, '');
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g, '');
//前两位不能是0加数字
obj.value = obj.value.replace(/^0\d[0-9]*/g, '');
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g, '');
//保证.只出现一次，而不能出现两次以上
obj.value = obj.value.replace('.', '$#$').replace(/\./g, '')
.replace('$#$', '');
//只能输入两位小数
//obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
}
$('#age').on('input', function() {
checkSize(this);
})
10. 身份证校验
页面input标签：<input name="identityCard" id="identityCard" class="form-control" type="text">
JS：
$('#identityCard').on('blur', function() {
var value =document.getElementById("identityCard").value;
validateIdCard(value);
})
function validateIdCard(idCard){
var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
51:"四川",52:"贵州",53:"云南",54:"*",61:"陕西",62:"甘肃",
63:"青海",64:"宁夏",65:"*",71:"*",81:"香港",82:"澳门",91:"国外"
};
//是否为空
if(idCard === ''){
return false;
}
//校验长度，类型
if(isCardNo(idCard) === false){
alert("身份证位数不合法");
return false;
}
//检查省份
if(checkProvince(idCard,vcity) === false){
alert("身份证省份不存在");
return false;
}
//校验生日
if(checkBirthday(idCard) === false){
alert("身份证生日不正确");
return false;
}
//检验位的检测
if(checkParity(idCard) === false){
//alert("身份证位数不合法");
return false;
}
return true;
}
function isCardNo(card){
//身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
var reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
if(reg.test(card) === false){
return false;
}
return true;
}
function checkProvince(card,vcity){
var province = card.substr(0,2);
if(vcity[province] == undefined){
return false;
}
return true;
};
function checkBirthday(card){
var len = card.length;
//身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
if(len == '15'){
var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
var arr_data = card.match(re_fifteen);
var year = arr_data[2];
var month = arr_data[3];
var day = arr_data[4];
var birthday = new Date('19'+year+'/'+month+'/'+day);
return verifyBirthday('19'+year,month,day,birthday);
}
//身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
if(len == '18'){
var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X|x)$/;
var arr_data = card.match(re_eighteen);
var year = arr_data[2];
var month = arr_data[3];
var day = arr_data[4];
var birthday = new Date(year+'/'+month+'/'+day);
return verifyBirthday(year,month,day,birthday);
}
return false;
};
function verifyBirthday(year,month,day,birthday)
{
var now = new Date();
var now_year = now.getFullYear();
//年月日是否合理
if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day)
{
//判断年份的范围（0岁到100岁之间)
var time = now_year - year;
if(time >= 0 && time <= 100)
{
return true;
}
return false;
}
return false;
}
function checkParity(card){
//15位转18位
card = changeFivteenToEighteen(card);
var len = card.length;
if(len == '18'){
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var cardTemp = 0, i, valnum;
for(i = 0; i < 17; i ++) {
cardTemp += card.substr(i, 1) * arrInt[i];
}
valnum = arrCh[cardTemp % 11];
if (valnum == card.substr(17, 1).toLocaleUpperCase())
{
return true;
}
return false;
}
return false;
}
function changeFivteenToEighteen(card){
if(card.length == '15')
{
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var cardTemp = 0, i;
card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
for(i = 0; i < 17; i ++)
{
cardTemp += card.substr(i, 1) * arrInt[i];
}
card += arrCh[cardTemp % 11];
return card;
}
return card;
}
11. 复制按钮
页面input标签：<div class="form-group">
<label class="col-sm-3 control-label">上传后的url：</label>
<div class="col-sm-8">
<input name="url" id="url" class="form-control" th:value="${url}" type="text">
<a onClick="copyTextAreaCt()" >复制url<i class="layui-icon-file-b"></i></a>
</div>
</div>
JS：
function copyTextAreaCt()
{
var oContent=document.getElementById("url");
oContent.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制完毕，可粘贴");
}
12. 校验手机号
页面input标签：<input name="phone" id="phone" minlength="11" maxlength="11" class="form-control" type="text" required>
JS
$('#sourcePhone').on('blur', function() {
checkPhone(this);
})
function checkPhone(obj) {
var theinput = document.getElementById("sourcePhone").value;
var p1 = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|18[0-9]\d{8}|14[57]\d{8})$/;
if (p1.test(theinput) == false) {
alert('请填写正确电话号码!!');
}
}
13. 校验金额
页面input标签：<div class="form-group">
<label class="col-sm-3 control-label">金钱：</label>
<div class="col-sm-8">
<input name="sourceMoney" id="sourceMoney" class="form-control" type="text">
</div>
</div>
JS
function checknum(obj) {
//如果输入非数字，则替换为''
obj.value = obj.value.replace(/[^\d\.]/g, '');
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g, '');
//前两位不能是0加数字
obj.value = obj.value.replace(/^0\d[0-9]*/g, '');
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g, '.');
//保证.只出现一次，而不能出现两次以上
obj.value = obj.value.replace('.', '$#$').replace(/\./g, '')
.replace('$#$', '.');
//只能输入两位小数
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
}
$('#sourceNum').on('input', function() {
checknum(this);
})
14. 下拉接口展示
add页面：<div class="form-group">
<label class="col-sm-3 control-label">资金方：</label>
<div class="col-sm-8">
<select name="theFundingParty" lay-search="" class="form-control input1" required>
<option value="">请选择</option>回显选中<!--循环遍历集合 -->
<option
th:each="a: ${funds}"
th:value="${a.name}"
th:text="${a.name}"> 下拉显示后台动态数据
</option>
</select>
</div>
</div>
edit页面：
<div class="form-group">
<label class="col-sm-3 control-label">资金方：</label>
<div class="col-sm-8">
<select name="theFundingParty" lay-search="" class="form-control input1">
<option value="">请选择</option>回显选中<!--循环遍历集合 -->
<option th:selected="${second.name eq a.name}"
th:each="a: ${funds}"
th:value="${a.name}"
th:text="${a.name}"> 下拉显示后台动态数据
</option>
</select>
</div>
</div>
15. 页面列表操作栏添加自己的操作
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="$.operate.edit(\'' + row.idcardId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.idcardId + '\')"><i class="fa fa-remove"></i>删除</a>');
actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" οnclick="upload(\'' + row.idcardId + '\')"><i class="fa fa-remove"></i>上传</a>');
return actions.join('');
}
}
JS：
function upload(id) {
var url = prefix + '/uploadUI/';
$.modal.open("文件上传", url);
}
在这里可以根据自己需求调用相应方法：如跳转一个页面
$.modal.open("文件上传", url);
根据需求调用方法，
//提供成功、警告和错误等反馈信息
$.modal.msg("默认反馈");
$.modal.msgError("错误反馈");
$.modal.msgSuccess("成功反馈");
$.modal.msgWarning("警告反馈");
//提供成功、警告和错误等提示信息
$.modal.alert("默认提示");
$.modal.alertError("错误提示");
$.modal.alertSuccess("成功提示");
$.modal.alertWarning("警告提示");
$.modal.confirm("确认信息", function() {});
//提供弹出层信息
// title 标题 url 请求链接 width 宽度 height 高度 options 选项
$.modal.open(title, url, width, height);
$.modal.openTab(title, url);
$.modal.parentTab(title, url);
$.modal.openOptions(title, url);
$.modal.openFull(title, url, width, height);
$.modal.close(dataId);
$.modal.closeAll();
$.modal.closeTab();
$.modal.reload();
//提供遮罩层信息
$.modal.loading("正在导出数据，请稍后...");
$.modal.closeLoading();
$.modal.open();
$.modal.openOptions();
$.modal.openFull();
$.modal.openTab();
$.modal.parentTab();
$.modal.closeTab();
16. thymeleaf和RuoYi
前端的很多细节都还没接触到，用到的时候再补充，也希望多提意见。
17. 相关连接
官网 http://ruoyi.vip/文档
http://doc.ruoyi.vip/
在线演示
http://demo.ruoyi.vip/login
源码-码云下载地址
https://gitee.com/y_project/RuoYi
git下载方法：
git clone https://gitee.com/y_project/RuoYi.git
w3c学习地址
https://www.w3cschool.cn/ruoyi/
本人java小白，对thymeleaf刚刚接触，对前端也是一知半解，有任何错误地方希望指正，本人能及时改正，相互成长！！随着对若依框架的了解，接下来会对后端东西做个笔记，也需要大家能提出宝贵的意见。在此表示感谢！！！
上一篇： 基于若依框架，班级下拉框查询