05 黑马头条数据管理平台

项目介绍

介绍我们要做的项目，为何做，以及怎么做

黑马头条 - 数据管理平台：对 IT 资讯移动网站的数据，进行数据管理
数据管理平台 - 演示：配套代码在本地运行
移动网站 - 演示：极客园
功能：
- 登录和权限判断
- 查看文章内容列表（筛选，分页）
- 编辑文章（数据回显）
- 删除文章
- 发布文章（图片上传，富文本编辑器）
文档：

小结

黑马头条 - 数据管理平台，是什么样网站，要完成哪些功能？
- 数据管理网站，登录后对数据进行增删改查
数据管理平台，未登录能否管理数据？
- 不能，数据是公司内部的，需账号登录后管理

项目准备

了解项目需要准备哪些内容

技术：
- 基于 Bootstrap 搭建网站标签和样式
- 集成 wangEditor 插件实现富文本编辑器
- 使用原生 JS 完成增删改查等业务
- 基于 axios 与黑马头条线上接口交互
- 使用 axios 拦截器进行权限判断
项目准备：准备配套的素材代码
- 包含：html，css，js，静态图片，第三方插件等等
目录管理：建议这样管理，方便查找
- assets：资源文件夹（图片，字体等）
- lib：资料文件夹（第三方插件，例如：form-serialize）
- page：页面文件夹
- utils：实用程序文件夹（工具插件）

项目目录

bash

.
├── assets
├── lib
│   └── form-serialize.js
├── page
│   ├── content
│   │   ├── index.css
│   │   ├── index.html
│   │   └── index.js
│   ├── login
│   └── publish
└── utils

登录退出

完成验证码登录，后端设置验证码默认为 246810
完成退出登录效果

验证码登录

在 utils/request.js 配置 axios 请求基地址
作用：提取公共前缀地址，配置后 axios 请求时都会 baseURL + url
js
```
axios.defaults.baseURL = 'http://geek.itheima.net';
```
1
收集手机号和验证码数据
基于 axios 调用验证码登录接口
使用 Bootstrap 的 Alert 警告框反馈结果给用户

99508cf1-63a1-4c23-98f8-0c56d39950f2

验证码登录流程

了解验证码登录的流程

手机号 + 验证码，登录流程：

token 的介绍

了解前后端分离项目中 token 的作用

概念：访问权限的令牌，本质上是一串字符串
创建：正确登录后，由后端签发并返回
作用：判断是否有登录状态等，控制访问权限
注意：前端只能判断 token 有无，而后端才能判断 token 的有效性
目标：只有登录状态，才可以访问内容页面
步骤：
1. 在 utils/auth.js 中判断无 token 令牌字符串，则强制跳转到登录页（手动修改地址栏测试）
2. 在登录成功后，保存 token 令牌字符串到本地，再跳转到首页（手动修改地址栏测试）
js
```
const token = localStorage.getItem('token');
// 没有 token 令牌字符串，则强制跳转登录页
if (!token) {
  location.href = '../login/index.html';
}
```
1
2
3
4
5

小结

token 的作用？
- 判断用户是否有登录状态等
token 的注意：
- 前端只能判断 token 的有无
- 后端通过解密可以提取 token 字符串的原始信息，判断有效性

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

了解 axios 请求拦截器的概念和使用场景

需求：设置用户昵称
语法：axios 可以在 headers 选项传递请求头参数
问题：很多接口，都需要携带 token 令牌字符串
解决：在请求拦截器统一设置公共 headers 选项

cdf62885-a109-4d2c-be47-9f513174b7b2

7c50caf5-85ee-4a66-8dde-4fda09a8540a

axios({
  url: '目标资源地址',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
});

axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  },
);

axios({
  // 个人信息
  url: '/v1_0/user/profile',
})
  .then((result) => {
    // result：服务器响应数据对象
  })
  .catch((error) => {});

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

小结

什么是 axios 请求拦截器？
- 发起请求之前，调用的一个函数，对请求参数进行设置
axios 请求拦截器，什么时候使用？
- 有公共配置和设置时，统一设置在请求拦截器中

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

了解 axios 响应拦截器的概念和使用场景，以及身份验证失败的场景流程和判断使用

axios 响应拦截器：响应回到 then/catch 之前，触发的拦截函数，对响应结果统一处理
例如：身份验证失败，统一判断并做处理

f8d8d0e7-2e31-430f-9a41-a8f6b8736bbd

axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    return result;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么，例如：判断响应状态为 401 代表身份验证失败
    if (error?.response?.status === 401) {
      alert('登录状态过期，请重新登录');
      window.location.href = '../login/index.html';
    }
    return Promise.reject(error);
  },
);

