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

最新推荐文章于 2024-10-08 15:07:49 发布

德鲁大叔撸代码

最新推荐文章于 2024-10-08 15:07:49 发布

阅读量148

点赞数

分类专栏： kyrieboot 文章标签： java

本文链接：https://blog.csdn.net/m0_43584016/article/details/105932480

版权

kyrieboot 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

 <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如下;

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

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

<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代码：

 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下拉框显示从数据库查询到的值
在这里插入图片描述
图片中所选部门页面代码：

<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代码 :

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文件的统一方法

<!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页面代码：

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

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

js代码;

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"属性：