初次 使用RuoYi 若依框架总结(前端)

SpringBoot 专栏收录该内容
1 篇文章 0 订阅

本人是做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下载方法:
RuoYigit下载方法
git clone https://gitee.com/y_project/RuoYi.git

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

w3c学习地址

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

<h4 style=&quot;font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;&quot;> <span style=&quot;font-size:14px;&quot;>期末</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>考点</span><span style=&quot;font-size:14px;&quot;>都对应</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>详解视频</span><span style=&quot;font-size:14px;&quot;>,</span><span style=&quot;font-size:14px;&quot;><span style=&quot;color:#e03e2d;&quot;>基础阶段</span></span><span style=&quot;font-size:14px;&quot;>内容全面,语言通俗易懂(翻译书中的语言为</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>人话)</span><span style=&quot;font-size:14px;&quot;>,</span> </h4> <h4 style=&quot;font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;&quot;> <span style=&quot;font-size:14px;&quot;>老师精心研究</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>百份</span><span style=&quot;font-size:14px;&quot;>考卷,总结每一个考点,同时结合你肯定可以听懂的骚话,</span> </h4> <h4 style=&quot;font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;&quot;> <span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>扫清你的数据库系统盲区</span> </h4> <h4 style=&quot;font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;&quot;> <span style=&quot;font-size:14px;&quot;><span style=&quot;color:#e03e2d;&quot;>真题阶段</span></span><span style=&quot;font-size:14px;&quot;>为你提供</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>解题思路</span><span style=&quot;font-size:14px;&quot;>,培养你的</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>解题思维</span><span style=&quot;font-size:14px;&quot;>,同时</span><span style=&quot;font-size:14px;background-color:#fbeeb8;&quot;>点明考点</span><span style=&quot;font-size:14px;&quot;>,结合文档进行重点解读,加深你的印象.</span> </h4> <h4 style=&quot;font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;&quot;> <span style=&quot;font-size:14px;color:#3598db;&quot;>只为你的高分,我们交个朋友!让每位学生都可以学的起!!</span> </h4> <p> <span style=&quot;font-size:14px;color:#3598db;&quot;><img src=&quot;https://img-bss.csdnimg.cn/202103040423318088.png&quot; alt=&quot;&quot; width=&quot;788&quot; height=&quot;450&quot; /></span> </p>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值