数据管理平台项目

业务1-登录验证

---

功能： 完成验证码登录，后端设置验证码默认为：246810

代码步骤：

1. 在utils/request.js配置 axios 请求基地址，提取公共前缀地址，配置后axios请求时都会baseURL + url。
2. 收集手机号码验证数据
3. 基于axios调用验证码登录接口
4. 使用Bootstrap的Alert警告框反馈结果给用户.

---

##### 业务代码

1. 在utils/request.js配置 axios 请求基地址，提取公共前缀地址，配置后axios请求时都会baseURL + url。

// axios 公共配置
// 基地址
axios.defaults.baseURL = 'http://geek.itheima.net'

2. 收集手机号码验证数据

document.querySelector('.btn').addEventListener('click', () => {const form = document.querySelector('.login-form')const data = serialize(form ,{hash: true, empty: true})console.log(data)

3. 基于axios调用验证码登录接口

    // 1.3 基于 axios 调用验证码登录接口axios({url: '/v1_0/authorizations',method: 'POST',data}).then(result => {console.log(result)//  1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户// 自己封装好了一个弹框插件，直接调用即可myAlert(true,'登录成功')}).catch(error => {console.dir(error.response.data.message)myAlert(false,error.response.data.message)})
})

4. 自己封装好的弹框插件

// 弹窗插件
// 需要先准备 alert 样式相关的 DOM
/*** BS 的 Alert 警告框函数，2秒后自动消失* @param {*} isSuccess 成功 true，失败 false* @param {*} msg 提示消息*/
function myAlert(isSuccess, msg) {const myAlert = document.querySelector('.alert')myAlert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')myAlert.innerHTML = msgmyAlert.classList.add('show')setTimeout(() => {myAlert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')myAlert.innerHTML = ''myAlert.classList.remove('show')}, 2000)
}

---

验证码登录流程

1. 输入手机号，点击发送验证码。
2. 携带手机号，调用服务器发送短信验证码接口
3. 为此手机号生成验证码，记录生成的时间，并存在服务器
4. 服务器携带手机号，验证码调用运营商接口
5. 运营商通过基站给指定的手机号，发送验证码短信
6. 运营商返回结果响应给服务端发送成功
7. 服务端在将响应的结果返回给前端
8. 根据手机短信填入验证码
9. 在此携带手机号，验证码，调用验证码登录接口
10. 服务器接收手机号和验证码，与之前用户输入的的记录对比，并且判断是否在有效期内。从而得出是否能够登录成功。

---

token 技术

---

token（访问权限的令牌），本质上是一串字符串

创建： 在正确的登录后，由后端签发并返回。

作用：判断是否有登录状态，控制访问权限。

---

token的使用

---

在登录状态时，是否能够访问内容页面

目标1：访问权限控制

代码步骤

1. 判断无 token 令牌字符串，则强制跳转到登录页·

const token = localStorage.getItem('token')
if(!token) {location.href = '../login/index.html'
}

---

2. 登录成功后，保存 token 令牌字符串到本地，并跳转到内容列表页面

localStorage.setItem('token',result.data.data.token)

然后通过令牌跳转页面

// 延迟时间跳转,停留提示后
setTimeout(() => {
// 登录成功能够通过令牌权限后，进行跳转到内容页location.href = '../content/index.html'},1500)

---

axios 请求拦截器

---

axios请求拦截器：在发起请求之前，触发的配置函数，对请求参数进行额外的配置。

语法

问题：很多接口都需要携带 token 令牌字符串。

解决：在请求拦截器统一设置公共样式headers选项。

axios({//因为我们给axios配置了基地址url: '目标资源路径',headers: {Authorization:`Bearer${localStorage.getItem('token')}`}
})

---

代码示例

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 统一携带  token  令牌字符串在请求头上const token = localStorage.getItem('token')// 本地有token的话，则在配置对象中配置token令牌权限token && (config.headers.Authorization = `Bearer ${token}`)return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);}); 

---

axios响应拦截器

---

axios 响应拦截器：响应回到then / catch之前， 触发的拦截函数，对响应结果统一处理

---

例如身份验证失败，统一做出判断并处理（身份验证失败，我们就直接就将关闭权限）

---

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么，例如401 身份验证失败情况做出处理console.dir(error)if (error?.response?.status === 401) {alert('身份验证失败，请重新登录')localStorage.clear()location.href = '../login/index.html'}return Promise.reject(error);
});

