第二章 项目搭建
三.前端搭建
前端采用layui2
的模板,我们对前段静态页面进行对于的修改
1.调用后端接口
api主目录下添加以下内容:serverAddress.js
其代码内容如下:
const baseUrl = 'http://127.0.0.1:8080'; //'http://36.139.92.245:8082'; //'http://127.0.0.1:8080'; //'http://36.133.143.71:8082';
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
// 获取url参数名
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null){
return unescape(r[2]);
}else{
return null;
}
}
2.登录功能实现
(1)index.html修改
1)对主目录下的index.html
,进行如下修改。
2)同时将page目录下的login-1(或者login-2/3)
修改为login
,对应为我们index
修改的代码。接着将api
目录下的init.json
的login-1(或者login-2/3)
改为login
3)添加引用路径
<script src="js/checkLogin.js" charset="utf-8"></script>
<script src="js/request.js" charset="utf-8"></script>
<script src="api/serverAddress.js" charset="utf-8"></script>
var form = layui.form,
checkLogin = layui.checkLogin;
var $ = layui.jquery,
layer = layui.layer,
miniAdmin = layui.miniAdmin,
miniTongji = layui.miniTongji;
//检查是否登录
checkLogin.check();
const iniUrl = "api/init.json";
var options = {
type: "GET",
url:"/smtUser/getUserMenu",
params: {"id": layui.data('userInfo').data.currentUserId}
}
var res = layui.request.do(options);
if (res === null){
layer.msg("访问服务器失败!", function (){});
return false;
}
if (res.code === 200){
menuInfo = res.data;
}
var options = {
iniUrl: null, // 初始化接口
clearUrl: "api/clear.json", // 缓存清理接口
urlHashLocation: true, // 是否打开hash定位
bgColorDefault: false, // 主题默认配置
multiModule: true, // 是否开启多模块
menuChildOpen: false, // 是否默认展开菜单
loadingTime: 0, // 初始化加载时间
pageAnim: true, // iframe窗口动画
maxTabNum: 20, // 最大的tab打开数量
};
$.ajaxSettings.async = false;
$.getJSON(iniUrl, function (data){
var menudata = $.extend(true, {}, data);
delete menudata.menuInfo;
if (menuInfo != null){
menudata.homeInfo = {"title": "首页", "href": "page/welcome-1.html?t=1"};
menudata.menuInfo = menuInfo;
}
options.iniUrl = menudata;
});
$.ajaxSettings.async = true;
miniAdmin.render(options);
// 百度统计代码,只统计指定域名
miniTongji.render({
specific: true,
domains: [
'99php.cn',
'layuimini.99php.cn',
'layuimini-onepage.99php.cn',
],
});
//---显示当前用户姓名-----------
const userInfo = layui.data('userInfo');
var currentUserName = '';
if ((userInfo != undefined) && (userInfo.data != undefined)) currentUserName = userInfo.data.currentUserName;
if (currentUserName != undefined){
$('#aCurrentUserName')[0].innerText = currentUserName;
}
//----------------------------
$('.login-out').on("click", function () {
layer.confirm('确定要退出当前用户?',{
btn: ['确定', '取消']
},function (){ //点击确定按钮执行该函数
layui.data('userInfo', null);
window.location.href = 'page/login.html';
},function (){});
});
});
function getMenuRightvalue(menuId) {
for (var i = 0; i < menuInfo.length; i++) {
for (var j = 0; j < menuInfo[i].child.length; j++) {
if (menuInfo[i].child[j].menuid === menuId)
return menuInfo[i].child[j].rightvalue;
}
}
}
(2)login修改
对login.html
中登录操作的代码部分进行修改(并非全部代码)
// 进行登录操作
form.on('submit(login)', function (data) {
const loginbtn = $(this);
$(this).text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
data = data.field;
if (data.username == '') {
layer.msg("用户名不能为空!", function () {});
return false;
}
if (data.password == '') {
layer.msg("密码不能为空!", function () {});
return false;
}
// var val = $("#captcha").val().toLowerCase();
// var num = show_num.join("");
// if (val === '') {
// layer.msg("请输入验证码!", function () {});
// return false;
// } else if (val !== num) {
// layer.msg("验证码错误,请重新输入!", function () {});
// $("#captcha").val('');
// draw(show_num);
// layer.close(loadIndex);
// loginbtn.text("录").removeAttr("disabled").removeClass("layui-disabled");
// return false;
// }
var loadIndex = layer.load(2, {shade: [0.3, '#333']});
$.ajax({
type: 'POST',
async: false,
cache: false,
url: baseUrl + "/smtUser/login",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(data),
success: function (res, textStatus, request) {
if (res.code === 200) {
layui.data('userInfo',
{
key: 'data',
value: {
'currentUserToken': res.data.token,
'currentUserId': res.data.data.id,
'currentUserName': res.data.data.username,
'currentUserDept': res.data.data.deptid
}
});
// if ($("#chkrememberMe")[0].checked) {
// layui.data('rememberMe', {key: 'username', value: data.username});
// } else {
// layui.data('rememberMe', null);
// }
// if (localStorage["totask"] === "1")
// top.location.href = 'index.html';
// else
parent.location.href = "../index.html";
} else {
layer.msg(res.msg, function () {
$('#captcha').click();
});
}
},
error: function (data) {
}
})
layer.close(loadIndex);
loginbtn.text("录").removeAttr("disabled").removeClass("layui-disabled");
return false;
});
});
(3)引用checkLogin.js
引用在js目录下,其代码内容如下:
layui.define(function (exports) {
"use strict, jquery";
var checkLogin = {
check: function () {
var $ = layui.jquery;
var userInfo = layui.data('userInfo');
var localToken;
if ((userInfo !== undefined) && (userInfo.data !== undefined))
localToken = userInfo.data.currentUserToken;
if (localToken === undefined || localToken === null) {
window.location.href = "page/login.html";
}
return false;
}
}
exports('checkLogin', checkLogin);
});
(4)引用reques.js
引用在js目录下
layui.define(['jquery','table'], function (exports) {
var $ = layui.$,
miniAdmin = layui.miniAdmin;
var request = {
do: function (options) {
// alert(JSON.stringify(options.params));
localStorage.tologin = null;
var async = (options.async === undefined)? false : options.async;
if (options.type == "GET") {
var url = baseUrl + options.url;
if (options.params != null) {
var url = url+"?_t=" + new Date().getTime();
for (var Key in options.params){
url =url+'&'+''+Key+'='+options.params[Key]+'';
}
}
var res;
$.ajax({
url: url,
async: async,
cache: false,
type: "get",
headers: {
token: ((layui.data('userInfo') != undefined) && (layui.data('userInfo').data != undefined))? layui.data('userInfo').data.currentUserToken : null
},
success: function (data, textStatus, request) {
res = data;
if (data.code === 5000) { //token认证错误
if (options.url.indexOf("login") === -1) {
layer.msg('当前用户已失效,请重新登录!', function () { });
layui.data('userInfo', null);
if (options.url.indexOf("getUserMenu") == -1) {
if (options.loginHref === undefined){
window.location.href = "login.html";
} else {
window.location.href = options.loginHref;
}
} else {
localStorage.tologin = 1;
window.location.href = "../index.html";
}
}
}else{
var tokenid = request.getResponseHeader("token");
var userid = request.getResponseHeader("userid");
var username = decodeURI(request.getResponseHeader("username"));
var userdept = request.getResponseHeader("userdept");
layui.data('userInfo',
{
key: 'data',
value: {'currentUserToken': tokenid, 'currentUserId': userid, 'currentUserName': username,
'currentUserDept': userdept}
});
}
},
error: function (data) {
res = data;
}
})
return res;
}else {
var o = JSON.stringify(options.params);
var res;
$.ajax({
type: 'POST',
async: async,
cache: false,
url: baseUrl + options.url,
headers: {
token: ((layui.data('userInfo') != undefined) && (layui.data('userInfo').data != undefined))? layui.data('userInfo').data.currentUserToken : null
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(options.params),
success: function (data, textStatus, request) {
res = data;
if ((data.code === 5000)) { //token认证错误
if (options.url.indexOf("login") === -1) {
layer.msg('当前用户已失效,请重新登录!', function () { });
layui.data('userInfo', null);
if (options.url.indexOf("getUserMenu") === -1) {
if (options.loginHref === undefined)
window.location.href = "login.html";
else
window.location.href = options.loginHref;
} else {
window.location.href = "page/login.html";
}
return false;
}
}else{
var tokenid = request.getResponseHeader("token");
var userid = request.getResponseHeader("userid");
var username = decodeURI(request.getResponseHeader("username"));
var userdept = request.getResponseHeader("userdept");
layui.data('userInfo',
{
key: 'data',
value: {'currentUserToken': tokenid, 'currentUserId': userid, 'currentUserName': username,
'currentUserDept': userdept}
});
}
},
error: function (data) {
res = data;
}
})
return res;
}
}
};
//定义表格操作
var tableActive = {
//添加行
addNewRow: function(myTable, tableId, newRow) {
//获取表格当前数据
var oldData = layui.table.cache[tableId];
//将新行插入表格数据中
oldData.push(newRow);
//如果原table渲染时指定了数据url
//重载时需要设置url: null
//使用新数据重载表格
myTable.reload({
url: null,
data: oldData
});
},
//删除行
deleteRow: function(myTable, tableId) {
var oldData = layui.table.cache[tableId];
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
//在table工具栏监听时删除对应行dom结构
//行不存在则从数据中删除
if(!row || !row.id){
oldData.splice(i, 1); //删除一项
}
continue;
}
myTable.reload({
url: null,
data : oldData
});
},
//更新数据
updateRow: function(myTable, tableId, data) {
//更新表数据
var oldData = tableId.cache.currentTableId;
for(var i=0, row; i < oldData.length; i++){
row = oldData[i];
if(row.id == data.id){
$.extend(oldData[i], data);
continue;
}
}
myTable.reload({
url: null,
data : oldData
});
}
};
exports("request", request);
exports("tableActive", tableActive);
});
3.修改当前显示用户姓名
在后端引用以下类:
utils软件包内引用HeaderModifierAdvice.java
找到对应当前界面id的静态代码位置,替换为如下内容
<a id = "aCurrentUserName" href="javascript:;"></a>
4.用户功能菜单
对admin进行修改即可,其余已经在登录功能实现时修改
在js/lay-module-layuimini
目录下的miniadmin,对其进行修改,只修改render:function(options)
的方法
render: function (options) {
options.iniUrl = options.iniUrl || null;
options.clearUrl = options.clearUrl || null;
options.urlHashLocation = options.urlHashLocation || false;
options.bgColorDefault = options.bgColorDefault || 0;
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
options.loadingTime = options.loadingTime || 1;
options.pageAnim = options.pageAnim || false;
options.maxTabNum = options.maxTabNum || 20;
const data = options.iniUrl;
if (data == null) {
miniAdmin.error('暂无菜单信息')
} else {
miniAdmin.renderLogo(data.logoInfo);
miniAdmin.renderClear(options.clearUrl);
miniAdmin.renderHome(data.homeInfo);
miniAdmin.renderAnim(options.pageAnim);
miniAdmin.listen();
miniMenu.render({
menuList: data.menuInfo,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen
});
miniTab.render({
filter: 'layuiminiTab',
urlHashLocation: options.urlHashLocation,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen,
maxTabNum: options.maxTabNum,
menuList: data.menuInfo,
homeInfo: data.homeInfo,
listenSwichCallback: function () {
miniAdmin.renderDevice();
}
});
miniTheme.render({
bgColorDefault: options.bgColorDefault,
listen: true,
});
miniAdmin.deleteLoader(options.loadingTime);
}
},