javaScript蓝桥杯----权限管理

news2024/11/28 20:54:06

目录

  • 一、介绍
  • 二、准备
  • 三、目标
  • 四、代码
  • 五、知识点
  • 六、完成

一、介绍

你有没有想过，在我们日常浏览的网页中，那些新闻或者商品内容是如何被输入到数据库中的呢？大家虽然没有用过，但是肯定听过“后台管理系统”，运营人员就是通过它将批量的商品上传到数据库并呈现在网页中的。那么随便一个人就可以通过该管理系统操作这些商品数据吗？当然不行，这就涉及到了权限管理问题。

本题需要在已提供的基础项目中使用 JS/jQuery 知识完善代码，最终实现权限管理的功能。

二、准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── 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 是需要请求的数据文件。

在浏览器中预览 index.html 页面，显示如下所示：

在这里插入图片描述

三、目标

请在 js/index.js 文件中补全代码，最终实现管理用户权限的功能。

具体需求如下：

  1. 实现异步数据读取和渲染功能。
    • 使用 ajax 异步获取 ./js/userList.json 中的用户数据，并以正确的方式显示在页面下的用户权限表格中（注意：调试完成后请将请求地址写死为 ./js/userList.json）。
    • 页面初始化时，左边用户列表显示 7 个用户（页面数据和结构不能随意篡改），右边的管理员列表无选项。效果如下：
      在这里插入图片描述
  • 点击全部移动到右/左边按钮，则将左/右边用户/管理员列表中的用户全部移动到右/左边的管理员/用户列表中（即：左/右边列表被清空）。效果如下：
    -在这里插入图片描述
    在这里插入图片描述
  1. 实现用户权限表格中的权限，随用户移动发生变化功能。
    • 页面下的用户权限表格中所有用户的权限，会根据页面上方所处列表不同发生相应改变，即管理员列表中的用户权限为管理员，用户列表中的用户权限为普通用户。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
在这里插入图片描述

四、代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>权限管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script src="./js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="left">
          <h4>用户</h4>
          <select multiple id="leftSelect">
            <option value="小花">小花</option>
            <option value="二狗">二狗</option>
            <option value="三叔">三叔</option>
            <option value="闷油瓶">闷油瓶</option>
            <option value="胡八一">胡八一</option>
            <option value="胖子">胖子</option>
            <option value="杨参谋">杨参谋</option>
          </select>
        </div>
        <div class="center">
          <a id="add">选中移动到右边</a>
          <a id="addAll">全部移动到右边</a>
          <a id="remove">选中移动到左边</a>
          <a id="removeAll">全部移动到左边</a>
        </div>
        <div class="right">
          <h4>管理员</h4>
          <select multiple id="rightSelect"></select>
        </div>
      </div>

      <table id="userList" class="user-list" cellspacing="0">
        <tr>
          <td>用户名</td>
          <td>权限</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>

js/index.js

$(function () {
  // 使用 ajax 获取 userList.json 数据并渲染到页面
  getData();

  // 为按钮添加事件
  $("#add").click(function () {
    // TODO：补充代码，实现功能
  });
  $("#addAll").click(function () {
    // TODO：补充代码，实现功能
  });
  $("#remove").click(function () {
    // TODO：补充代码，实现功能
  });
  $("#removeAll").click(function () {
    // TODO：补充代码，实现功能
  });
});

/**
 * 修改权限
 * @param {Object} right 要修改的权限
 * @param {Object} changeList 要修改权限的用户列表
 */
function changeAccess(right, changeList) {
  // TODO：补充代码，实现功能
}
// 异步获取数据
function getData() {
  // TODO：补充代码，实现功能
}

js/userList.json

[
  {
    "name": "小花",
    "right": false
  },
  {
    "name": "二狗",
    "right": false
  },
  {
    "name": "三叔",
    "right": false
  },
  {
    "name": "闷油瓶",
    "right": false
  },
  {
    "name": "胡八一",
    "right": false
  },
  {
    "name": "胖子",
    "right": false
  },
  {
    "name": "杨参谋",
    "right": false
  }
]

