目录
项目介绍
黑马头条-数据管理平台:对IT资讯移动网站的数据，进行数据管理
数据管理平台-演示：配套代码在本地运行
移动网站-演示：http://geek.itheima.net/
功能
- 登录和权限判断
- 查看文章内容列表(筛选，分页)
- 编辑文章(数据回显)
- 删除文章
- 发布文章(图片上传，富文本编辑器)
总结：
1. 黑马头条-数据管理平台，是什么样网站，要完成哪些功能?
- 数据管理网站， 登录后对数据进行增删改查
2. 数据管理平台，未登录能否管理数据?
- 不能，数据是公司内部的，需账号登录后管理
项目准备
技术
- 基于Bootstrap搭建网站标签和样式
- 集成wangEditor插件实现富文本编辑器
- 使用原生JS完成增删改查等业务
- 基于axios与黑马头条线上接口交互
- 使用axios拦截器进行权限判断
项目准备：准备配套的素材代码
包含：html，CSS，js，静态图片，第三方插件等等
目录管理：建议这样管理，方便查找
- assets：资源文件夹(图片，字体等)
- lib：资料文件夹( 第三方插件,例如：form-serialize )
- page：页面文件夹
- utils：实用程序文件夹(工具插件)
总结：
1. 为什么要按照一定的结构，管理代码文件?
- 方便以后的查找和扩展
验证码
验证码登录
目标：完成验证码登录，后端设置验证码默认为246810
原因：因为短信接口不是免费的，防止攻击者恶意盗刷
步骤：
1. 在utils/request.js配置axios请求基地址
- 作用:提取公共前缀地址,配置后axios请求时都会baseURL + url
2. 收集手机号和验证码数据
3. 基于axios调用验证码登录接口
4. 使用Bootstrap的Alert警告框反馈结果给用户
验证码登录-流程
手机号+验证码，登录流程：
关于token
token的介绍
概念：访问权限的令牌，本质上是一串字符串
创建：正确登录后，由后端签发并返回
作用：判断是否有登录状态等，控制访问权限
注意：前端只能判断token有无，而后端才能判断token的有效性
token的使用
目标：只有登录状态，才可以访问内容页面
步骤：
- 在utils/auth.js 中判断无token令牌字符串，则强制跳转到登录页(手动修改地址栏测试)
- 在登录成功后，保存token令牌字符串到本地，再跳转到首页(手动修改地址栏测试)
总结：
1. token的作用?
- 判断用户是否有登录状态等
2. token的注意:
- 前端只能判断token的有无
- 后端通过解密可以提取token字符串的原始信息，判断有效性
/**
* 目标1：验证码登录
* 1.1 在 utils/request.js 配置 axios 请求基地址
* 1.2 收集手机号和验证码数据
* 1.3 基于 axios 调用验证码登录接口
* 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
*/
// 1.2 收集手机号和验证码数据
document.querySelector('.btn').addEventListener('click', () => {
const form = document.querySelector('.login-form')
const data = serialize(form, { hash: true, empty: true })
console.log(data)
// 1.3 基于 axios 调用验证码登录接口
axios({
url: '/v1_0/authorizations',
method: 'POST',
data
}).then(result => {
// 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
myAlert(true, '登录成功')
console.log(result)
// 登录成功后，保存 token 令牌字符串到本地，并跳转到内容列表页面
localStorage.setItem('token', result.data.token)
setTimeout(() => {
// 延迟跳转，让 alert 警告框停留一会儿
location.href = '../content/index.html'
}, 1500)
}).catch(error => {
myAlert(false, error.response.data.message)
console.dir(error.response.data.message)
})
})个人信息设置
个人信息设置和axios请求拦截器
需求：设置用户昵称
语法：axios 可以在headers选项传递请求头参数
问题：很多接口，都需要携带token令牌字符串
解决：在请求拦截器统一设置公共headers选项
axios请求拦截器：发起请求之前，触发的配置函数，对请求参数进行额外配置
总结：
1. 什么是axios请求拦截器?
- 发起请求之前，调用的一个函数，对请求参数进行设置
2. axios 请求拦截器，什么时候使用?
- 有公共配置和设置时，统一-设置在请求拦截器中
axios响应拦截器和身份验证失败
axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应结果统一处理
例如：身份验证失败，统一判断并做处理
// axios 公共配置
// 基地址
axios.defaults.baseURL = 'http://geek.itheima.net'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 统一携带 token 令牌字符串在请求头上
const token = localStorage.getItem('token')
token && (config.headers.Authorization = `Bearer ${token}`)
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
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);
});总结：
1. 什么是axios响应拦截器?
- 响应回到then/catch之前，触发的拦截函数，对响应结果统一处理
2. axios 响应拦截器，什么时候触发成功/失败的回调函数?
- 状态为2xx触发成功回调，其他则触发失败的回调函数
优化-axios响应结果
目标：axios直接接收服务器返回的响应结果
// axios 公共配置
// 基地址
axios.defaults.baseURL = 'http://geek.itheima.net'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 统一携带 token 令牌字符串在请求头上
const token = localStorage.getItem('token')
token && (config.headers.Authorization = `Bearer ${token}`)
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么，例如：直接返回服务器的响应结果对象
const result = response.data
return result;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么，例如：统一对 401 身份验证失败情况做出处理
console.dir(error)
if (error?.response?.status === 401) {
alert('身份验证失败，请重新登录')
localStorage.clear()
location.href = '../login/index.html'
}
return Promise.reject(error);
});
发布文章
发布文章-富文本编辑器
富文本：带样式，多格式的文本，在前端一般使用标签配合内联样式实现
富文本编辑器：用于编写富文本内容的容器
目标：发布文章页，富文本编辑器的集成
使用：wangEditor 插件
步骤：参考文档
- 引入CSS定义样式
- 定义HTML结构
- 引入JS创建编辑器
- 监听内容改变，保存在隐藏文本域(便于后期收集)
// 富文本编辑器
// 创建编辑器函数，创建工具栏函数
const { createEditor, createToolbar } = window.wangEditor
// 编辑器配置对象
const editorConfig = {
// 占位提示文字
placeholder: '发布文章内容...',
// 编辑器变化时回调函数
onChange(editor) {
// 获取富文本内容
const html = editor.getHtml()
// 也可以同步到 <textarea>
// 为了后续快速收集整个表单内容做铺垫
document.querySelector('.publish-content').value = html
}
}
// 创建编辑器
const editor = createEditor({
// 创建位置
selector: '#editor-container',
// 默认内容
html: '<p><br></p>',
// 配置项
config: editorConfig,
// 配置集成模式（default 全部）（simple 简洁）
mode: 'default', // or 'simple'
})
// 工具栏配置对象
const toolbarConfig = {}
// 创建工具栏
const toolbar = createToolbar({
// 为指定编辑器创建工具栏
editor,
// 工具栏创建的位置
selector: '#toolbar-container',
// 工具栏配置对象
config: toolbarConfig,
// 配置集成模式
mode: 'default', // or 'simple'
})发布文章-频道列表
目标：展示频道列表，供用户选择
步骤：
- 获取频道列表数据
- 展示到下拉菜单中
/**
* 目标1：设置频道下拉菜单
* 1.1 获取频道列表数据
* 1.2 展示到下拉菜单中
*/
// 1.1 获取频道列表数据
async function setChannleList() {
const res = await axios({
url: '/v1_0/channels'
})
// 1.2 展示到下拉菜单中
const htmlStr = `<option value="" selected="">请选择文章频道</option>` + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
document.querySelector('.form-select').innerHTML = htmlStr
}
// 网页运行后，默认调用一次
setChannleList()发布文章-封面设置
目标：文章封面的设置
步骤：
- 准备标签结构和样式
- 选择文件并保存在FormData
- 单独上传图片并得到图片URL地址
- 回显并切换img标签展示(隐藏+号上传标签)
注意：图片地址临时存储在img标签上，并未和文章关联保存
/**
* 目标2：文章封面设置
* 2.1 准备标签结构和样式
* 2.2 选择文件并保存在 FormData
* 2.3 单独上传图片并得到图片 URL 网址
* 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
*/
// 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
})
// 2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
const imgUrl = res.data.url
document.querySelector('.rounded').src = imgUrl
document.querySelector('.rounded').classList.add('show')
document.querySelector('.place').classList.add('hide')
})
// 优化：点击 img 可以重新切换封面
// 思路：img 点击 => 用 JS 方式触发文件选择元素 click 事件方法
document.querySelector('.rounded').addEventListener('click', () => {
document.querySelector('.img-file').click()
})发布文章-收集并保存
目标：收集文章内容，并提交保存
步骤：
- 基于form-serialize插件收集表单数据对象
- 基于axios提交到服务器保存
- 调用Alert警告框反馈结果给用户
- 重置表单并跳转到列表页
/**
* 目标3：发布文章保存
* 3.1 基于 form-serialize 插件收集表单数据对象
* 3.2 基于 axios 提交到服务器保存
* 3.3 调用 Alert 警告框反馈结果给用户
* 3.4 重置表单并跳转到列表页
*/
// 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector('.send').addEventListener('click', async e => {
if (e.target.innerHTML !== '发布') return
const form = document.querySelector('.art-form')
const data = serialize(form, { hash: true, empty: true })
// 发布文章的时候，不需要 id 属性，所以可以删除掉（id 为了后续做编辑使用）
delete data.id
console.log(data)
// 自己收集封面图片地址并保存到 data 对象中
data.cover = {
type: 1, // 封面类型
images: [document.querySelector('.rounded').src] // 封面图片 URL 网址
}
// 3.2 基于 axios 提交到服务器保存
try {
const res = await axios({
url: '/v1_0/mp/articles',
method: 'POST',
data: 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 准备查询参数对象
* 1.2 获取文章列表数据
* 1.3 展示到指定的标签结构中
*/
// 1.1 准备查询参数对象
const queryObj = {
status: '', // 文章状态（1-待审核，2-审核通过）空字符串-全部
channel_id: '', // 文章频道 id，空字符串-全部
page: 1, // 当前页码
per_page: 2 // 当前页面条数
}
let totalCount = 0 // 保存文章总条数
// 获取并设置文章列表
async function setArtileList() {
// 1.2 获取文章列表数据
const res = await axios({
url: '/v1_0/mp/articles',
params: queryObj
})
// 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&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500`: item.cover.images[0]}" alt="">
</td>
<td>${item.title}</td>
<td>
${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</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 data-id="${item.id}">
<i class="bi bi-pencil-square edit"></i>
<i class="bi bi-trash3 del"></i>
</td>
</tr>`).join('')
document.querySelector('.art-list').innerHTML = htmlStr
// 3.1 保存并设置文章总条数
totalCount = res.data.total_count
document.querySelector('.total-count').innerHTML = `共 ${totalCount} 条`
}
setArtileList()内容管理-筛选功能
目标：根据筛选条件，获取匹配数据展示
步骤：
- 设置频道列表数据
- 监听筛选条件改变，保存查询信息到查询参数对象
- 点击筛选时，传递查询参数对象到服务器
- 获取匹配数据，覆盖到页面展示
/**
* 目标2：筛选文章列表
* 2.1 设置频道列表数据
* 2.2 监听筛选条件改变，保存查询信息到查询参数对象
* 2.3 点击筛选时，传递查询参数对象到服务器
* 2.4 获取匹配数据，覆盖到页面展示
*/
// 2.1 设置频道列表数据
async function setChannleList() {
const res = await axios({
url: '/v1_0/channels'
})
const htmlStr = `<option value="" selected="">请选择文章频道</option>` + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
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：分页功能
* 3.1 保存并设置文章总条数
* 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
* 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
*/
// 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', e => {
// 当前页码小于最大页码数
if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
queryObj.page++
document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
setArtileList()
}
})
// 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', e => {
// 大于 1 的时候，才能翻到上一页
if (queryObj.page > 1) {
queryObj.page--
document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
setArtileList()
}
})内容管理-删除功能
目标：完成删除文章功能.
步骤：
- 关联文章id到删除图标
- 点击删除时，获取文章id
- 调用删除接口，传递文章id到服务器
- 重新获取文章列表，并覆盖展示
内容管理-删除最后一条
目标：在删除最后一页，最后一条时有Bug
解决：
- 删除成功时，判断DOM元素只剩一条，让当前页码page--
- 注意，当前页码为1时不能继续向前翻页
- 重新设置页码数,获取最新列表展示
内容管理-编辑文章-回显
目标：编辑文章时，回显数据到表单
步骤：
- 页面跳转传参(URL 查询参数方式)
- 发布文章页面接收参数判断(共用同一套表单)
- 修改标题和按钮文字
- 获取文章详情数据并回显表单
/**
* 目标4：编辑-回显文章
* 4.1 页面跳转传参（URL 查询参数方式）
* 4.2 发布文章页面接收参数判断（共用同一套表单）
* 4.3 修改标题和按钮文字
* 4.4 获取文章详情数据并回显表单
*/
; (function () {
// 4.2 发布文章页面接收参数判断（共用同一套表单）
const paramsStr = location.search
const params = new URLSearchParams(paramsStr)
params.forEach(async (value, key) => {
// 当前有要编辑的文章 id 被传入过来
if (key === 'id') {
// 4.3 修改标题和按钮文字
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 => {
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]
}
})
}
})
})();内容管理-编辑文章-保存
目标：确认修改，保存文章到服务器
步骤：
- 判断按钮文字，区分业务(因为共用一套表单)
- 调用编辑文章接口，保存信息到服务器
- 基于Alert反馈结果消息给用户
/**
* 目标5：编辑-保存文章
* 5.1 判断按钮文字，区分业务（因为共用一套表单）
* 5.2 调用编辑文章接口，保存信息到服务器
* 5.3 基于 Alert 反馈结果消息给用户
*/
document.querySelector('.send').addEventListener('click', async e => {
// 5.1 判断按钮文字，区分业务（因为共用一套表单）
if (e.target.innerHTML !== '修改') return
// 修改文章逻辑
const form = document.querySelector('.art-form')
const data = serialize(form, { hash: true, empty: true })
// 5.2 调用编辑文章接口，保存信息到服务器
try {
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)
}
})退出登录
目标：完成退出登录效果
步骤：
- 绑定点击事件
- 清空本地缓存，跳转到登录页面