小结

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

优化 axios 响应结果

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

思路：其实就是在响应拦截器里，response.data 把后台返回的数据直接取出来统一返回给所有使用这个 axios 函数的逻辑页面位置的 then 的形参上
好处：可以让逻辑页面少点一层 data 就能拿到后端返回的真正数据对象

21baff75-b194-4b09-9790-ed70acec912d

axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么，例如：直接返回服务器的响应结果对象
    const result = response.data;
    return result;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么，例如：判断响应状态为 401 代表身份验证失败
    if (error?.response?.status === 401) {
      alert('登录状态过期，请重新登录');
      window.location.href = '../login/index.html';
    }
    return Promise.reject(error);
  },
);

退出登录

完成退出登录效果

步骤：

绑定点击事件
清空本地缓存，跳转到登录页面

4b6df448-8bd9-4818-af86-b1c85809c0f4

发布文章

富文本编辑器

了解富文本编辑器的概念，以及如何在前端网页中使用

富文本：带样式，多格式的文本，在前端一般使用标签配合内联样式实现
富文本编辑器：用于编写富文本内容的容器

064a72d4-f2b3-4403-9e65-29d40e5e5984

目标：发布文章页，富文本编辑器的集成
使用：wangEditor 插件

步骤：参考文档

引入 CSS 定义样式

html

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet" />
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container {
    border-bottom: 1px solid #ccc;
  }
  #editor-container {
    height: 500px;
  }
</style>

定义 HTML 结构

html

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

引入 JS 创建编辑器

html

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
  const { createEditor, createToolbar } = window.wangEditor;

  const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml();
      console.log('editor content', html);
      // 也可以同步到 <textarea>
    },
  };

  const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
  });

  const toolbarConfig = {};

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  });
</script>

监听内容改变，保存在隐藏文本域（便于后期收集）

const editorConfig = {
  placeholder: 'Type here...', // 编辑器的占位符文本
  onChange(editor) {
    // 监听编辑器内容变化，当编辑器的内容发生变化时，这个函数会被调用
    // 使用 editor.getHtml() 获取了编辑器的 HTML 内容，并将其打印到控制台。
    const html = editor.getHtml();
    console.log('editor content', html);
    // 也可以同步到 <textarea>: 为了后续快速收集整个表单内容做铺垫
    document.querySelector('textarea.publish-content').value = html;
  },
};

频道列表

展示频道列表，供用户选择

步骤：

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

const channelId = document.querySelector('#channel_id');
axios.get('/v1_0/channels').then((res) => {
  console.log(res);
  channelId.innerHTML = res.data.channels
    .map((item) => {
      return `<option value="${item.id}">${item.name}</option>`;
    })
    .join('');
});

de8391cb-64ce-4d32-a4a9-9c183479f7fa

封面设置

文章封面的设置

步骤：

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

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

b3570ab3-9f53-4bd5-a096-d92ce38c7594

收集并保存

收集文章内容，并提交保存

步骤：

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

b31597a5-8d9a-49c2-bf29-b00a46c781e8

内容管理

文章列表展示

获取文章列表并展示

步骤：

准备查询参数对象
获取文章列表数据
展示到指定的标签结构中

d213ee40-13da-4af4-8a7a-de690e8c425a

const queryObj = {
  status: '', // 筛选状态
  channel_id: '', // 频道 id
  page: 1, // 当前页码
  per_page: 2, // 每页条数
};
let totalCount = 0; // 总条数

筛选功能

根据筛选条件，获取匹配数据展示

步骤：

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

bcbd10ff-a28e-4d67-bee5-7cb8a965096a

分页功能

完成文章列表，分页管理功能

步骤：

保存并设置文章总条数
点击下一页，做临界值判断，并切换页码参数请求最新数据
点击上一页，做临界值判断，并切换页码参数请求最新数据

26b287a0-f933-4aa6-ae93-7e18a3004162

删除功能

完成删除文章功能

步骤：

关联文章 id 到删除图标
点击删除时，获取文章 id
调用删除接口，传递文章 id 到服务器
重新获取文章列表，并覆盖展示

98b2211b-4f25-4c1c-8ea9-cc84c37cbebc

删除最后一条

在删除最后一页，最后一条时有 Bug

步骤：

删除成功时，判断 DOM 元素只剩一条，让当前页码 page--
注意，当前页码为 1 时不能继续向前翻页
重新设置页码数，获取最新列表展示