对响应的结果做出处理

---

优化axios响应结果

---

axios直接接受服务器返回的响应结果

    // 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么.例如：直接返回服务器的响应结果对象const result = response.datareturn result;

这样result === response.data 我们再写的时候可以省略这部分。

---

发布文章-富文本编辑器

---

富文本：带样式，多格式的文本，在前端一般使用标签配合内联样式实现。

1. 准备HTML标签结构

                <!-- 富文本编辑器位置 --><div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container"><!-- 编辑器 --></div></div><!-- 记录富文本内容-用于表单收集 --><textarea name="content" class="publish-content" hidden></textarea>

2. 引入对应的js和css的插件
3. 在准备相应的样式
4. 根据文档引入核心的js代码

文档：https://www.wangeditor.com/

---

发布文章-频道列表

---

步骤

1. 获取频道列表数据
2. 展示到下拉菜单中

代码示例

// 1.1 获取频道列表数据
async function setChannleList() {const res = await axios({url: '/v1_0/channels'})console.log(res)// 1.2 展示到下拉菜单中const htmlStr = `<option value="" selected="">请选择文章频道</option>` + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')console.log(htmlStr)document.querySelector('.form-select').innerHTML = htmlStr
}
setChannleList()

事先考虑是否需要复用，需要则使用函数配和async和await来修饰。

---

发布文章-封面设置

---

步骤：

1. 准备标签结构样式
2. 选择文件并保存在FormData
3. 单独好上传图片并得到图片url地址
4. 回显并切换img标签展示（隐藏 + 号 上传标签）

注意：图片地址临时存储在img标签上，并未和文章关联保存。

---

// 2.1 准备标签结构和样式
// 2.2 选择文件并保存在 FormData
document.querySelector('.img-file').addEventListener('change',async e => {const file = e.target.files[0]const fd = new FormData()fd.append('image',file)// 2.3 单独上传图片并得到图片 URL 网址const res = await axios({url: '/v1_0/upload',method: 'POST',data: fd})console.log(res)// 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）const imgURL = res.data.urldocument.querySelector('.rounded').src = imgURL// 显示图片，添加showdocument.querySelector('.rounded').classList.add('show')// 隐藏基础的 + 号 上传标签 添加hide类document.querySelector('.place').classList.add('hide')
})// 优化：点击 img 可以重新切换封面
// 思路：img 点击  => 用 js 方式触发文件选择元素  click  事件方法
document.querySelector('.rounded ').addEventListener('click', () => {// 调用click()方法可以模拟用户触发该类绑定的点击事件。通过调用click()方法，就相当于以编程方式触发了与该类相关联的点击事件。document.querySelector('.img-file').click()
})

---

发布文章-收集并保存

---

步骤：

1. 基于 form-serialize 插件收集表单数据对象
2. 基于 axios 提交到服务器保存
3. 调用 Alert 警告框反馈结果给用户
4. 置表单并跳转到列表页

---

// 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector('.send').addEventListener('click', async e => {const form = document.querySelector('.art-form')const data = serialize(form, { hash: true, empty: true })//发布文章的时候才不需要  id  属性，所以可以删除掉（id 为了后续做编辑使用）delete data.idconsole.log(data)// 自己收集封面图片地址，并保存到  data  对象中data.cover = {type: 1,images: [document.querySelector('.rounded').src]}// 3.2 基于 axios 提交到服务器保存try {const result = await axios({url: '/v1_0/mp/articles',method: 'POST',data})// 3.3 调用 Alert 警告框反馈结果给用户myAlert(true, '发布成功')// 3.4 重置表单并跳转到列表页form.reset()// 封面需要手动重置document.querySelector('.rounded').src = ''document.querySelector('.rounded').classList.remove('show')document.querySelector('.place').classList.remove('hide')// 富文本编辑器editor.setHtml('')setTimeout(() => {location.href = '../content/index.html'},1500)} catch(error) {myAlert(false, error.response.data.message)}
})

