hm头条-admin

二十雨辰2024-06-03 12:55

本节目标

完成项目

  • 项目介绍
  • 验证码登录
  • 统一处理请求
  • 富文本编辑器
  • 频道下拉菜单
  • 封面上传
  • 文章列表展示
  • 筛选功能
  • 分页功能
  • 删除功能
  • 编辑文章(回显)
  • 编辑文章(保存)
  • 退出登录

项目介绍

介绍

头条数据管理平台: 对IT资源移动网站的数据进行管理

移动网站(演示): 极客园

主要功能

  1. 登录和权限判断
  2. 查看文章内容列表(筛选, 分页)
  3. 编辑文章(数据回显)
  4. 删除文章
  5. 发布文章(图片上传, 富文本编辑器)

技术选型

  1. 基于Bootstrap搭建网站标签和样式
  2. 集成wangEditor插件, 实现富文本编辑器
  3. 使用原生JS完成增删改查业务
  4. 基于axios进行前后端交互
  5. 使用axios拦截器进行权限判断

项目准备

html, css, js, 图片, 第三方插件

目录结构

assets: 资源文件夹(图片/字体)

lib: 资料文件夹(第三方插件)

page: 页面文件夹

utils: 工具文件夹(自定义js等)

验证码登录

登录流程

实现登录

复制代码 
// axios 公共配置
// 基地址
axios.defaults.baseURL = 'https://geek.itheima.net'

/**
 * 目标1：验证码登录
 * 1.1 在 utils/request.js 配置 axios 请求基地址
 * 1.2 收集手机号和验证码数据
 * 1.3 基于 axios 调用验证码登录接口
 * 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
 */
document.querySelector('.btn').addEventListener('click', async function () {
  try {
    const form = document.querySelector('.login-form')
    const data = serialize(form, { hash: true, empyt: true })
    const login = await axios({ url: '/v1_0/authorizations', method: 'post', data })
    myAlert(true, '登录成功')

  } catch (error) {
    console.dir(error);
    myAlert(false, error.response.data.message)
  }

})

权限控制

token是访问权限的令牌, 本质是一个字符串, 前端只能判断有无token, 后端判断token的有效性

复制代码 
/**
 * 目标1：访问权限控制
 * 1.1 判断无 token 令牌字符串，则强制跳转到登录页
 * 1.2 登录成功后，保存 token 令牌字符串到本地，并跳转到内容列表页面
 */
const token = localStorage.getItem('token')
// 没有token,返回登录页
if (!token) {
  location.href = '../login/index.html'
}

document.querySelector('.btn').addEventListener('click', async function () {
  try {
    ... ...
    myAlert(true, '登录成功')
    localStorage.setItem('token', login.data.data.token)
    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1200)
  } 
})

统一处理请求

请求拦截器

请求发起之前,触发请求拦截器函数, 可以对请求参数进行额外配置

拦截流程

设置请求头参数

1,在拦截器中统一添加请求头参数

复制代码 
// 请求拦截器
// 语法:   axios.interceptors.request.use(函数1, 函数2)
// 函数1:  请求成功的函数
// 函数2:  请求失败的函数(可省略,很少用)
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, 请求时单独添加请求头参数

复制代码 
axios({
  url: '',
  headers: {
    Authorization: 'Bearer xxxxxxxx'
  }
})

响应拦截器

服务器响应结果后, 首先触发响应拦截器函数, 可以对响应结果进行统一处理, 再回到then/catch中

拦截流程

处理响应结果

  1. 简化axios的响应数据结构 (注意会影响之前的数据读取)

  2. 理登录过期的状态

    // 响应拦截器
    // axios.interceptors.request.use(函数1, 函数2)
    // 函数1: 请求成功的函数
    // 函数2: 请求失败的函数
    axios.interceptors.response.use(function (response) {
    // 状态码2xx范围内的请求触发成功处理函数
    // 简化axios的响应数据结构
    return response.data

    }, function (error) {
    // 超出2xx范围内的请求触发失败处理函数
    console.dir(error)
    // 处理登录过期的状态
    if (error?.response?.status === 401) {
    alert('登录过期, 请重新登录')
    localStorage.clear()
    location.href = '../login/index.html'
    }

    return Promise.reject(error)
    })

富文本编辑器

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

富文本编辑器: 用于编辑富文本内容的容器

使用wangEditor插件, 完成富文本编辑器的集成

官网: wangEditor

使用步骤

  1. 引入css样式

  2. 定义html结构

  3. 引入js创建编辑器

  4. 监听内容变化, 进行处理

  5. 富文本编辑器重置内容: editor.setHtml('')

    // 富文本编辑器
    // 创建编辑器函数，创建工具栏函数
    const { createEditor, createToolbar } = window.wangEditor

    // 编辑器配置文件
    const editorConfig = {
    // 占位提示文字
    placeholder: '请输入文章内容',
    // 内容改变事件
    onChange(editor) {
    const html = editor.getHtml()
    console.log('editor content', html)
    // 也可以同步到