权限管理

习题链接

权限管理

任务

我们现在要完善一个对商品添加喜欢的一个模块
并且当点亮星以后，会弹出一共提示框，2s后自动消失

分类 jQuery

关键点

1. jQuery使用的ajax
   1. 通常的语法 $.ajax({配置项})
   2. 常用配置有url，method，async，success，error，complete
   3. async默认是true即异步修改为false就是同步了
   4. success等同于then,error等同于catch
   5. complete等同于finally

代码实现 && 完整的代码

1. 完成CODE

   $(function () {
   // 使用 ajax 获取 userList.json 数据并渲染到页面
   getData();
   
   // 为按钮添加事件
   $("#add").click(function () {
     // TODO：补充代码，实现功能
     let name = $('#leftSelect').val();
     name.forEach(element=> userinfo[element] = true )
     renderData(userinfo);
   });
   $("#addAll").click(function () {
     // TODO：补充代码，实现功能 
     for (const key in userinfo)  userinfo[key] = true; 
     renderData(userinfo); 
   });
   $("#remove").click(function () {
     // TODO：补充代码，实现功能
     let name = $('#rightSelect').val();
     name.forEach(element=> userinfo[element] = false )
     renderData(userinfo);
   });
   $("#removeAll").click(function () {
     // TODO：补充代码，实现功能
     for (const key in userinfo)  userinfo[key] = false; 
     renderData(userinfo); 
   });
   });
   
   /**
   * 修改权限
   * @param {Object} right 要修改的权限
   * @param {Object} changeList 要修改权限的用户列表
   */
   function changeAccess(right, changeList) {
   // TODO：补充代码，实现功能
   }
   // 异步获取数据
   function getData() {
   // TODO：补充代码，实现功能
   $.ajax({
     url:"./js/userList.json",
     async:false,
     method:'get',
     success(res){ 
        userinfo = {};
        res.forEach(element=>{ 
        userinfo[element.name] = element.right;
        })  
        renderData(userinfo);
     }
   })
   }
   function renderData(data) {
   let tmp = `<tr><td>用户名</td><td>权限</td></tr>`;
   let ltmp = "";
   let rtmp = "";
   for (const name in data) { 
     let right = data[name];
     tmp += `<tr><td>${name}</td><td>${right ? '管理员' : '普通用户'}</td></tr>`;
     right ? 
     rtmp += `<option value="${name}">${name}</option>`:
     ltmp += `<option value="${name}">${name}</option>`;
   } 
   $('#userList').html(tmp);
   $('#leftSelect').html(ltmp);
   $('#rightSelect').html(rtmp);
   }
   

哥们我要打蓝桥决赛去了，应该不会继续更新蓝桥的笔记了。