---

内容管理-文章列表展示

---

实现步骤：

* 1.1 准备查询参数对象

* 1.2 获取文章列表数据

* 1.3 展示到指定的标签结构中

注意：查询参数不能封装到函数里面，因为他不是永远固定的，然后再将获取和渲染封装到函数里面，后面很多操作都需要使用到获取和渲染，方便我们操作，下次直接调用函数即可。

代码示例

// 1.1 准备查询参数对象
const queryObj = {status: '',   //文章的状态    （1-待审核   2-通过审核   ）  空字符串全部channel_id: '',  //文章频道， id  空字符串全部page: 1,   //当前页码per_page: 2     //当前页面的条数
}
// 1.2 获取文章列表数据
async function setArtileList() {const res = await axios({url: '/v1_0/mp/articles',params: queryObj})console.log(res)// 1.3 展示到指定的标签结构中const htmlStr = res.data.results.map(item => `<tr><td><img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500"` : item.cover.images[0]} alt=""></td><td>${item.title}</td><td>${item.status === 1 ? `<span class="badge text-bg-success">待审核</span>` : `<span class="badge text-bg-primary">审核通过</span>`}</td><td><span>${item.pubdate}</span></td><td><span>${item.read_count}</span></td><td><span>${item.comment_count}</span></td><td><span>${item.like_count}</span></td><td><i class="bi bi-pencil-square edit"></i><i class="bi bi-trash3 del"></i></td></tr>`).join('')document.querySelector('.art-list').innerHTML = htmlStr
}
setArtileList()

---

内容管理-筛选功能

---

1. * 2.1 设置频道列表数据

   * 2.2 监听筛选条件改变，保存查询信息到查询参数对象

   * 2.3 点击筛选时，传递查询参数对象到服务器

   * 2.4 获取匹配数据，覆盖到页面展示

代码示例

// 2.1 设置频道列表数据
async function setChannleList() {const res = await axios({url: '/v1_0/channels'})console.log(res)// 1.2 展示到下拉菜单中 const htmlStr = `<option value="" selected="">请选择文章频道</option>` + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')console.log(htmlStr)document.querySelector('.form-select').innerHTML = htmlStr
}
setChannleList()// 2.2 监听筛选条件改变，保存查询信息到查询参数对象
// 筛选状态标记数字 -> change 事件   -> 绑定到查询参数对象上
document.querySelectorAll('.form-check-input').forEach(radio => {radio.addEventListener('change', e => {queryObj.status = e.target.value})
})
// 筛选频道的 id  -> change 事件 -> 绑定到查询参数对象上
document.querySelector('.form-select').addEventListener('change', e => {queryObj.channel_id = e.target.value
})// 2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', () => {// 2.4 获取匹配数据，覆盖到页面展示setArtileList()
})

---

内容管理-分页功能

---

* 3.1 保存并设置文章总条数

* 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据

* 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据

* 3.1 保存并设置文章总条数

let totalCount = 0   //保存文章总条数  
// 3.1 保存并设置文章总条数const totalStr = totalCount = res.data.total_count// 将获取到的返回数据个数插入到页面中document.querySelector('.total-count').innerHTML = `共${totalStr}条`

// 3.1 保存并设置文章总条数//  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', () => {// 当前页码小于最大页码数才能翻页if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {// 当前页增加queryObj.page++document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`// 调用函数，渲染最新数据setArtileList()}
})
//  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.page-link').addEventListener('click', () => {// 判断当前页码大于1的时候才能够执行if (queryObj.page > 1) {queryObj.page--document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`// 调用函数，渲染最新数据setArtileList()}
})

---

内容管理-删除功能

---

• 4.1 关联文章 id 到删除图标
• 4.2 点击删除时，获取文章 id
• 4.3 调用删除接口，传递文章 id 到服务器
• 4.4 重新获取文章列表，并覆盖展示
• 4.5 删除最后一页的最后一条，需要自动向前翻页

