每日一题：权限管理
介绍
你有没有想过，在我们日常浏览的网页中，那些新闻或者商品内容是如何被输入到数据库中的呢？大家虽然没有用过，但是肯定听过“后台管理系统”，运营人员就是通过它将批量的商品上传到数据库并呈现在网页中的。那么随便一个人就可以通过该管理系统操作这些商品数据吗？当然不行，这就涉及到了权限管理问题。
本题需要在已提供的基础项目中使用 JS/jQuery 知识完善代码，最终实现权限管理的功能。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1
2
3
4
5
6
7
| ├── effect.gif
├── index.html
├── css
└── js
├── index.js
├── jquery-3.6.0.min.js
└── userList.json
|
其中：
effect.gif 是最终实现的效果图。index.html 是主页面。css 是样式文件夹。js/index.js 是需要补充代码的 js 文件。js/jquery-3.6.0.min.js 是 jQuery 文件。js/userList.json 是需要请求的数据文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
1
2
| cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9788/06.zip && unzip 06.zip && rm 06.zip
|
在浏览器中预览 index.html 页面，显示如下所示：
目标
请在 js/index.js 文件中补全代码，最终实现管理用户权限的功能。
具体需求如下：
- 实现异步数据读取和渲染功能。
- 使用 ajax 异步获取
./js/userList.json 中的用户数据，并以正确的方式显示在页面下的用户权限表格中（注意：调试完成后请将请求地址写死为 ./js/userList.json）。
- 页面初始化时，左边用户列表显示 7 个用户（页面数据和结构不能随意篡改），右边的管理员列表无选项。效果如下：
- 实现左/右单个、多个或全部互移功能。
- 选中任意一个或多个（按 Ctrl 键可多选）左/右边用户/管理员列表中的用户，并点击选中移动到右/左边按钮，即可将选中的用户/管理员移动至另一边的管理员/用户列表中。效果如下：
- 点击全部移动到右/左边按钮，则将左/右边用户/管理员列表中的用户全部移动到右/左边的管理员/用户列表中（即：左/右边列表被清空）。效果如下：
- 实现用户权限表格中的权限，随用户移动发生变化功能。
- 页面下的用户权限表格中所有用户的权限，会根据页面上方所处列表不同发生相应改变，即管理员列表中的用户权限为管理员，用户列表中的用户权限为普通用户。
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
规定
- 请勿修改
js/index.js 文件外的任何内容。
- 请严格按照上述要求来完成代码，页面中需要显示的文本内容，与具体说明里的内容保持一致，不要自定义，以免造成无法判题通过。
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
判分标准
- 实现异步数据读取和渲染功能，得 5 分。
- 实现左/右单个、多个或全部互移功能，得 6 分。
- 实现用户权限表格中权限变化功能，得 4 分。
总通过次数: 282 | 总提交次数: 328 | 通过率: 86%
难度: 中等 标签: 2022, 国赛, Web 前端, jQuery
题解
参考自：权限管理-鉴常明的代码
我的代码丢了，不知道去哪了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| let leftChildList = document.getElementById("leftSelect").children;
let rightChildList = document.getElementById("rightSelect").children;
let leftSelect = document.getElementById("leftSelect");
let rightSelect = document.getElementById("rightSelect");
function For(add, remove, str, right){
if(str === "one"){
for(let i = 0; i < remove.length; i++){
if(remove[i].selected){
changeAccess(right, remove[i].innerHTML)
add.appendChild(remove[i]);
i -= 1;
}
}
}else if(str === "all"){
for(let i = 0; i < remove.length; i++){
changeAccess(right, remove[i].innerHTML)
add.appendChild(remove[i]);
i -= 1;
}
}
}
$(function () {
getData();
$("#add").click(function () {
For(rightSelect, leftChildList, "one", "管理员")
});
$("#addAll").click(function () {
For(rightSelect, leftChildList, "all", "管理员")
});
$("#remove").click(function () {
For(leftSelect, rightChildList, "one", "普通用户")
});
$("#removeAll").click(function () {
For(leftSelect, rightChildList, "all", "普通用户")
});
});
function changeAccess(right, changeList) {
let tr = document.querySelectorAll("#userList tr");
for(let i = 0; i < tr.length; i++){
if(tr[i].children[0].innerHTML === changeList){
tr[i].children[1].innerHTML = right;
}
}
}
function getData() {
$.ajax({
url:"./js/userList.json",
type:"get",
success:function(data){
for(let i = 0; i < data.length; i++){
let node = document.createElement("tr");
node.innerHTML = `
<td>${data[i].name}</td>
<td>${(data[i].right)?"管理员":"普通用户"}</td>`;
document.getElementsByClassName("user-list")[0].appendChild(node)
}
}
})
}
|
