layuimini 笔记
锺离德庸
不熟悉web开发，步步艰难！！！
一：登录相关
login.html原本内容
<script>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer;
// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;
// 粒子线条背景
$(document).ready(function(){
$('.layui-container').particleground({
dotColor:'#7ec7fd',
lineColor:'#7ec7fd'
});
});
// 进行登录操作
form.on('submit(login)', function (data) {
data = data.field;
if (data.username == '') {
layer.msg('用户名不能为空');
return false;
}
if (data.password == '') {
layer.msg('密码不能为空');
return false;
}
if (data.captcha == '') {
layer.msg('验证码不能为空');
return false;
}
layer.msg('登录成功', function () {
window.location = '../index.html';
});
return false;
});
});
</script>加入登录请求
<script>
layui.use(['form','jquery'], function () {
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;
$('.bind-password').on('click', function () {
if ($(this).hasClass('icon-5')) {
$(this).removeClass('icon-5');
$("input[name='password']").attr('type', 'password');
} else {
$(this).addClass('icon-5');
$("input[name='password']").attr('type', 'text');
}
});
$('.icon-nocheck').on('click', function () {
if ($(this).hasClass('icon-check')) {
$(this).removeClass('icon-check');
} else {
$(this).addClass('icon-check');
}
});
// 进行登录操作
form.on('submit(login)', function (data) {
data = data.field;
if (data.username == '') {
layer.msg('用户名不能为空');
return false;
}
if (data.password == '') {
layer.msg('密码不能为空');
return false;
}
var loadIndex = layer.load(2);
$.post("/login/login", data, function (res) {
layer.close(loadIndex);
if (res.code === 1) {
layui.sessionData("token_data",{
key:"token",
value : res.token
})
layer.msg(res.info,{time: 1000},function () {
window.location = '../home/index';
});
}else{
layer.msg(res.info, function () {
});
}
},'json')
return false;
});
});
</script>账号和密码正常返回后，会顺带一个token，把token保存起来
二：初始化UI
原本的主index.html
<script>
layui.use(['jquery', 'layer', 'miniAdmin','miniTongji'], function () {
var $ = layui.jquery,
layer = layui.layer,
miniAdmin = layui.miniAdmin,
miniTongji = layui.miniTongji;
var options = {
iniUrl: "api/init.json", // 初始化接口
clearUrl: "api/clear.json", // 缓存清理接口
urlHashLocation: true, // 是否打开hash定位
bgColorDefault: false, // 主题默认配置
multiModule: true, // 是否开启多模块
menuChildOpen: false, // 是否默认展开菜单
loadingTime: 0, // 初始化加载时间
pageAnim: true, // iframe窗口动画
maxTabNum: 20, // 最大的tab打开数量
};
miniAdmin.render(options);
// 百度统计代码，只统计指定域名
miniTongji.render({
specific: true,
domains: [
'99php.cn',
'layuimini.99php.cn',
'layuimini-onepage.99php.cn',
],
});
$('.login-out').on("click", function () {
layer.msg('退出登录成功', function () {
window.location = 'page/login-3.html';
});
});
});
</script>退出操作加入了http请求，options也有响应的改动
<script>
layui.use(['jquery', 'layer', 'miniAdmin'], function () {
var $ = layui.jquery,
layer = layui.layer,
miniAdmin = layui.miniAdmin;
var token = layui.sessionData('token_data').token
var options = {
iniUrl: "/home/info", // 初始化接口
clearUrl: "/home/clear", // 缓存清理接口
outUrl: "/home/exit", // 退出接口
urlHashLocation: true, // 是否打开hash定位
bgColorDefault: false, // 主题默认配置
multiModule: true, // 是否开启多模块
menuChildOpen: false, // 是否默认展开菜单
loadingTime: 0, // 初始化加载时间
pageAnim: true, // iframe窗口动画
maxTabNum: 20, // 最大的tab打开数量
accessToken: token, // 服务器返回的token
};
miniAdmin.render(options);
$('.login-out').on("click", function () {
// $.post("/home/exit", "", function (res){
//
// })
miniAdmin.requestJsonDataWithToken("POST",options.outUrl,options.accessToken,function(data){
layer.msg('退出登录成功', function () {
window.location = '../login/index';
});
},function(data){
layer.msg("退出登录失败")
})
});
});
</script>三：miniAdmin.js的相关改动
var miniAdmin = {
/**
* 后台框架初始化
* @param options.iniUrl 后台初始化接口地址
* @param options.clearUrl 后台清理缓存接口
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
* @param options.maxTabNum 最大的tab打开数量
*/
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;
$.getJSON(options.iniUrl, function (data) {
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);
}
}).fail(function () {
miniAdmin.error('菜单接口有误');
});
},
/**
* 初始化缓存地址
* @param clearUrl
*/
renderClear: function (clearUrl) {
$('.layuimini-clear').attr('data-href',clearUrl);
},
/**
* 监听
*/
listen: function () {
/**
* 清理
*/
$('body').on('click', '[data-clear]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
sessionStorage.clear();
// 判断是否清理服务端
var clearUrl = $(this).attr('data-href');
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
$.getJSON(clearUrl, function (data, status) {
layer.close(loading);
if (data.code != 1) {
return miniAdmin.error(data.msg);
} else {
return miniAdmin.success(data.msg);
}
}).fail(function () {
layer.close(loading);
return miniAdmin.error('清理缓存接口有误');
});
} else {
layer.close(loading);
return miniAdmin.success('清除缓存成功');
}
});
}
}封装了APi：requestDataWithToken,改动了原来的请求
var miniAdmin = {
/**
* 带验证的请求
* @param type "GET|POST"
* @param url "访问地址"
* @param token "验证key"
* @param success "成功回调"
* @param error "错误回调"
*/
requestDataWithToken:function(type,url,token,success,error){
$.ajax({
type:type,
url:url,
beforeSend: function(request) {
request.setRequestHeader("token", token);
},
dataType:"json",
success:success,
error:error
})
},
/**
* 后台框架初始化
* @param options.iniUrl 后台初始化接口地址
* @param options.clearUrl 后台清理缓存接口
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
* @param options.maxTabNum 最大的tab打开数量
* @param options.accessToken 验证token
*/
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;
options.accessToken = options.accessToken || "";
miniAdmin.requestDataWithToken("GET",options.iniUrl,options.accessToken,function(data){
if (data == null) {
miniAdmin.error('暂无菜单信息')
} else {
miniAdmin.renderLogo(data.logoInfo);
miniAdmin.renderClear(options.clearUrl,options.accessToken);
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);
}
},function(data){
miniAdmin.error('菜单接口有误');
})
},
/**
* 初始化缓存地址
* @param clearUrl
*/
renderClear: function (clearUrl,accessToken) {
$('.layuimini-clear').attr('data-href',clearUrl);
$('.layuimini-clear').attr('data-token',accessToken);
},
listen: function () {
/**
* 清理
*/
$('body').on('click', '[data-clear]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
sessionStorage.clear();
// 判断是否清理服务端
var clearUrl = $(this).attr('data-href');
var token = $(this).attr('data-token');
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
miniAdmin.requestDataWithToken("GET",clearUrl,token,function(data){
layer.close(loading);
if (data.code != 1) {
return miniAdmin.error(data.msg);
} else {
return miniAdmin.success(data.msg);
}
},function(data){
layer.close(loading);
return miniAdmin.error('清理缓存接口有误');
})
} else {
layer.close(loading);
return miniAdmin.success('清除缓存成功');
}
});
类似资料：