// 4.1 关联文章 id 到删除图标<td data-id="${item.id}"><i class="bi bi-pencil-square edit"></i><i class="bi bi-trash3 del"></i></td>
//  4.2 点击删除时，获取文章 id
document.querySelector('.art-list').addEventListener('click',async e => {//判断点击的是否为删除元素if (e.target.classList.contains('del')) {const delId = e.target.parentNode.dataset.idconsole.log(delId)// 4.3 调用删除接口，传递文章 id 到服务器const res = await axios({url: `/v1_0/mp/articles/${delId}`,method: 'DELETE',})// 4.5 删除最后一页的最后一条，需要自动向前翻页const children = document.querySelector('.art-list').childrenif (children.length === 1 && queryObj.page !== 1) {queryObj.page--document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`}// 4.4 重新获取文章列表，并覆盖展示setArtileList()}})

---

内容管理-编辑文章

---

\* 4.1 页面跳转传参（URL 查询参数方式）

* 4.2 发布文章页面接收参数判断（共用同一套表单）

* 4.3 修改标题和按钮文字

* 4.4 获取文章详情数据并回显表单

---

//跨页面传参  传递id值// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去(使用事件委托)
document.querySelector('.art-list').addEventListener('click', e => {// 判断用户点击的是哪一个标签对象if (e.target.classList.contains('edit')) {// 拿到事件对象父级中的自定义属性 id值const artId = e.target.parentNode.dataset.idlocation.href = `../publish/index.html?id=${artId}`}
})

// 4.1 页面跳转传参（URL 查询参数方式）     立即执行函数，自己调用自己，防止变量污染
;(function () {// console.log(location.search)//查看查询参数字符串，就是?号后面的// 4.2 发布文章页面接收参数判断（共用同一套表单）const paramsStr = location.searchconst params = new URLSearchParams(paramsStr)       //分隔网址后面的查询参数params.forEach(async (value,key) => {// console.log(value,key)// 4.3 修改标题和按钮文字if (key === 'id') {// 当前有要编辑的文章 id 被传入过来document.querySelector('.title span').innerHTML = '修改文章'document.querySelector('.send').innerHTML = '修改'// 4.4 获取文章详情数据并回显表单const res = await axios({url: `/v1_0/mp/articles/${value}`,})console.log(res)// ***组织我需要的数据对象，我后续遍历回显到页面上做铺垫const dataObj = {channel_id: res.data.channel_id,title: res.data.title,rounded: res.data.cover.images[0],//封面图content: res.data.content,id: res.data.id}// ***遍历数据对象属性，映射到页面元素上，快速赋值Object.keys(dataObj).forEach(key => {console.log(key)if (key === 'rounded') {// 封面设置if (dataObj[key]) {document.querySelector('.rounded').src = dataObj[key]document.querySelector('.rounded').classList.add('show')document.querySelector('.place').classList.add('hide')} } else if (key === 'content') {// 富文本内容editor.setHtml(dataObj[key])} else {// 用数据对象属性名，作为标签 name 属性选择器值来找到匹配的标签document.querySelector(`[name=${key}]`).value = dataObj[key]}})}})})();

---

内容管理-编辑-保存文章

---

* 5.1 判断按钮文字，区分业务（因为共用一套表单）

* 5.2 调用编辑文章接口，保存信息到服务器

* 5.3 基于 Alert 反馈结果消息给用户

---

document.querySelector('.send').addEventListener('click', async e => {// 5.1 判断按钮文字，区分业务（因为共用一套表单）if (e.target.innerHTML !== '修改') return// 修改文章逻辑// 5.2 调用编辑文章接口，保存信息到服务器try {const form = document.querySelector('.art-form')const data = serialize(form, { hash: true, empty: true })console.log(data)const res = await axios({url: `/v1_0/mp/articles/${data.id}`,method: 'PUT',data: {...data,cover: {type: document.querySelector('.rounded').src ? 1 : 0,images: [document.querySelector('.rounded').src]}}})console.log(res)myAlert(true,'修改文章成功')} catch (error) {myAlert(false,'error.response.data.message')}
})

---

退出登录

---

\* 3.1 绑定点击事件

* 3.2 清空本地缓存，跳转到登录页面

// 3.1 绑定点击事件
document.querySelector('.quit').addEventListener('click', e => {// 3.2 清空本地缓存，跳转到登录页面localStorage.clear()location.href = '../login/index.html'
})