# CMS **Repository Path**: cheese-happy/cms ## Basic Information - **Project Name**: CMS - **Description**: study time - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 0 - **Created**: 2023-02-28 - **Last Updated**: 2023-03-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # CMS 进度总结和新增记录 ### 2023.02.28新增内容记录： #### 1、CMS初始化提交 #### 2、新增注册界面和登录界面的点击切换功能 通过点击显示或隐藏对应的div实现 #### 3、新增点击注册功能 一、绑定点击事件，去除默认行为 二、判断填写的账号密码是否为空 三、向服务器发送请求 四、如果请求成功，进行加载效果展示，并通过延时器进行跳转至登录界面 #### 3.1、优化调整 一、设置基地址，优化url 二、添加拦截器，增加加载效果，弹窗效果 #### 4、新增点击登录功能 一、步骤和注册功能相似 二、如果请求成功，进行加载效果展示，完成本地存储返回的token，并通过延时器进行跳转至登录主页 #### 4.1、防止未登录直接通过地址访问主页 根据本地存储的token，在主页头部添加script标签，进行本地存储token的获取判断，防止直接访问 ### 2023.03.01新增内容记录： #### 1、新增主页点击退出功能 一、点击退出后通过默认弹窗提问确认，确认返回true，反之false ```javascript if (confirm('确认退出吗？')) {...} ``` 二、确认后清除本地存储的token，再进行页面跳转 #### 2、新增主页侧边栏一级标题点击展开和收起，显示二级标题对应界面 一、获取全部一级标题元素（伪数组），遍历后绑定点击事件，点击后使其兄弟元素显示或隐藏 二、获取全部二级标题元素（伪数组），遍历后绑定点击事件，点击后通过增加删除active类使对应界面显示（方法类似于教学案例的tab栏切换） #### 3、通过 iframe 标签 进行 页面嵌套（知识点，非新增） ```HTML ``` 通过 a标签 的 target 属性值 与 iframe 标签的 name 属性值一一对应，进行 a标签链接引入，完成对应效果。不过属于是老方法了，了解即可。 另外两种就是 ajax（甚至可以传递完整的页面👍，用的少），框架（主流） #### 4、成绩录入界面数据获取和渲染 一、通过对应接口发起请求，获取对应数据 {对象} PS：发起请求时，请求头中需携带 token 进行认证 二、for...in...遍历对象进行页面结构渲染 #### 4.1、优化调整 如果每次请求都需要设置请求头携带 token，会造成重复编写代码冗余，可以放在请求拦截器内，通过拦截器在请求头中添加 token PS：不过不是每次请求都需要设置请求头携带 token（如登录、注册等），可在拦截器中进行一次判断，是否已经本地存储了token 信息，存在时再设置请求头携带 token #### 5、新增成绩项双击编辑功能 一、tbody元素 添加双击事件进行事件委托，点击成绩（类名判断）时进行下一步 二、点击成绩后新增输入框，输入框填入被点击的成绩，插入被点击的标签，并增加焦点，此时可以编辑输入框内的成绩信息 #### 6、新增编辑后，失去焦点完成修改和提示 一、给输入框增加失去焦点事件 二、失去焦点后获取修改的成绩，以及接口文档要求的信息发起修改请求，并根据返回的结果进行弹框提示，并重新渲染页面 #### 7、新增编辑后，点击回车键完成修改和提示 一、给输入框增加键盘抬起事件，判断一下key是否为回车 二、通过回车键后，重复之前失去焦点后的效果 #### 7.1、优化调整 一、将执行的修改和提示效果进行函数封装，在失去焦点和键盘抬起时进行调用 二、由于键盘抬起，也会触发失去焦点，导致修改提示效果会执行两次，因此在键盘抬起后，还需要进行失焦事件解绑操作 ```javascript input.addEventListener('blur', change); input.addEventListener('keyup', e => { if (e.key === 'Enter') { input.removeEventListener('blur', change); change(); } }) ``` ### 2023.03.03新增内容记录（查增改）： #### 1、学员信息界面获取并渲染（查） 一、通过对应接口发起请求，获取对应数据 [{数组对象}] PS：发起请求时，请求头中需携带 token 进行认证（请求拦截器内设置） 二、再通过 map + 解构对象 + join 进行页面渲染（reduce也行） #### 2、籍贯 省、市、县/区 下拉框信息填充 一、通过三个对应的接口发起请求，获取省、市、县/区列表信息[数组] 二、给省、市的 select 标签添加 change 事件 三、然后将获取的市、县/区信息通过 reduce 拼接渲染进对应 select 标签下，放在对应 change 事件下，使 市、县/区 受省、市变更而更改 #### 2.1、优化调整 一、获取省、市、县/区列表信息[数组] 以及渲染，存在四处不同，其余一致 使用函数封装，设置四个参数 url, params, text, target ```javascript async function getData(url, params, text, target) { const res = await axios({ url, params }) // console.log(res.data); // 验证信息是否成功获取 target.innerHTML = res.data.reduce((beforeHTML, item) => { return beforeHTML + `` }, ``) } ``` 然后通过传不同的参数，获取到对应的信息 PS：注意异步函数的使用 #### 3、新增添加学员功能（增） 一、获取添加按钮元素，添加点击事件 二、点击后修改模态框标题、设置模态框弹出，重置表单 三、通过 serialize 获取模态框 form 表单信息 ```javascript const data = serialize(form, { hash: true, empty: true }) // hash: true 使获取的信息以对象形式存储，反之为键值对&存储 a=1&b=2... // empty 可以使 serialize 获取表单空值 ``` 四、通过for...in...遍历对象，判断表单信息是否有空值 五、通过对应接口请求添加数据 六、添加完成后渲染页面，关闭模态框，重置表单（记录的两种方法效果一致） ```javascript city.innerHTML = ''; city.innerHTML = county.firstChild.outerHTML; // 重置市级下拉框 county.innerHTML = ''; county.innerHTML = county.firstChild.outerHTML; // 重置县级下拉框 ``` #### 4.1、新增编辑学员信息功能（改） 一、tbody元素 添加点击事件进行事件委托，点击编辑（类名判断）时进行下一步 二、点击后修改模态框标题、设置模态框弹出 三、通过接口获取学员信息{对象} 四、将对象属性值（预编辑内容）填入模态框表单，由于表单中包含，输入框，单选项，下拉框，需要对对象属性值拆分处理（下拉框需要进行渲染填充）： ```JavaScript const studentObj = res.data.data; // 拿到学生数据（对象） await getData('/geo/city', { pname: studentObj.province, }, '市', city); // 渲染下拉框内容 await getData('/geo/county', { pname: studentObj.province, cname: studentObj.city }, '县', county); // 渲染下拉框内容 for (const key in studentObj) { const studentInfo = document.querySelector(`[name=${key}]`); if (studentInfo && key !== 'sex') { studentInfo.value = studentObj[key]; } } document.querySelector(`[name=sex][value=${studentObj.sex}]`).checked = true; ``` #### 4.2、新增编辑学员信息功能（改） 一、编辑完成后，通过 serialize 获取模态框 form 表单信息 二、通过for...in...遍历对象，判断表单信息是否有空值 三、通过对应接口请求修改数据 PS：注意请求传值需要有 id，因此在渲染编辑按钮时添加自定义属性记录点击的 id，然后通过开头 let 声明 id，使 id 作用域升至全局，以便在发送请求时使用。 四、修改完成后渲染页面，关闭模态框，提示修改成功，重置表单 #### 5.tips 新增和编辑使用同一个 form 表单的话，在点击确认提交时，需要判断是在哪一个 form 表单下进行提交 ### 2023.03.04新增内容记录（删）： #### 1、优化调整 ##### 一、隐藏域（知识点，非功能新增） 此前发起请求需要传递 id 时，需要通过提升 id 的作用域进行赋值使用，目前可以通过在 HTML 结构中 form 标签下 添加如下代码： ```html ``` 新增一个隐藏的input框，便于通过 批量抓取 信息时 获得对于 id 值 快捷输入方法： ```html input:hidden ``` PS：批量抓取后，若遇到无需传递 id 的情况，需要留意将抓取对象中的 id 属性进行 delete 删除处理，再进行请求发起 ##### 二、使用 form 表单外的 button 按钮，控制 form 表单提交（知识点，非功能新增） 需要在 HTML 在 HTML 结构中 form 标签中添加 id 属性，同时在 form 标签外的 button 标签中 添加 form 属性，且等于 form 标签中 id 属性的值，以此来达到联动控制的效果，代码范例如下： ```html
``` #### 2、新增学员删除功能（删） 一、tbody元素 添加点击事件进行事件委托，点击删除（类名判断）时进行下一步 二、通过默认弹窗提问进行是否删除确认 三、若确认删除，发送删除请求，根据请求返回信息提示删除成功，并重新渲染页面。 #### 3、echarts学习 官网：https://echarts.apache.org/zh/index.html 一种数据可视化图表库，酷炫时间！！！ 根据快速入门完成，基础设置： 1. 引入对应下载的 js 文件 2. 设置需要放置对应图表的元素 3. 复制对应的图表效果结构，然后根据文档说明，或者直接看相关效果实例，进行增删查改，以此来达到自身需求的效果 PS：要精通 echarts 不是什么简单的事情（要谦虚），多数实用场景为数据分析或调研等。（主观判断：展现效果 薄纱 office图表） #### 4、新增学员薪资可视化图表 根据第 3 点 操作完成，如下效果，并放置在页面对应位置 ![](./image/salaryLine.png) #### 5、新增学员籍贯可视化信息 根据第 3 点 操作完成，如下效果，并放置在页面对应位置 ![](./image/pie.png) PS：在实现南丁格尔玫瑰图时，传入图表的数据[{数组对象}]，需要对返回的籍贯信息进行分类筛选统计 判断操作如下： ```JavaScript // provinceList 为已经处理过的籍贯省份数组 let provinceData = []; provinceList.forEach(item => { // console.log(item); // 测试遍历是否成功 // 1、判断 item 对应省份数据 有没有在 provinceData 中定义过 const index = provinceData.findIndex((v) => v.name === item); // 2、没有定义过 - 给 provinceData 添加一个新的元素 {name:item,value:1} if (index === -1) { provinceData.push({ value: 1, name: item }); } else { // 3、定义过 - 找到 item 对应 数据在数组的哪个位置 provinceData[index].value++ provinceData[index].value++; } }); console.log(provinceData); ```