css/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  display: block;
  border: 1px solid #0aaef8;
  width: 135px;
  height: 30px;
  line-height: 30px;
  background-color: #0aaef8;
  color: whitesmoke;
  box-shadow: 1px 1px 10.1px #5bc5f5;
  margin-bottom: 5px;
  margin-top: 5px;
  cursor: pointer;
  border-radius: 5px;
}
.main {
  width: 600px;
  margin: 50px auto;
  color: #047aaf;
}
h4 {
  text-align: center;
  line-height: 40px;
}
select {
  width: 200px;
  height: 210px;
  border: 1px solid #0aaef8;
}
select:focus-visible {
  outline: #0aaef8 1px solid;
}
select option {
  height: 28px;
  padding: 5px;
  color: #047aaf;
  display: flex;
  align-items: center;
}
select option:hover {
  background-color: #0aaef8;
  color: #fff;
}
select option:visited {
  background-color: red;
  color: #fff;
}
.container {
  display: flex;
}
.center {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  text-align: center;
  font-size: 14px;
}
.user-list {
  border: #0aaef8 1px solid;
  width: 100%;
  margin-top: 50px;
  text-align: center;
}
.user-list td {
  font-size: 14px;
}
.user-list th,
.user-list td {
  height: 40px;
  border-bottom: 1px solid #0aaef8;
}
.user-list th:nth-child(1),
.user-list td:nth-child(1) {
  border-right: 1px solid #0aaef8;
  width: 50%;
}
.user-list tr:nth-child(1) {
  background: #0aaef8;
  color: white;
}
.user-list:last-child {
  border-bottom: none;
}

五、知识点

对于selecte组件

value属性：只记录第一个被选中的值（如果多选的情况）
selectedIndex属性：记录着第一个被选中的元素下标（如果多选的情况）
selectedOptions属性：electedOptions记录着所有被选中的元素

六、完成

js/index.js

$(function () {
  //用户列表
  leftSelect = $("#leftSelect")[0];
  //管理员列表
  const rightSelect = $("#rightSelect")[0];
  // 使用 ajax 获取 userList.json 数据并渲染到页面
  getData();
  // 为按钮添加事件
  $("#add").click(function (e) {
    // TODO：补充代码，实现功能

    const selecteds = leftSelect.selectedOptions;
    //修改权限--这里要放在前面  不然添加之后selecteds列表为空
    editPermission(selecteds);
    //更新管理员
    updateAdmin(selecteds);
  });
  $("#addAll").click(function () {
    // TODO：补充代码，实现功能
    const selecteds = leftSelect.children;
    //修改权限--这里要放在前面  不然添加之后selecteds列表为空
    editPermission(selecteds);
    //更新管理员
    updateAdmin(selecteds);
  });
  $("#remove").click(function () {
    // TODO：补充代码，实现功能
    const selecteds = rightSelect.selectedOptions;
    //修改权限--这里要放在前面  不然添加之后selecteds列表为空
    editPermission(selecteds, false);
    //更新管理员
    updateAdmin(selecteds, false);
  });
  $("#removeAll").click(function () {
    // TODO：补充代码，实现功能
    const selecteds = rightSelect.children;
    //修改权限--这里要放在前面  不然添加之后selecteds列表为空
    editPermission(selecteds, false);
    //更新管理员
    updateAdmin(selecteds, false);
  });
});

/**
 * 修改权限
 * @param {Object} right 要修改的权限
 * @param {Object} changeList 要修改权限的用户列表
 */