4e0e0458-9214-4a3d-940f-065f6bc7ba97

编辑文章回显

编辑文章时，回显数据到表单

步骤：

页面跳转传参（URL 查询参数方式）
发布文章页面接收参数判断（共用同一套表单）
修改标题和按钮文字
获取文章详情数据并回显表单

09e305f1-d05e-4ea7-aacd-19bec507693a

const params = `?id=1001&name=xiaoli`;
// 查询参数字符串 => 查询参数对象
const result = new URLSearchParams(params);
// 需要遍历使用
result.forEach((value, key) => {
  console.log(value, key);
  // 1001 id
  // xiaoli name
});

编辑文章保存

确认修改，保存文章到服务器

步骤：

判断按钮文字，区分业务（因为共用一套表单）
调用编辑文章接口，保存信息到服务器
基于 Alert 反馈结果消息给用户

e46904b2-29f8-4e55-a767-3ce0097cb2d1

相关代码

contentpublish

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

const artList = document.querySelector('.align-middle.art-list');
let nowPage = '1';
let totalPage;

// 准备查询参数对象
const params = {
  // 文章状态：1-待审核，2-审核通过，不传为全部
  status: '',
  // 频道 id，不传为全部，可选
  channel_id: '',
  // 当前页码，可选
  page: nowPage,
  // 每页条数，可选
  per_page: 2,
};
async function renderArticles() {
  try {
    const paramsObj = new URLSearchParams(params);
    const queryParam = paramsObj.toString();
    // console.log(queryParam);
    const res = await axios.get(`/v1_0/mp/articles?${queryParam}`);
    console.log(res);

    const defaultCover = 'https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500';
    artList.innerHTML = res.data.results
      .map((item) => {
        return `
        <tr>
          <td><img src="${item.cover.type === 0 ? defaultCover : item.cover.images[0]}" alt="" referrerpolicy="no-referrer"></td>
          <td>${item.title}</td>
          <td>${
            item.status === 2
              ? `<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 data-id="${item.id}">
            <i class="bi bi-pencil-square edit"></i>
            <i class="bi bi-trash3 del"></i>
          </td>
        </tr>`;
      })
      .join('');

    // 设置页面总条数
    totalPage = Math.ceil(res.data.total_count / params.per_page); // 向上取整
    document.querySelector('.total-count.page-now').innerHTML = `共 ${totalPage} 页`;
    // 设置当前页码
    document.querySelector('.page-item.page-now').innerHTML = `第 ${nowPage} 页`;
  } catch (error) {
    console.dir(error);
  }
}

renderArticles();

/**
 * 目标 2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
const channelId = document.querySelector('select.form-select');

// 渲染频道列表数据
async function renderChannels() {
  try {
    const res = await axios.get('/v1_0/channels');
    console.log(res);
    channelId.innerHTML = res.data.channels
      .map((item) => {
        return `<option value="${item.id}">${item.name}</option>`;
      })
      .join('');
  } catch (error) {
    console.error(error);
  }
}

renderChannels();

// 获取选择的审核状态
for (const radio of document.querySelectorAll('.form-check-input')) {
  radio.addEventListener('change', async function (e) {
    params.status = this.value;
  });
}

// 获取选择的频道 id
channelId.addEventListener('change', async function (e) {
  params.channel_id = this.value;
});

// 筛选按钮绑定事件
const selBtn = document.querySelector('button.sel-btn');
selBtn.addEventListener('click', async () => {
  renderArticles();
});

/**
 * 目标 3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
const lastBtn = document.querySelector('.last');
const nextBtn = document.querySelector('.next');
lastBtn.addEventListener('click', async (e) => {
  nowPage > 1
    ? nowPage-- && (await renderArticles())
    : myAlert(false, '已经是第一页了') && console.log('已经是第一页了');
});
nextBtn.addEventListener('click', async (e) => {
  nowPage < totalPage
    ? nowPage++ && (await renderArticles())
    : myAlert(false, '已经是最后一页了') && console.log('已经是最后一页了');
});

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

async function delArticle() {
  artList.addEventListener('click', async (e) => {
    const delBtn = e.target.classList.contains('del');
    // console.log(delBtn);
    if (delBtn) {
      const id = e.target.parentNode.getAttribute('data-id');
      try {
        const res = await axios.delete(`/v1_0/mp/articles/${id}`);
        // console.log(res);
        // 如果删除的是当前页面的最后一条，需要自动向前翻页
        const articleNum = artList.children.length;
        if (articleNum === 1 && nowPage > 1) {
          nowPage--;
          await renderArticles();
        }
      } catch (error) {
        console.error(error);
      }
    }
  });
}

delArticle();

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
artList.addEventListener('click', (e) => {
  const editBtn = e.target.classList.contains('edit');
  console.log(editBtn);
  if (editBtn) {
    const id = e.target.parentNode.getAttribute('data-id');
    location.href = `../publish/index.html?id=${id}`;
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171


/**
 * 目标 3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
const sendBtn = document.querySelector('button.send');
const form = document.querySelector('.art-form');

async function publishArticle() {
  sendBtn.addEventListener('click', async (e) => {
    if (e.target.innerHTML !== '发布') return;
    const formData = serialize(form, { hash: true, empty: true });
    console.log(formData); // channel_id, content, id, title

    // formData 中多了 id 属性，少了 cover(type, images) 属性
    formData.id = undefined;
    formData.cover = {
      type: 1, // 文章封面类型，默认传递 1-1 张图
      images: [rounded.src], // 文章封面地址数组
    };

    try {
      const res = await axios.post('/v1_0/mp/articles', formData);
      console.log(res);
      myAlert(true, `发布成功 ~ ${res.message}`);

      // 重置表格，封面，富文本编辑器和 textarea
      form.reset();
      rounded.src = '';
      rounded.classList.remove('show');
      place.classList.remove('hide');
      editor.setHtml('');
      document.querySelector('textarea.publish-content').value = '';

      // 1.5s 后跳转到内容管理页面
      setTimeout(() => {
        window.location.href = '../content/index.html';
      }, 1500);
    } catch (error) {
      console.dir(error);
      myAlert(false, `发布失败 ~ ${error.response.data.message}`);
    }
  });
}

publishArticle();
/**
 * 目标 4：编辑 - 回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
(async () => {
  // 4.2 发布文章页面接收参数判断（共用同一套表单）
  const params = new URLSearchParams(location.search);
  for (const [key, value] of params) {
    // 当前有要编辑的文章 id 被传入过来
    if (key === 'id') {
      // 4.3 修改标题和按钮文字
      document.querySelector('.title span').innerHTML = '修改文章';
      sendBtn.innerHTML = '修改';
      // 4.4 获取文章详情数据并回显表单
      const res = await axios.get(`/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,
      };
      // 遍历数据对象属性，映射到页面元素上，快速赋值
      for (const key of Object.keys(dataObj)) {
        if (key === 'rounded') {
          if (dataObj[key]) {
            rounded.src = dataObj[key];
            rounded.classList.add('show');
            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 反馈结果消息给用户
 */
sendBtn.addEventListener('click', async (e) => {
  if (e.target.innerHTML !== '修改') return;
  const formData = serialize(form, { hash: true, empty: true });
  console.log(formData); // channel_id, content, id, title

  // formData 中少了 cover(type, images) 属性
  formData.cover = {
    type: rounded.src ? 1 : 0, // 文章封面类型，默认传递 1-1 张图
    images: [rounded.src], // 文章封面地址数组
  };

  try {
    const res = await axios.put(`/v1_0/mp/articles/${formData.id}`, formData);
    console.log(res);
    myAlert(true, `修改成功 ~ ${res.message}`);

    // 1.5s 后跳转到内容管理页面
    setTimeout(() => {
      window.location.href = '../content/index.html';
    }, 1500);
  } catch (error) {
    console.dir(error);
    myAlert(false, `修改失败 ~ ${error.response.data.message}`);
  }
});

05 黑马头条 数据管理平台 ​

项目介绍 ​

小结 ​

项目准备 ​

登录退出 ​

验证码登录 ​

验证码登录流程 ​

token 的介绍 ​

小结 ​

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

小结 ​

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

小结 ​

优化 axios 响应结果 ​

退出登录 ​

相关代码 ​

发布文章 ​

富文本编辑器 ​

频道列表 ​

封面设置 ​

收集并保存 ​

相关代码 ​

内容管理 ​

文章列表展示 ​

筛选功能 ​

分页功能 ​

删除功能 ​

删除最后一条 ​

编辑文章 回显 ​

编辑文章 保存 ​

相关代码 ​

05 黑马头条数据管理平台

项目介绍

小结

项目准备

登录退出

验证码登录

验证码登录流程

token 的介绍

小结

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

小结

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

小结

优化 axios 响应结果

退出登录

相关代码

发布文章

富文本编辑器

频道列表

封面设置

收集并保存

相关代码

内容管理

文章列表展示

筛选功能

分页功能

删除功能

删除最后一条

编辑文章回显

编辑文章保存

相关代码