目录
- 一、介绍
- 二、准备
- 三、目标
- 四、代码
- 五、完成
一、介绍
在商城管理系统中，超级管理员和普通管理员因为权限不同，登录进入后看到的菜单也会是不同的。
本题需要你完成商城管理系统中权限数据的处理。
二、准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── css
├── images
├── js
│ ├── auth.js
│ └── menu.js
├── effect.gif
├── login.html
└── index.html
其中：
css 是样式文件夹。
images 是图片文件夹。
login.html 是登录页。
index.html 是商城首页。
js/menu.js 是渲染左侧菜单的 js 文件。
js/auth.js 是需要补充代码的 js 文件。
effect.gif 是最终完成的效果图。
在浏览器中预览 login.html 页面效果如下
三、目标
请在 js/auth.js 文件中补全 getMenuListAndAuth 函数代码。
在登录页 login.html 点击管理员登录和超级管理员登录时会根据管理员的权限不同，在商城首页 index.html 的左侧显示不同的菜单列表。但是后端同学给的数据是不符合前端展示要求的，所以我们需要做些处理，假如后端提供的数据是这样的:
[{ parentId: -1, name: "商品管理", id: 1, auth: "cart" },{ parentId: 1, name: "商品列表", id: 4, auth: "cart-list" },{ parentId: -1, name: "添加管理员", id: 10, auth: "admin" },
];
其中数据中对象字段的含义说明：
- id 表示当前节点
- parentId 表示父级节点，如果为 -1 则表示顶级数据
- auth 表示权限
具体需求如下：
- 将待处理数据（一维数组）根据 parentId 字段值处理成树形结构存入 menus 变量中。
把数据处理成如下格式（每一项都必须有 children 字段，没有子级时，children 为空数组）：
[{parentId: -1,name: "商品管理",id: 1,auth: "cart",children: [{parentId: 1,name: "商品列表",id: 4,auth: "cart-list",children: [],},],},{parentId: -1,name: "添加管理员",id: 10,auth: "admin",children: [],},
];
注意：js/auth.js 中的 menuList 仅为后端返回的数据结构示例，非固定数据。实际使用中，后端返回的数据转化成树形结构时层级可能更多，封装方法时务必考虑通用性。
- 将待处理数据中的 auth 字段提取出来并存入 auths 变量中，左侧菜单会根据传入的权限列表数组和 auths 对比后进行菜单渲染。
经过 getMenuListAndAuth 处理后 auths 的结果为：
["cart", "cart-list", "admin"];
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
四、代码
login.html
<!DOCTYPE html>
<html>
<head><title>商城管理系统</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link href="css/login.css" rel="stylesheet" type="text/css">
<body><div class="main"><div class="container"><h2>立即登录</h2><input type="text" value="admin" /><input value="PASSWORD" name="Password" type="password" /><span><input type="checkbox" checked />记住我</span><h6><a href="#">忘记密码?</a></h6><div class="clear"><input type="submit" onclick="adminLogin()" value="管理员登录"><input type="submit" onclick="superLogin()" value="超级管理员登录"></div><p>还没有账号?<a href="#">立即注册</a></p></div></div><footer><p>© 2022 蓝桥杯 | 商城管理系统 <a>bootstrap搭建</a></p></footer><script>let adminLogin = () => {window.location.href = "./index.html?name=admin";}let superLogin = () => {window.location.href = "./index.html?name=super";}</script>
</body></html>
index.html
<!DOCTYPE html>
<html><head><title>商城管理系统</title><meta charset="UTF-8" /><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body class="skin-black"><header class="header"><a href="index.html" class="logo"> 商城管理系统 </a><nav class="navbar navbar-static-top"><div class="navbar-right"><ul class="nav navbar-nav"><li class="dropdown"><a href="./login.html" class="dropdown-toggle"><span>退出</span></a></li></ul></div></nav></header><div class="wrapper row-offcanvas row-offcanvas-left"><div class="left-side sidebar-offcanvas"><section class="sidebar"><div class="user-panel"><div class="pull-left image"><img src="images/admin.jpg" class="img-circle" alt="User Image" /></div><div class="pull-left info"><p id="admin">你好，管理员</p><a href="#"><i class="text-success">在线</i></a></div></div><!-- 左侧菜单栏 --><ul id="sidebarmenu" class="text-success"></ul></section></div><div class="right-side"><section class="content"><div class="row" style="margin-bottom: 5px"><div class="col-md-3"><div class="sm-st clearfix"><span class="sm-block-icon block-red">1</span><div class="sm-block-info"><span>3200</span>商城访问量</div></div></div><div class="col-md-3"><div class="sm-st clearfix"><span class="sm-block-icon block-violet">2</span><div class="sm-block-info"><span>2200</span>售出商品数</div></div></div><div class="col-md-3"><div class="sm-st clearfix"><span class="sm-block-icon block-blue">3</span><div class="sm-block-info"><span>100,320</span>总销售额</div></div></div><div class="col-md-3"><div class="sm-st clearfix"><span class="sm-block-icon block-green">4</span><div class="sm-block-info"><span>4567</span>总利润</div></div></div></div><div class="row"><div class="col-md-12"><section class="panel"><header class="panel-heading">热销商品</header><div class="panel-body table-responsive"><table class="table table-hover"><thead><tr><th>#</th><th>商品名称</th><th>库存</th><th>上架时间</th><th>状态</th><th>售出量</th></tr></thead><tbody><tr><td>1</td><td>macbook pro 2021</td><td>1000</td><td>1/5/2022</td><td><span class="label label-info">余量充足</span></td><td><span class="badge badge-info">50%</span></td></tr><tr><td>2</td><td>macbook pro 2019</td><td>3000</td><td>06/08/2021</td><td><span class="label label-success">已售罄</span></td><td><span class="badge badge-success">100%</span></td></tr><tr><td>3</td><td>iphone 12</td><td>520</td><td>10/12/2019</td><td><span class="label label-info">余量充足</span></td><td><span class="badge badge-info">75%</span></td></tr><tr><td>4</td><td>Xiaomi 12 Pro</td><td>400</td><td>03/22/2022</td><td><span class="label label-info">余量充足</span></td><td><span class="badge badge-info">65%</span></td></tr><tr><td>5</td><td>Hua Wei Meta 40</td><td>730</td><td>03/11/2022</td><td><span class="label label-warning">即将售罄</span></td><td><span class="badge badge-danger">95%</span></td></tr><tr><td>6</td><td>Hua Wei Meta V30</td><td>300</td><td>05/11/2019</td><td><span class="label label-warning">即将售罄</span></td><td><span class="badge badge-danger">95%</span></td></tr></tbody></table></div></section></div></div></section></div></div><script src="./js/auth.js "></script><script src="./js/menu.js "></script></body>
</html>js/auth.js
// menuList 仅为示例数据，非实际使用数据，实际使用数据层级不确定（可能是四级五级六级等），数据结构与 menuList 一致
// 1. `parentId` 如果为 `-1`，则表示此条数据为顶级数据。
// 2. `parentId` 为该条数据的父级数据的 `id`。let menuList = [{ parentId: -1, name: "添加管理员", id: 10, auth: "admin" },{ parentId: 10, name: "管理员权限分配", id: 11, auth: "admin-auth" },{ parentId: -1, name: "商品管理", id: 1, auth: "product" },{ parentId: 1, name: "商品列表", id: 4, auth: "productList" },{ parentId: 4, name: "商品分类", id: 5, auth: "category" },{ parentId: 5, name: "添加分类", id: 8, auth: "addClassification" },{ parentId: 4, name: "商品上架", id: 6, auth: "product" },{ parentId: -1, name: "评论管理", id: 2, auth: "comments" },{ parentId: -1, name: "个人中心", id: 3, auth: "profile" },
];/*** @param {*} menuList 传入的数据* @return {*} menus 转化后的树形结构数据，auths 转化后的权限列表数组*/const getMenuListAndAuth = (menuList) => {// TODO：待补充代码return { menus, auths }; // menus 转化后的树形结构数据，auths 转化后的权限列表数组
};// 请勿删除和修改以下代码
try {module.exports = { getMenuListAndAuth };
} catch (e) {}js/menu.js
let admin = document.getElementById("admin");let authList;
let url = location.href;// 获取最终要渲染的菜单列表
let res = getMenuListAndAuth(menuList);function getUrlParam(key) {let args = {};const arr = url.match(/\w+=\w+/gi).map((kv) => kv.split("="));for (let item of arr) {args[item[0]] = item[1];}return args[key];
}let role = getUrlParam("name");if (role == "admin") {// 管理员authList = ["profile", "comments", "product", "productList", "category"];admin.innerHTML = `你好，管理员`;
} else {// 超级管理员authList = ["profile","comments","product","productList","category","addClassification","admin","product","admin-auth",];admin.innerHTML = `你好，超级管理员`;
}
// 全部的菜单列表
let sidelistall = res.menus;
let sidebarmenu = document.querySelector("#sidebarmenu");/*** @param {*} auth 传入的权限列表* @return {*} 根据传入的权限列表返回需要显示的菜单列表*/
const getNav = (auth) => {const filter = (sidelistall) => {return sidelistall.filter((item) => {if (auth.includes(item.auth)) {if (item.children) {item.children = filter(item.children);}return true;}});};return filter(sidelistall);
};
renderSide();// 根据权限渲染左侧菜单
function renderSide() {let menuListside = getNav(authList);const rendermenu = (children) => {let childrenhtml = "";childrenhtml += children.map((child) => {let childrenH2 = "";if (child.children && !!child.children.length) {childrenH2 = rendermenu(child.children);}return `<ul ><li style="line-height: 28px;">${child.name} ${childrenH2 ? `<i> ${childrenH2}</i>` : ""}</ul>`;}).join("");return childrenhtml;};// 渲染菜单menuListside.map((item, index) => {let childrenhtml = "";// 首先判断 item 有没有子级if (item.children && !!item.children.length) {childrenhtml = rendermenu(item.children);}sidebarmenu.innerHTML += `<li class="active"><a>${item.name}</a><i style="color:#27C24C">${childrenhtml ? childrenhtml : ""}</i> </li>`;});
}css/login.css
body {font-family: Verdana;background: url("../images/bg.jpg") no-repeat 62% 34%;background-size: cover;text-align: center;
}.container h2 {color: #fff;font-size: 29px;letter-spacing: 2px;text-transform: uppercase;padding-bottom: 15px;
}.container {width: 25%;margin: 0 auto;background: rgba(0, 0, 0, 0.34);padding: 42px 35px;
}.main {margin-top: 100px;
}input[type="text"],
input[type="password"] {width: 88%;padding: 15px 0px 15px 42px;border: 1px solid #fff;outline: none;font-size: 14px;color: #fff;margin: 14px 0px;
}input[type="text"] {background: url("../images/user.svg") no-repeat 10px 11px;background-size: 24px;
}input[type="password"] {background: url("../images/key.svg") no-repeat 8px 9px;background-size: 28px;
}.container span {font-size: 16px;color: #fff;float: left;width: 32%;margin-top: 8px;
}.container h6 {font-size: 16px;float: right;width: 37%;color: #fff;letter-spacing: 1px;margin-top: 8px;text-decoration: underline;
}.container a {color: #fff;transition: 0.5s all;-webkit-transition: 0.5s all;-o-transition: 0.5s all;-moz-transition: 0.5s all;-ms-transition: 0.5s all;
}.container a:hover {color: rgba(208, 95, 216, 0.9);transition: 0.5s all;-webkit-transition: 0.5s all;-o-transition: 0.5s all;-moz-transition: 0.5s all;-ms-transition: 0.5s all;
}
.clear {clear: both;
}
input[type="submit"] {padding: 12px 38px;font-size: 1px;text-transform: uppercase;letter-spacing: 2px;background: #003b64;color: white;border: none;outline: none;cursor: pointer;margin: 45px auto 31px;transition: 0.5s all;-webkit-transition: 0.5s all;-o-transition: 0.5s all;-moz-transition: 0.5s all;-ms-transition: 0.5s all;
}input[type="submit"]:hover {background: rgba(213, 38, 133, 0.64);transition: 0.5s all;-webkit-transition: 0.5s all;-o-transition: 0.5s all;-moz-transition: 0.5s all;-ms-transition: 0.5s all;
}.container p a {text-transform: uppercase;font-size: 18px;text-decoration: underline;letter-spacing: 1px;color: #fff;padding: 10px;
}.container p {font-size: 17px;color: #fff;
}footer p {margin: 4em 0em;color: #fff;font-size: 15px;font-weight: 300;letter-spacing: 2px;
}footer a {color: rgba(208, 95, 216, 0.9);
}footer a:hover {color: rgba(19, 129, 206, 0.82);text-decoration: underline;
}@media (max-width: 1440px) {.container {width: 28%;}
}@media (max-width: 1366px) {.container {width: 30%;}
}@media (max-width: 1280px) {.container {width: 33%;}.agileheader h1 {font-size: 41px;}.container h2 {font-size: 27px;}
}@media (max-width: 1080px) {.container {width: 49%;}
}css/style.css
html,
body {overflow-x: hidden !important;-webkit-font-smoothing: antialiased;min-height: 100%;background: #f1f2f7;
}
a {color: #3c8dbc;
}
.right-side,
.left-side {min-height: 100%;display: block;
}.right-side {background-color: #f1f2f7;margin-left: 220px;
}
.left-side {position: absolute;width: 220px;top: 0;
}@media screen and (min-width: 992px) {.left-side {top: 50px;}.right-side.strech {margin-left: 0;}.right-side.strech > .content-header {margin-top: 0px;}.left-side.collapse-left {left: -220px;}
}.content {padding: 20px 15px;background: #f0f3f4;overflow: auto;
}img {max-width: 100% !important;
}.badge-success {background-color: #27c24c;color: #dff5e4;
}.badge-info {background-color: #23b7e5;color: #e3f6fc;
}
.badge-danger {background-color: #f05050;color: #fae6e6;
}body > .header .navbar {height: 50px;margin-bottom: 0;margin-left: 220px;
}
body > .header .logo {float: left;font-size: 20px;line-height: 50px;text-align: center;padding: 0 10px;width: 220px;font-weight: 500;height: 50px;display: block;
}
.user-panel {padding: 10px;
}
.user-panel:before,
.user-panel:after {display: table;content: " ";
}
.user-panel:after {clear: both;
}
.user-panel > .image > img {width: 45px;height: 45px;
}@media screen and (max-width: 992px) {.relative {position: relative;}body.fixed .sidebar-offcanvas {margin-top: 50px;left: -220px;}body.fixed .row-offcanvas-left.active .navbar {left: 220px !important;right: 0;}body.fixed .row-offcanvas-left.active .sidebar-offcanvas {left: 0px;}
}.skin-black .navbar {background-color: #ffffff;border-bottom: 1px solid #eee;
}
.skin-black .navbar .nav a {color: #333333;
}.skin-black .logo {background-color: #283744;color: #f9f9f9;
}
.skin-black .logo > a {color: #f9f9f9;
}
.skin-black .right-side > .content-header {background: #fff;box-shadow: none;
}
.skin-black .user-panel > .image > img {border: 1px solid #444;
}
.skin-black .user-panel > .info,
.skin-black .user-panel > .info > a {color: #eee;
}
.skin-black .sidebar {border-bottom: 1px solid #39435c;
}
.skin-black .sidebar > .sidebar-menu > li > .treeview-menu {margin: 0 1px;background: #35404d;
}
.skin-black .left-side {background: #39435c;padding-top: 20px;
}
.skin-black .sidebar a {color: #eee;
}
.sm-st {background: #fff;padding: 20px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;margin-bottom: 20px;-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}
.sm-block-icon {width: 60px;height: 60px;line-height: 60px;text-align: center;font-size: 30px;background: #eee;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;float: left;margin-right: 10px;color: #fff;
}
.sm-block-info {font-size: 12px;padding-top: 2px;
}
.sm-block-info span {display: block;font-size: 24px;font-weight: 600;
}
.stat-elem {background-color: #fff;padding: 18px;border-radius: 40px;
}.stat-info {text-align: center;background-color: #fff;border-radius: 5px;margin-top: -5px;padding: 8px;-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);font-style: italic;
}.stat-icon {text-align: center;margin-bottom: 5px;
}.block-red {background-color: #f05050;
}
.block-green {background-color: #27c24c;
}
.block-violet {background-color: #7266ba;
}
.block-blue {background-color: #23b7e5;
}#sidebarmenu {margin-top: 20px;line-height: 20px;
}#sidebarmenu li {color: #fff;line-height: 40px;
}
#sidebarmenu ul {padding: 0 20px;
}
.pull-left.info {margin-left: 20px;
}五、完成
js/auth.js
/*** @param {*} menuList 传入的数据* @return {*} menus 转化后的树形结构数据，auths 转化后的权限列表数组*/const getMenuListAndAuth = (menuList) => {// TODO：待补充代码const auths = dealUserAuths(menuList)const menus = dealUserMenu(menuList)return { menus, auths }; // menus 转化后的树形结构数据，auths 转化后的权限列表数组};
function dealUserMenu(users,rootId=-1){let newArr=[]users.forEach(item=>{if(rootId==item.parentId){newArr.push(item)item.children=dealUserMenu(users,item.id)}})return newArr
}
function dealUserAuths(users){let newArr=[]users.forEach(item=>{newArr.push(item.auth)})return newArr
}