function changeAccess(right, changeList) {
  // TODO：补充代码，实现功能
}
// 异步获取数据
async function getData() {
  // TODO：补充代码，实现功能
  const res = await $.get("./js/userList.json");
  for (item of res) {
    const temp = `
    <td>${item.name}</td>
    <td class=${item.name}>普通用户</td>
    `;
    const tr = document.createElement("tr");
    tr.innerHTML = temp;
    $("#userList")[0].appendChild(tr);
  }
}
//修改用户权限
function editPermission(users, Controls = true) {
  for (item of users) {
    // console.log(item.value)
    $(`.${item.value}`)[0].innerHTML = Controls ? "管理员" : "普通用户";
  }
}
//添加或删除管理员
function updateAdmin(users, Controls = true) {
  //使用从后往前面添加不会造成索引丢失的问题
  for (var i = users.length - 1; i >= 0; i--) {
    //appendChild方法会将元素转移走 而不是复制一份。
    //所以不用去考虑删除的问题
    (Controls ? rightSelect : leftSelect).appendChild(users[i]);
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/626567.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从零开始的软路由之爱快虚拟机搭建openwrt

从零开始的软路由之爱快虚拟机搭建openwrt

缘起 上篇文章我们介绍了爱快软路由的搭建方法&#xff0c;成功了实现了软路由的初级布置——能上网了。接下来就是搭建双软路由中的另一个openwrt了&#xff0c;上期介绍了爱快的特点&#xff0c;主要是用来多拨&#xff0c;分流&#xff0c;流控等操作&#xff0c;在这些方面…
阅读更多...
maven 插件 assembly 打tar.gz包

maven 插件 assembly 打tar.gz包

maven 插件 assembly 打tar.gz包 一、项目目录二、pom文件1. profiles2. plugins3. resource 三、assembly.xml四、application.yml五、启动脚本1. start.sh2. stop.sh 六、执行 mvn 打包命令七、tar.gz 包上传服务器并解压八、执行 start.sh 启动脚本九、访问 swagger GitHub:…
阅读更多...
Tomcat的部署及优化(贼详细)

Tomcat的部署及优化(贼详细)

目录 一、Tomcat服务器简介 1、Tomcat服务器 2、Tomcat三大核心组件 3、 Java Servlet 4、JSP全称Java Server Pages 5、 Tomcat 功能组件结构 6、 Container 结构分析 7、Tomcat 请求过程 二&#xff1a;Tomcat部署与安装 1.关闭防火墙&#xff0c;上传所需软件包 2.安…
阅读更多...
跨部门沟通与协作迟迟进展不下去，如何有效解决问题？

跨部门沟通与协作迟迟进展不下去，如何有效解决问题？

在一个完整的项目中&#xff0c;多个专业技能版块的联动是必不可少的。然而&#xff0c;由于各个部门之间工作交集的存在&#xff0c;跨部门沟通与协作成为了必经之路&#xff0c;需要我们各部门凝聚力量&#xff0c;携手闯关。 但是&#xff0c;在工作中总会出现各种问题&…
阅读更多...
05_MySQL索引优化

05_MySQL索引优化

四种&#xff1a;1.主键 2.单值 3.唯一 4.复合 1. 性能分析&#xff08;explain&#xff09; mysql5.6以后优化器做了很多改进&#xff0c;执行时会自动进行大量的优化&#xff0c;很多现象需要在5.5才能演示成功。 1.1 explain是什么? 模拟优化器查看执行计划 使用EXPLAIN关…
阅读更多...
python基础----09-----类、对象、魔法方法、封装、继承、类型注解、多态

python基础----09-----类、对象、魔法方法、封装、继承、类型注解、多态

一 初识对象 说白了就是类的实例化&#xff0c;类是一个抽象层的定义。 例如下面class Student就是定义的一个类&#xff0c;它是抽象层&#xff0c;然后stu_1 Student()&#xff0c;我们根据类创建了一个对象&#xff0c;就是对类的实例化&#xff0c;这个实例化对象我们是可…
阅读更多...
FinalShell界面左侧为什么能够监测系统指标动态变化的原理

FinalShell界面左侧为什么能够监测系统指标动态变化的原理

前言&#xff1a; 我们可以看出FinalShell是用Java写的&#xff0c;具体怎么看出来的&#xff0c;不能光看界面logo是Java的logo&#xff0c;还要进它的安装目录下进行查看是否真是用Java编写的&#xff01;&#xff01;&#xff01; 具体查看如下&#xff1a; 查看finalshe…
阅读更多...
Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递

Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/131122772 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…
阅读更多...
如何规划和执行安全测试

如何规划和执行安全测试

如何规划和执行安全测试 在现代软件开发中&#xff0c;安全测试已经成为一个必不可少的环节。在完成软件开发后&#xff0c;需要对应用程序进行安全测试&#xff0c;以确保其可以在生产环境中正常运行并能够抵御各种安全攻击和漏洞。 如何规划和执行安全测试是一个重要的问题&a…
阅读更多...
Microsoft Excel中HYPERLINK函数的6个用途

Microsoft Excel中HYPERLINK函数的6个用途

Excel 在工具栏中提供了自己的内置链接功能。但 HYPERLINK 功能可以让你做更多的事情，比如公司内部网上的工作簿链接、共享服务器、其他驱动器，甚至 Word 文档中的书签。让我们来看看使用这个多功能功能可以做的一切。 HYPERLINK函数的6个用途 链接到电子表格中的单元格链接到…
阅读更多...
概率论：方差、标准差、协方差、皮尔逊相关系数、线性相关

概率论：方差、标准差、协方差、皮尔逊相关系数、线性相关

方差和标准差&#xff1a; 一个随机变量&#xff0c;的值的变化程度可以用方差计算&#xff1a; &#xff1b;其中 是期望。 我们举个例子&#xff1a; 服从均一分布&#xff0c;取值为0.1&#xff0c;0.2&#xff0c;0.3&#xff0c;0.4&#xff0c;0.5 &#xff0c;每种值…
阅读更多...
springboot 精华

springboot 精华

一、基础 官方文档地址&#xff1a;Spring Boot 注&#xff1a;以下部分例子 有些用到 .properties 方式&#xff0c;有些用 .yml方式&#xff0c;两者可自行学习&#xff0c;这里部分是为了省空间而写 .properties 方式。 1、泛谈 &#xff08;1&#xff09;优势 快速构建…
阅读更多...
MyBatis Plus 拦截器实现数据权限控制(完整版)

MyBatis Plus 拦截器实现数据权限控制(完整版)

一、说明 变化&#xff1a;相比于之前写的数据权限拦截器&#xff0c;新增了白名单功能&#xff0c;通过注解的方式让哪些SQL不进行数据权限拦截&#xff0c;之前的文章地址 思路&#xff1a;通过MyBatisPlus的拦截器对每个要执行的SQL进行拦截&#xff0c;然后判断其是否为查询…
阅读更多...
勒索病毒远程桌面——防御方案

勒索病毒远程桌面——防御方案

一、适用目标&#xff08;校园网、企业网&#xff0c;windows系列的操作系统&#xff09;&#xff1a; 所有在局域网内运行windows系统的电脑&#xff0c;并非只感染服务器操作系统&#xff0c;单机照样感染。会将你电脑中的所有文件全部加密&#xff0c;部分已感染案例有2个共…
阅读更多...
常见的存储类型：DAS vs SAN vs NAS

常见的存储类型：DAS vs SAN vs NAS

什么是存储 你有想过你在朋友圈分享的照片都存在哪里&#xff1f;你在视频网站上浏览的视频都存放在哪里&#xff1f;甚至&#xff0c;你在银行卡里的存款、房贷是如何随时查询、随时存取的&#xff1f; 没错&#xff0c;这些照片、视频&#xff0c;甚至你的存款、房贷的数值…
阅读更多...
机器学习-6 支持向量机

机器学习-6 支持向量机

支持向量机 算法概述算法流程线性分类线性可分性向量内积硬间隔分类软间隔SVM模型非线性支持向量机非线性的情况非线性支持向量机核函数 SVM优点 算法步骤线性可支持向量机的程序流程图SVM算法步骤 算法实例有关数据集利用Sklearn的datasets模块生成数据集其他生成数据集的方法…
阅读更多...
BIM与点云：一种基于航空LiDAR点云的大规模建筑重建

BIM与点云：一种基于航空LiDAR点云的大规模建筑重建

文章&#xff1a;City3D: Large-Scale Building Reconstruction from Airborne LiDAR Point Clouds 作者&#xff1a;Jin Huang , Jantien Stoter , Ravi Peters and Liangliang Nan 编辑&#xff1a;点云PCL 来源&#xff1a;arXiv2023 欢迎各位加入知识星球&#xff0c;获取P…
阅读更多...
GeoServer SQL注入漏洞复现（CVE-2023-25157）

GeoServer SQL注入漏洞复现（CVE-2023-25157）

0x01 产品简介 GeoServer是一款开源的地理数据服务器软件&#xff0c;主要用于发布、共享和处理各种地理空间数据。它支持众多的地图和空间数据标准&#xff0c;能够使各种设备通过网络来浏览和使用这些地理信息数据。 0x02 漏洞概述 GeoServer在预览图层的时候&#xff0c;可…
阅读更多...
Ubuntu20.04平台下使用二进制包部署MongoDB-6.0.4单实例

Ubuntu20.04平台下使用二进制包部署MongoDB-6.0.4单实例

文章目录 1.1 准备服务器的基本信息1.2 操作系统上创建其用户1.3 部署MongoDB服务端1.4 部署MongoDB客户端1.5 部署MongoDB 27017实例1.5.1 创建相关目录1.5.2 准备配置文件1.5.3 准备启停脚本1.5.4 进行启停测试1.5.5 加入开机自启动 1.6 创建超级管理员用户1.6.1 创建本地的超…
阅读更多...
do..while、while、for循环反汇编剖析

do..while、while、for循环反汇编剖析

1、循环语句重要特征提取 循环语句最重要的特点就是执行的过程中会往上跳&#xff01;&#xff01;&#xff01; 箭头往上跳的一般都是循环语句&#xff0c;比如下面的for循环&#xff1a; 2、do..while语句反汇编 #include<iostream> using namespace std; #pragma …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023