kyrieboot管理系统开发记录------前端相关

欢迎访问个人博客 德鲁大叔撸代码
一直想要自己动手写一个管理系统,在这之前只是搭建了简单的项目框架和一部分简单功能,但是由于工作等种种原因一直没能完善功能。趁着今年五一假期,补上一些目前想到的功能。后续会补上一些快捷开发的功能,比如代码生成器等。但由于五一后要进入封闭开发,所以估计功能会推迟上线。现在记录一下在写当前系统的时候遇到的一些问题。

1、如何获取select下拉框的值
在这里插入图片描述
通过状态查询的时候,需要选择状态的下拉框,html如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <li>
上级省/直辖市:<input type="text" name="provinceName" id="provinceName"/>
</li>
<li>
城市名称:<input type="text" name="cityName" id="cityName"/>
</li>
<li>
状态:<select name="dataState" id="dataState">
<option value="">所有</option>
<option value="0">正常</option>
<option value="1">关闭</option>
</select>
<li>
<a class="btn btn-primary btn-rounded btn-sm" @click="citySearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
</li>
<li>
<button type="reset" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-refresh"></i>&nbsp;重置</button>
</li>

获取当前下拉框值的js如下;

1
2
3
4
5
var sysCity = {
'provinceName' : $('#provinceName').val(),
'cityName' : $('#cityName').val(),
'dataState':$('#dataState option:selected').val()
};

2、如何获取radio单选按钮的值
在这里插入图片描述
html页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="form-group">
<label class="col-sm-3 control-label">性别:</label>
<div class="col-sm-8">
<div class="radio-beauty-container" id="sex">
<label>
<span class="radio-name">男</span>
<input type="radio" value="男" name="sex" id="nan" hidden/>
<label for="nan" class="radio-beauty"></label>
</label>
<label>
<span class="radio-name">女</span>
<input type="radio" value="女" name="sex" id="nv" hidden/>
<label for="nv" class="radio-beauty"></label>
</label>
</div>
</div>
</div>

获取性别所选值的js代码:

1
2
3
4
5
6
7
8
9
10
11
12
var sysUser = {
'name':$("#name").val(),
'password':CryptoJS.SHA256($("#password").val()).toString(),
'nickName':$("#nickName").val(),
'sex':$('input:radio:checked').val(),
'userRole':$('#userRole option:selected').text(),
'mobile':$("#mobile").val(),
'email':$("#email").val(),
'birthday':$("#birthday").val(),
'hobby':$("#hobby").val(),
'liveAddress':$("#liveAddress").val()
};

3、select下拉框显示从数据库查询到的值
在这里插入图片描述
图片中所选部门页面代码:

1
2
3
4
5
6
7
8
9
<body class="white-bg" onload="getProvinceCodes()"></body>
<div class="form-group">
<label class="col-sm-3 control-label">上级名称:</label>
<div class="col-sm-8">
<select id="provinceCode" name="provinceCode" class="form-control">
<option value="">请选择</option>
</select>
</div>
</div>

说明:在新增城市信息弹窗出现的时候,只需要加载一次省份信息,不需要每点击一次下拉框去请求一次后端,所以需要在新增城市页面加载的时候去请求所有省份信息列表,即要在addCity页面的body标签中增加onload方法,该方法就去后端查询省份信息

从数据库获取上级省份信息并返回加载到select下拉框中的js代码 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getProvinceCodes() {
var provinceCodesUrl = "http://localhost:9999/kyrie/province/citySelect";
$.ajax({
url: provinceCodesUrl,
dataType: 'json',
success : function(data) {
for(var i = 0;i<data.respData.data.length; i++){
var value = data.respData.data[i].provinceCode;
var lable = data.respData.data[i].provinceName;
$('#provinceCode').append("<option value="+value+">"+lable+"</option>");
}
},
error : function(data) {
console.log("下拉框数据加载失败")
}
})
}

把从后端获取到的数据通过循环加载到下拉框中。

4、引入静态css/js文件的统一方法

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/static/css/layui/layui.css}" rel="stylesheet">
<link th:href="@{/static/css/style.css}" rel="stylesheet">
<link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/static/css/layui/admin.css}" rel="stylesheet">
<link th:href="@{/static/css/element-ui.2.13.0.css}" rel="stylesheet">
<link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
</head>
<script th:src="@{/static/js/jquery.1.12.4.min.js}"></script>

5、动弹显示当前时间
显示效果:
在这里插入图片描述
html页面代码:

1
2
3
<li class="layui-nav-item layui-hide-xs" lay-unselect >
<h3>当前时间 :<span id="nowDateTimeSpan"></span></h3>
</li>

说明:动态显示时间需要在页面加载的时候同时加载,所以动态获取时间的方法使用onload方法,如下图:
在这里插入图片描述

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
function nowTime() {
var today=new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
var dd = today.getDate();//通过日期对象的getDate()方法返回年
var hh=today.getHours();//通过日期对象的getHours方法返回小时
var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10,则在其值前加0,比如如果时间是下午3点20分9秒的话,则显示15:20:09
MM=checkTime(MM);
dd=checkTime(dd);
mm=checkTime(mm);
ss=checkTime(ss);
var day; //用于保存星期(getDay()方法得到星期编号)
if(today.getDay()==0) day = "星期日 "
if(today.getDay()==1) day = "星期一 "
if(today.getDay()==2) day = "星期二 "
if(today.getDay()==3) day = "星期三 "
if(today.getDay()==4) day = "星期四 "
if(today.getDay()==5) day = "星期五 "
if(today.getDay()==6) day = "星期六 "
document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day;
setTimeout('nowTime()',1000);//每一秒中重新加载startTime()方法
}

function checkTime(i) {
if (i<10){
i="0" + i;
}
return i;
}

6、在新的标签页打开链接

在这里插入图片描述
给< a >标签添加target=”_blank”属性:
在这里插入图片描述

坚持原创技术分享,您的支持将鼓励我继续创作!