AJAX项目——数据管理平台

黑马程序员视频地址：

黑马程序员——数据管理平台

前言

功能：

1.登录和权限判断

2.查看文章内容列表（筛选，分页）

3.编辑文章（数据回显）

4.删除文章

5.发布文章（图片上传，富文本编辑器）

技术：

1.基于Bootstrap 搭建网站标签和样式

2.集成wangEditor 插件实现富文本编辑器

3.使用原生JS 完成增删改查等业务

4.基于axios 与黑马头条线上接口交互

5.使用axios 拦截器进行权限判断

项目准备：

准备配套的素材代码
包含：html，css，js，静态图片，第三方插件等等

数据管理平台模板代码.zip文件大小：13.5 M|https://user-a001.lanzouv.com/ijtSu2mp9i9ghttps://user-a001.lanzouv.com/ijtSu2mp9i9ghttps://user-a001.lanzouv.com/ijtSu2mp9i9ghttps://user-a001.lanzouv.com/ijtSu2mp9i9ghttps://user-a001.lanzouv.com/ijtSu2mp9i9ghttps://user-a001.lanzouv.com/ijtSu2mp9i9ghttps://user-a001.lanzouv.com/ijtSu2mp9i9g

接口文档：

欢迎使用 - B站-AJAX和黑马头条-数据管理平台

目录管理：
• assets：资源文件夹（图片，字体等）
• lib：资料文件夹（第三方插件，例如：form-serialize）
• page：页面文件夹
• utils：实用程序文件夹（工具插件）

验证码登录

1.在utils/request.js中配置基地址

// 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})axios({url: "/v1_0/authorizations",method: "POST",data}).then(result => {myAlert(true, "登录成功！")}).catch(error => {myAlert(false, error.response.data.message)})
})

token

token 的介绍

token 的使用

1. 在utils/auth.js 中判断无 token 令牌字符串，则强制跳转到登录页（手动修改地址栏测试）

/*** 目标1：访问权限控制* 1.1 判断无 token 令牌字符串，则强制跳转到登录页* 1.2 登录成功后，保存 token 令牌字符串到本地，并跳转到内容列表页面*/
const token = localStorage.getItem("token")
if(!token)
{alert("请先登录！")setTimeout(() => {location.href = "../login/index.html"}, 1500)
}

2. 在登录成功后，保存token 令牌字符串到本地，再跳转到首页（手动修改地址栏测试）

then(result => {//存入tokenlocalStorage.setItem("token", result.data.data.token)//提示框myAlert(true, "登录成功！")//1.5s后跳转新页面setTimeout(() => {location.href = "../content/index.html"}, 1500)})

axios 请求拦截器和个人信息设置

1. 什么是axios 请求拦截器？

✓ 发起请求之前，调用的一个函数，对请求参数进行设置

2. axios 请求拦截器，什么时候使用？

✓ 有公共配置和设置时，统一设置在请求拦截器中

官方文档：

拦截器 | Axios中文文档 | Axios中文网https://www.axios-http.cn/docs/interceptorshttps://www.axios-http.cn/docs/interceptorshttps://www.axios-http.cn/docs/interceptorshttps://www.axios-http.cn/docs/interceptorshttps://www.axios-http.cn/docs/interceptorshttps://www.axios-http.cn/docs/interceptorshttps://www.axios-http.cn/docs/interceptors

1.在utils/request.js文件中配置

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么const token = localStorage.getItem("token")token && (config.headers.Authorization = `Bearer ${token}`)return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
})

2.在utils/auth.js 中请求个人信息并设置到页面

/*** 目标2：设置个人信息* 2.1 在 utils/request.js 设置请求拦截器，统一携带 token* 2.2 请求个人信息并设置到页面*/
axios({url: "/v1_0/user/profile"
}).then(result => {const username = result.data.data.namedocument.querySelector(".nick-name").innerText = username
}).catch(error => {console.log(error)
})

axios 响应拦截器和身份验证失败

1. 什么是axios 响应拦截器？
✓ 响应回到then/catch 之前，触发的拦截函数，对响应结果统一处理
2. axios 响应拦截器，什么时候触发成功/失败的回调函数？
✓ 状态为2xx触发成功回调，其他则触发失败的回调函数

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么response = response.data    //⭐️数据优化，得到的response是服务器数据+axios修饰后的代码，//而response.data是服务器返回的数据，将服务器返回的数据直接返回给then中//如上文代码中的result.data.data.name，如果此处返回response，则调用result.data.data.name//如果此处返回response.data，则调用result.data.namereturn response    //⭐️response会传进.then(result => {})中，由result接收
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么⭐️if(error?.response?.status === 401){alert("身份验证过期，请重新登录！")localStorage.clear()location.href = "../login/index.html"}return Promise.reject(error)    //⭐️error会传进.catch(error => {})中，由error接收
})

发布文章

富文本编辑器

官方手册：

