1. 首页
  2. 文章中心
  3. SpringBoot

初次 使用RuoYi 若依框架总结（前端）1. th:if2. th:switch3. th:href4. th:内联JS5. th:text6. input设置为disabled，表单无法提交后台无法接收7. th标签8. 取值9. 校验数字10. 身份证校验11. 复制按钮12. 校验手机号13. 校验金额14. 下拉接口展示15. 页面列表操作栏添加自己的操作16. thymeleaf和RuoYi17. 相关连接

471 阅读 0 评论
我是靠谱客的博主 高贵烤鸡，这篇文章主要介绍初次 使用RuoYi 若依框架总结（前端）1. th:if2. th:switch3. th:href4. th:内联JS5. th:text6. input设置为disabled，表单无法提交后台无法接收7. th标签8. 取值9. 校验数字10. 身份证校验11. 复制按钮12. 校验手机号13. 校验金额14. 下拉接口展示15. 页面列表操作栏添加自己的操作16. thymeleaf和RuoYi17. 相关连接，现在分享给大家，希望可以做个参考。

本人是做java开发的小白，偶然间看到了一篇关于若依框架的文章，顿时吸引过来，经过自己的摸索，从无知到认知，到现在能简单的使用，在此把自己用到的前端页面用到的东西做了一个小小总结，给大家做个分享（本人小白，有错误地方希望提出，本人能及时改正，相互成长！！叩谢）

1. th:if

复制代码
1
2
3
<span th:if="${cusSecond.marriage} eq 1">已婚</span>
<span th:if="${cusSecond.marriage} eq 2">未婚</span>
复制代码
1
2
3
4
5
6
<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

复制代码
1
2
3
4
5
6
7
8
<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标签还有点不适应！
复制代码
1
2
<a th:href="@{/standard/{type}(type=${type})}">view</a>

4. th:内联JS

复制代码
1
2
<script th:inline="javascript">

引入外部js css

复制代码
1
2
3
<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

复制代码
1
2
<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，表单无法提交后台无法接收

复制代码
1
2
<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. 取值

复制代码
1
2
<span th:text="${name}"></span>

9. 校验数字

页面input标签：
复制代码
1
2
<input name="age" id="age" minlength="11" maxlength="11" class="form-control" type="text" required>

JS：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

	function checkSize(obj) {
		//如果输入非数字，则替换为''
		obj.value = obj.value.replace(/[^d.]/g, '');
		//必须保证第一个为数字而不是.
		obj.value = obj.value.replace(/^./g, '');
		//前两位不能是0加数字
		obj.value = obj.value.replace(/^0d[0-9]*/g, '');
		//保证只有出现一个.而没有多个.
		obj.value = obj.value.replace(/.{2,}/g, '');
		//保证.只出现一次，而不能出现两次以上
		obj.value = obj.value.replace('.', '$#$').replace(/./g, '')
				.replace('$#$', '');
		//只能输入两位小数
		//obj.value = obj.value.replace(/^(-)*(d+).(dd).*$/, '$1$2.$3');
		}
	
		$('#age').on('input', function() {
	
			checkSize(this);
	
		})

10. 身份证校验

页面input标签：
复制代码
1
2
<input name="identityCard" id="identityCard"  class="form-control" type="text">

