管理系统搭建(6)—前端初步搭建

最新推荐文章于 2024-04-22 13:04:56 发布
最新推荐文章于 2024-04-22 13:04:56 发布
阅读量219 收藏
点赞数
分类专栏： 管理系统搭建 文章标签： 前端 javascript 开发语言 layui html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64141446/article/details/130853595
版权

第二章 项目搭建

三.前端搭建

前端采用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);
    }
},
GGAPTX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
layuiAdmin后台框架以及动态权限(二)
小刘的博客
06-26 1206
之前写的ssm权限系统，不再赘述，由于之前的系统是由上到下，一层层查找封装的权限数据结构，系统性能不好，和数据库会有多次交互，下面介绍第二种方式：上一篇：https://blog.csdn.net/qq_38310446/article/details/104686255 /** * 根据角色，获取角色的权限 * @param id * @return */ public List<SysPermission> getPermission
前端vue项目,后台新闻管理系统
07-19
这是基于vue的新闻管理系统,接口是通过 json-server来实现的
SpringBoot+layuimini实现左侧菜单动态展示
最新发布
m0_46590717的博客
04-22 515
layuimini动态显示左侧菜单
layuiadmin-master.zip
09-17
layui 模板，这个模板是我的资源里面，静态资源比较丰富的模板，之前上传的模板没有数据分析图的静态资源，现在这个版本的有这些资源，官网还要收费，真的是黑心商人。
学习路之PHP--引入layuimini后台管理模板
Green
11-27 1932
效果图： 一、下载代码包 layuimini （iframe 多tab版） 包：百度网盘 请输入提取码2497 layuimini - 基于Layui的后台管理系统前端模板 官网下载：http://layuimini.99php.cn/ 二、合入项目 解决包将layuimini-v2--->改为 admin.放到 项目\public\static 三、新建控制器 再把包里面的index.html复制到 四、运行就可能报错。然后改...
【永久开源】layuimini，最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。
热门推荐
qq_33644049的博客
06-17 1万+
layuimini后台模板 项目介绍 最简洁、清爽、易用的layui后台框架模板。 主要特性 界面足够简洁清爽。 一个接口几行代码而已直接初始化整个框架，无需复杂操作。 支持多tab，可以打开多窗口。 支持无限级菜单和对font-awesome图标库的完美支持。 url地址hash定位，可以清楚看到当前tab的地址信息。 刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。 移动端的友好...
layuimini后台管理系统的简单使用
欢迎你的到来，我们一起加油！！！
01-01 3841
后台程序员，也需要懂点前端，毕竟技多不压身，搞不好全栈工程师。
好用的基于layui的免费开源后台模版layuimini
php-yyds
11-27 4623
发现一个好用的后台模版 基于layui的免费开源后台模版layuiminieasyadmin开源项目EasyAdmin是基于ThinkPHP6.0+Layui的快速开发的后台管理系统。
layuimini 笔记
zhangdell的专栏
05-12 2739
不熟悉web开发，步步艰难！！！ 一：登录相关 login.html原本内容 <script> layui.use(['form'], function () { var form = layui.form, layer = layui.layer; // 登录过期的时候，跳出ifram框架 if (top.location != self.location) top.location = self.loc
springboot+shiro+layuimini实现后台管理系统的权限控制（一）基础环境搭建
superyu1992的专栏
07-21 2535
目前，使用ApacheShiro的人越来越多，因为它相当简单，对比SpringSecurity，可能没有SpringSecurity做的功能强大，但是在实际工作时可能并不需要那么复杂的东西，所以使用小而简单的Shiro就足够了。对于它俩到底哪个好，这个不必纠结，能更简单的解决项目问题就好了。基本上就是普通web前端的项目结构，唯一要说明的一点就是api文件夹，api文件夹下放的是静态的json文件，用来渲染数据用的，后面我们会用接口来替换掉。2、配置application.yml。.........
后台用户管理系统
qq_50280292的博客
11-17 7338
Layui框架
layuimini前端框架
11-24
layuimini前端框架，一款基于layui设计的项目，这个版本是iframe版本的，界面足够清新好看，并且内置多套主题方案可供选择，另外还可以根据格式自定义主题。只需要提供一个初始化接口，根据需要选择初始化参数便可进行初始化，操作简单方便。
Vue3+elementplus搭建通用管理系统实例
10-30
使用HBuilderX开发实现管理系统常见功能，包括登录界面、找回密码界面、通用表格、动态表单、动态详情页、系统常用功能（系统配置、角色管理、用户管理、菜单管理、权限管理等），提供开发过程视频、相关文档、源码...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）
12-25
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）开发，提供源码。包括前端常用功能、基础框架等； 使用express实现模拟后端，提供前端功能接口； 使用echarts实现系统统计图表功能演示； 使用datav实现大屏监控...
vue管理系统框架源码，快速搭建前端管理系统
02-19
vue管理系统框架源码，快速搭建前端管理系统
后端用java加前端vue搭建的用户管理系统
06-05
后端用java加前端vue搭建的用户管理系统 实现增删改查功能。 文章地址：
layui后台管理框架应用
susan的博客
04-15 2212
layuimini后台管理框架应用 查看效果：1.发布到IIS；2.创建asp.net web项目运行
thinkphp搭建layuimini_EasyAdmin: 框架主要使用ThinkPHP6.0 + layuimini，拥有完善的权限的管理模块以及敏捷的开发方式，让你开发起来更加的舒服。...
weixin_34779096的博客
01-30 1220
server {listen 80;server_name blog.com;root /var/www/html/99Blog/public;index index index.php index.html index.htm default.php default.htm default.html;access_log /var/log/nginx/nginx.b...
多tab页前端模板_开箱即用，基于layui的开源后端管理前端模板——layuimini
weixin_33507838的博客
01-27 1317
介绍有一段时间没推荐过后端模板了，今天就来一个，layuimini是一款后台admin前端模板，基于 layui 编写的最简洁、易用的后台框架模板。只需提供一个接口就直接初始化整个框架，无需复杂操作。模板分为两种模式，分别是传统的iframe版本，另外一个是单页面版本，可以满足不同的开发需求！Githubhttps://github.com/zhongshaofa/layuimini主要特性界面足...
vue2 管理系统搭建
04-25
可以使用基于 Vue.js 的脚手架工具，如Vue CLI，来快速搭建一个基础框架。首先需要安装 Node.js 和 npm，然后通过 npm 安装 Vue CLI。接下来可以使用 Vue CLI 创建一个项目模板，然后根据需要添加路由、状态管理、UI...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GGAPTX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值