wangEditor 5https://www.wangeditor.com/v5/getting-started.htmlhttps://www.wangeditor.com/v5/getting-started.htmlhttps://www.wangeditor.com/v5/getting-started.htmlhttps://www.wangeditor.com/v5/getting-started.htmlhttps://www.wangeditor.com/v5/getting-started.htmlhttps://www.wangeditor.com/v5/getting-started.htmlhttps://www.wangeditor.com/v5/getting-started.html手册中有完整步骤

1.引入CSS：在相应页面（publish/index.css）引入CSS

/* 富文本编辑器 */ 
#editor—wrapper {border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}

2.定义HTML：在需要部署的页面（publish/index.html）放置HTML代码

<!-- 富文本编辑器位置 -->
<div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container"><!-- 编辑器 --></div>
</div>

<!-- 记录富文本内容-用于表单收集 -->
<textarea name="content" class="publish-content" hidden></textarea>

3.引入 JS 创建编辑器：在utils/editor.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'
})

4.引入文件：在publish/index.html中引入script（黑马程序员已经帮我们引入过了）

<!--引入 CSS 定义样式-->
<linkhref="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"rel="stylesheet"
/><!--引入 JS 创建编辑器-->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

频道列表

目标1：设置频道下拉菜单
1.1 获取频道列表数据
1.2 展示到下拉菜单中

//publish/index.jsasync function getChannels()
{//请求数据const channelsData  = await axios({url: "/v1_0/channels"})//拼接数据const channelsHTML = `<option value="" selected="">请选择文章频道</option>` + channelsData.data.data.channels.map(item => `<option value="${item.id}" >${item.name}</option>`).join("")//渲染数据document.querySelector(".form-select").innerHTML = channelsHTML
}
getChannels()

封面设置

目标2：文章封面设置
2.1 准备标签结构和样式
2.2 选择文件并保存在 FormData
2.3 单独上传图片并得到图片 URL 网址
2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）

document.querySelector(".img-file").addEventListener("change", async e => {//获取本地上传照片数据const file = e.target.files[0]//实例化表单对象const fd = new FormData()//添加image属性，并放入图片数据fd.append("image", file)//上传数据，返回照片地址const res = await axios({url: "/v1_0/upload",method: "POST",data: fd})const imgUrl = res.data.data.url//渲染到本地document.querySelector(".rounded").src = imgUrl  //照片回显document.querySelector(".rounded").classList.add("show") //显示照片盒子document.querySelector(".place").classList.add("hide")  //隐藏加号盒子
})//⭐️点击图片，模拟点击上传图片按钮，从而再次调用代码
document.querySelector(".rounded").addEventListener("click", () => {document.querySelector(".img-file").click()
})

收集并保存

目标3：发布文章保存
3.1 基于 form-serialize 插件收集表单数据对象
3.2 基于 axios 提交到服务器保存
3.3 调用 Alert 警告框反馈结果给用户
3.4 重置表单并跳转到列表页

document.querySelector(".send").addEventListener("click", async e => {//⭐️编辑功能留空1//获取表单const form = document.querySelector(".art-form")//获取表单数据const data = serialize(form, {hash: true, empty: true})//⭐️删除id字段数据delete data.id//获取图片数据data.cover = {type: 1, images: [document.querySelector(".rounded").src]}//上传数据try{const result = await axios({url: "/v1_0/mp/articles",method: "POST", data})//调用 Alert 警告框反馈结果给用户myAlert(true, "发布成功！")//清除表单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){//调用 Alert 警告框反馈结果给用户myAlert(false, error.response.data.message)}})

内容管理

文章列表展示

目标1：获取文章列表并展示
1.1 准备查询参数对象
1.2 获取文章列表数据
1.3 展示到指定的标签结构中

标⭐️为代码留空区域，在对应功能模块编写时会添加

// 1.准备查询参数对象
const queryObj = {status: '', // 文章状态（1-待审核，2-审核通过）空字符串-全部channel_id: '', // 文章频道 id，空字符串-全部page: 1, // 当前页码per_page: 10 // 当前页面条数
}//⭐️分页功能留空1async function getArtileList() {//2.获取文章列表数据const res = await axios({url: '/v1_0/mp/articles',params: queryObj})//3.展示到指定的标签结构中const htmlStr = res.data.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-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 "⭐️删除功能留空1"><i class="bi bi-pencil-square edit"></i><i class="bi bi-trash3 del"></i></td>
</tr>`).join('')document.querySelector('.art-list').innerHTML = htmlStr//⭐️分页功能留空2}
getArtileList()

筛选功能

目标2：筛选文章列表
2.1 设置频道列表数据
2.2 监听筛选条件改变，保存查询信息到查询参数对象
2.3 点击筛选时，传递查询参数对象到服务器
2.4 获取匹配数据，覆盖到页面展示

//1.设置频道列表数据
async function getChannels()
{//请求数据const channelsData  = await axios({url: "/v1_0/channels"})//拼接数据const channelsHTML = `<option value="" selected="">请选择文章频道</option>` + channelsData.data.data.channels.map(item => `<option value="${item.id}" >${item.name}</option>`).join("")//渲染数据document.querySelector(".form-select").innerHTML = channelsHTML
}
getChannels()//2.监听筛选条件改变，保存查询信息到查询参数对象
//状态
document.querySelectorAll(".form-check").forEach(item => {item.addEventListener("change", e => {queryObj.status = e.target.value})
})//频道
document.querySelector(".form-select").addEventListener("change", e => {queryObj.channel_id = e.target.value
})
//3.点击筛选时，传递查询参数对象到服务器,并获取匹配数据，覆盖到页面展示
document.querySelector(".sel-btn").addEventListener("click", () => {getArtileList()
})

分页功能

目标3：分页功能
3.1 保存并设置文章总条数
3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据

//————————————————————————1.代码写在文章列表展示中——————————————————————————————//1.1保存文章总条数（对应留空1）let totalCount = 0 //1.2获取文章总条数（对应留空2）totalCount = res.data.total_countdocument.querySelector('.total-count').innerHTML = `共 ${totalCount} 条`
//————————————————————————————————————————————————————————————————————————————//2.点击下一页
document.querySelector(".next").addEventListener("click", () => {//判断是否可以进行下一页：当前页码小于总页码（总页码=(总条数/每一页最大条数)向上取整）if(queryObj.page < Math.ceil(totalCount / queryObj.per_page)){      //页码自增queryObj.page++ //页面显示当前页码document.querySelector(".page-now").innerHTML = `第 ${queryObj.page} 页`  //更新数据getArtileList() }
})//3.点击上一页
document.querySelector('.last').addEventListener('click', e => {// 大于 1 的时候，才能翻到上一页if (queryObj.page > 1) {//页码自减queryObj.page--//页面显示当前页码document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`//更新数据getArtileList()}
})

