软件
产品
不熟悉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('清除缓存成功'); } });
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
推荐好文
155-2731-8020