JS：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
$('#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标签：
复制代码
1
2
3
4
5
6
7
8
<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：

复制代码
1
2
3
4
5
6
7
8
function copyTextAreaCt()
	{
		var oContent=document.getElementById("url");
		oContent.select(); // 选择对象
		document.execCommand("Copy"); // 执行浏览器复制命令
		alert("复制完毕，可粘贴");
	}

12. 校验手机号

页面input标签：
复制代码
1
2
<input name="phone" id="phone" minlength="11" maxlength="11" class="form-control" type="text" required>

JS

复制代码
1
2
3
4
5
6
7
8
9
10
11
$('#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标签：
复制代码
1
2
3
4
5
6
7
<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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function checknum(obj) {
//如果输入非数字，则替换为''
	obj.value = obj.value.replace(/[^d.]/g, '');
	//必须保证第一个为数字而不是.
	obj.value = obj.value.replace(/^./g, '');
	//前两位不能是0加数字
	obj.value = obj.value.replace(/^0d[0-9]*/g, '');
	//保证只有出现一个.而没有多个.
	obj.value = obj.value.replace(/.{2,}/g, '.');
	//保证.只出现一次，而不能出现两次以上
	obj.value = obj.value.replace('.', '$#$').replace(/./g, '')
			.replace('$#$', '.');
	//只能输入两位小数
	obj.value = obj.value.replace(/^(-)*(d+).(dd).*$/, '$1$2.$3');
}

$('#sourceNum').on('input', function() {

	checknum(this);

})

14. 下拉接口展示

add页面：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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页面：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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. 页面列表操作栏添加自己的操作

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
{
  	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：

复制代码
1
2
3
4
5
function upload(id) {
	var url = prefix + '/uploadUI/';
    $.modal.open("文件上传", url);
}

在这里可以根据自己需求调用相应方法：如跳转一个页面

复制代码
1
2
$.modal.open("文件上传", url);

根据需求调用方法，

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//提供成功、警告和错误等反馈信息
$.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下载方法：
RuoYigit下载方法
git clone https://gitee.com/y_project/RuoYi.git

w3c学习地址
https://www.w3cschool.cn/ruoyi/

w3c学习地址

本人java小白，对thymeleaf刚刚接触，对前端也是一知半解，有任何错误地方希望指正，本人能及时改正，相互成长！！随着对若依框架的了解，接下来会对后端东西做个笔记，也需要大家能提出宝贵的意见。在此表示感谢！！！

最后

以上就是高贵烤鸡最近收集整理的关于初次 使用RuoYi 若依框架总结（前端）1. th:if2. th:switch3. th:href4. th:内联JS5. th:text6. input设置为disabled，表单无法提交后台无法接收7. th标签8. 取值9. 校验数字10. 身份证校验11. 复制按钮12. 校验手机号13. 校验金额14. 下拉接口展示15. 页面列表操作栏添加自己的操作16. thymeleaf和RuoYi17. 相关连接的全部内容，更多相关初次内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(311)

相关文章

乐优商城部署配置过程
乐优商城部署配置过程
GITHUB开源SpringBoot2.0权限管理系统
GITHUB开源SpringBoot2.0权限管理系统
一个基于ruoyi的单规格商城
一个基于ruoyi的单规格商城
若依框架全家桶
若依框架全家桶
初次 使用RuoYi 若依框架总结（前端）1. th:if2. th:switch3. th:href4. th:内联JS5. th:text6. input设置为disabled，表单无法提交后台无法接收7. th标签8. 取值9. 校验数字10. 身份证校验11. 复制按钮12. 校验手机号13. 校验金额14. 下拉接口展示15. 页面列表操作栏添加自己的操作16. thymeleaf和RuoYi17. 相关连接
初次 使用RuoYi 若依框架总结（前端）1. th:if2. th:switch3. th:href4. th:内联JS5. th:text6. input设置为disabled，表单无法提交后台无法接收7. th标签8. 取值9. 校验数字10. 身份证校验11. 复制按钮12. 校验手机号13. 校验金额14. 下拉接口展示15. 页面列表操作栏添加自己的操作16. thymeleaf和RuoYi17. 相关连接
你和大佬之间就差了一个框架--[RuoYi若依框架教程]快速开发框架介绍-懂你的RUOYI一、快速开发框架是什么？二、若依有什么？三、总结
你和大佬之间就差了一个框架--[RuoYi若依框架教程]快速开发框架介绍-懂你的RUOYI一、快速开发框架是什么？二、若依有什么？三、总结
基于JAVA会员商城管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA会员商城管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA会员商城管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA会员商城管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
使用若依ruoyi-cloud开发谷粒商城新手小白的谷粒商城
使用若依ruoyi-cloud开发谷粒商城新手小白的谷粒商城

评论列表共有 0 条评论

立即
投稿
返回
顶部