删除功能

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

//————————————————————————1.关联文章 id————————————————————————//留空1补自定义属性data-id="${item.id}"//——————————————————————————————————————————————————————————————————————
//2.点击删除时，获取文章 id
document.querySelector(".art-list").addEventListener("click", async e => {if(e.target.classList.contains("del")){//2.获取idconst delId = e.target.parentNode.dataset.id//3.调用删除接口，传递文章 id 到服务器const res = await axios({url: `/v1_0/mp/articles/${delId}`,method: "DELETE"})//4.删除最后一页的最后一条，需要自动向前翻页//获取子元素数组const children = document.querySelector(".art-list").children//判断子元素数组长度等于1并且当前页码数不等于1if(children.length === 1 && queryObj.page !== 1){//页码自减queryObj.page--//页面显示当前页码document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`}//5.重新获取并渲染数据getArtileList()}
})

编辑功能

回显文章

目标4：编辑-回显文章

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

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

4.3 修改标题和按钮文字

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

//content/index.js//1.点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector(".art-list").addEventListener("click", e => {//判断是否点击编辑按钮if(e.target.classList.contains("edit")){//获取idconst editId = e.target.parentNode.dataset.id//跳转到发布页面，并传递idlocation.href = `../publish/index.html?id=${editId}`}})

//publish/index.js
//使用立即执行函数(IIFE)创建一个独立的作用域，避免变量污染全局作用域
;(function(){//⭐️获取网页中携带的参数const paramsStr = location.search//⭐️实例化内置对象（用来处理?后面内容的对象）const params = new URLSearchParams(paramsStr)params.forEach(async (value, key) => {//判断是否含有id参数if(key === "id"){//修改页面文字document.querySelector(".title span").innerHTML = "修改文章"document.querySelector(".send").innerHTML = "修改"//获取文章详情const res = await axios({url: `/v1_0/mp/articles/${value}`})//整理需要用的值//方法一：解构// const {channel_id, title, cover:{images:[image]}, content, id} = res.data.data//方法二：创立新对象挨个赋值（本篇选择此方法）const dataObj = {channel_id: res.data.data.channel_id,title: res.data.data.title,image: res.data.data.cover.images[0],content: res.data.data.content,id: res.data.data.id}console.log(dataObj)//数据渲染Object.keys(dataObj).forEach(key => {if(key === "image"){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：编辑-保存文章

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

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

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

//区分发布按钮与修改按钮
//——————————————————————发布文章/收集并保存中的留空1代码————————————————————————————//判断是否为发布按钮if(e.target.innerHTML != "发布") return
//————————————————————————————————————————————————————————————————————————————————

document.querySelector(".send").addEventListener("click", async e => {//判断是否为修改按钮if(e.target.innerHTML !== "修改") return//获取表单对象const form = document.querySelector(".art-form")//使用serialize插件获取表单数据const data = serialize(form, {hash: true, empty: true})//提交数据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]}}})//成功弹窗myAlert(true, "修改成功！")//返回内容管理页面setTimeout(() =>{location.href = "../content/index.html"}, 1500)}catch(error){//异常弹窗myAlert(false, error.response.data.message)}
})

退出登录

目标3：退出登录

3.1 绑定点击事件

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

//utils/auth.js//绑定事件
document.querySelector(".quit").addEventListener("click", () => {//清空本地缓存localStorage.clear()//提示框myAlert(true, "退出成功！即将返回登陆页面！")//跳转登录页面setTimeout(() => {location.href ="../login/index.html"}, 1500)
})