AJAX 05 axios拦截器、数据管理平台

AJAX 学习

  • AJAX 05 黑马头条-数据管理平台
    • 项目准备
    • 业务1：验证码登录
      • bootstrap提示框
      • 实际业务中的验证码登录
      • token
    • 【注】HTML遗落的知识
    • 【注】JS遗漏的知识
    • 业务2：个人信息设置 & axios拦截器
      • axios请求拦截器
      • axios响应拦截器
    • 业务3：发布文章
      • 1. 富文本（wangEditor 插件）
      • 2. 频道列表
      • 3. 封面设置
      • 4. 收集并保存（form-serialize插件）
      • 5、文章列表展示
      • 6、筛选功能
      • 7、分页
      • 8、删除文章
        • 删除最后一条时的问题
      • 9、编辑文章(页面跳转传参)
      • 10、退出登录

AJAX 05 黑马头条-数据管理平台

注册登陆界面：

账号默认在登陆时就完成注册

密码默认只能是246810

API地址：https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8/api-87683418

功能：

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

项目准备

技术：

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

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

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

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

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

项目准备： 准备配套的素材代码

包含：html，css，js，静态图片，第三方插件等等

目录管理： 建议这样管理，方便查找

• assets：资源文件夹（图片，字体等）

• lib：资料文件夹（第三方插件，例如：form-serialize）

• page：页面文件夹

• utils：实用程序文件夹（工具插件）

业务1：验证码登录

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

原因：因为短信接口不是免费的，防止攻击者恶意盗刷

步骤：

  1. 在 utils/request.js 配置 axios 请求基地址

作用：提取公共前缀地址，配置后 axios 请求时都会 baseURL + url

  1. 收集手机号和验证码数据
  2. 基于 axios 调用验证码登录接口
  3. 使用 Bootstrap 的 Alert 警告框反馈结果给用户

bootstrap提示框

已经写好了一个
在这里插入图片描述

默认是不显示的，加上show类才会显示。加上alert-danger 或者alert-success才会有样式。

在JS中我们有封装一个函数

V:\Web\mycode\AJAX\5-黑马头条-数据管理平台\page\login\index.js

实际业务中的验证码登录

在这里插入图片描述

在这一部分，前端调用了两个接口

token

概念：访问权限的令牌，本质上是一串字符串

创建：正确登录后，由后端签发并返回
在这里插入图片描述

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

注意：前端只能判断 token 有无，而后端才能判断 token 的有效性
在这里插入图片描述

目标：只有登录状态，才可以访问内容页面

步骤：

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

在这里插入图片描述

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

【注】HTML遗落的知识

1、form表单一定需要name属性才能提交

2、input 默认的值 可以在 value中设置

在这里插入图片描述

3、下拉框 HTML获取不到 文字，只能获取 value属性

4、JS 的引入要有顺序，比如在登陆页面index.js中 我的弹框 是调用alert.js里的函数得到的，那么在主页面引入的时候，上下顺序不可以反
在这里插入图片描述

5、label可以关联form表单元素 ：【做法】把label中的for属性 和 表单中的id设置为一样，就能关联
在这里插入图片描述

这里的意思是，不管是 点击了“封面”这个label元素，还是点击了 “+”加号这个 label元素，都会触发input 这个元素选择，（而且这个元素选择是被隐藏的）

6、清空表单

const form = document.querySelector('form')
form.reset()
只能清空表单元素

【注】JS遗漏的知识

1、classList进行add和remove 的时候不可以加点

document.querySelector('.place').classList.add('hide')

比如上文，hide是类名，前面不能加点

2、当点击 一个元素的时候，想要触发另一个元素的事件怎么办

——直接调用 该元素的事件函数

document.querySelector('.rounded').addEventListener('click', () =>{document.querySelector('.img-file').click()
})

3、删除对象data中的id属性

delete data.id

业务2：个人信息设置 & axios拦截器

需求：设置用户昵称

语法：axios 可以在 headers 选项传递请求头参数
在这里插入图片描述

总结：

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

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

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

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

axios请求拦截器

尚硅谷

https://www.bilibili.com/video/BV1wr4y1K7tq?p=10&vd_source=ceab44fb5c1365a19cb488ab650bab03

因为在功能模块 个人信息渲染页面/所有频道渲染页面/文章列表，都需要用户资料。所以设置一个请求拦截器，每次都在请求头header处携带上token

这是一个请求拦截器，config是本次请求的配置参数

// 这个JS文件 每个页面都引入了
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么console.log('===请求拦截器===');console.log(config);// 统一携带token令牌字符串在请求头上const token = localStorage.getItem('token')token && (config.headers.Authorization = `Bearer ${token}`)console.log(config);console.log('===请求拦截器===');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()//清空本地缓存window.location.href = '../login/index.html'// 回到登陆页面}return Promise.reject(error);
});

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

通过响应拦截器优化服务器相应效果
在这里插入图片描述

axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。const result = response.datareturn result;
}, function (error) {// 略
});

业务3：发布文章

1. 富文本（wangEditor 插件）

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

富文本编辑器：用于编写富文本内容的容器
在这里插入图片描述

目标：发布文章页，富文本编辑器的集成

使用：wangEditor 插件

步骤：参考文档

https://www.wangeditor.com/v5/getting-started.html

  1. 引入 CSS 定义样式
  2. 定义 HTML 结构
  3. 引入 JS 创建编辑器
  4. 监听内容改变，保存在隐藏文本域（便于后期收集）
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.23/css/style.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.23/index.min.js"></script>

2. 频道列表

在这里插入图片描述

3. 封面设置

在这里插入图片描述

label可以关联form表单元素 ：【做法】把label中的for属性 和 表单中的id设置为一样，就能关联

在这里插入图片描述

这里的意思是，不管是 点击了“封面”这个label元素，还是点击了 “+”加号这个 label元素，都会触发input 这个元素选择，（而且这个元素选择是被隐藏的）

刚开始 <img class="rounded">这个标签是被隐藏的，因为没有选择图片。它和<label for="img" class="place">+</label>的关系是，当有图片之后，让label隐藏，让img显示
在这里插入图片描述

通过我们的定义的 show hide类 就可以实现<img class="rounded">

和 <label for="img" class="place">+</label>的切换
在这里插入图片描述

代码实战：
在这里插入图片描述

// 文件选择对象； <input type="file" name="" id="">document.querySelector('.img-file').addEventListener('change',
async e => {// 选择文件并保存在 FormDataconst file = e.target.files[0] // 文件对象const fd = new FormData()fd.append('image', file)// 单独上传图片并得到图片 URL 网址const res = await axios({url: '/v1_0/upload',method: 'POST',data: fd})const imgUrl = res.data.urldocument.querySelector('.rounded').src = imgUrl// 隐藏加号document.querySelector('.place').classList.add('hide')// 显示图片document.querySelector('.rounded').classList.add('show')})

但是此时有一个问题，当 <img class="rounded">显示之后，我想切换图片，但是无法触发了，因为<label for="img" class="place">+</label>被隐藏了。

所以当点击img时，用 JS 的方式触发文件选择元素 的click 事件

document.querySelector('.rounded').addEventListener('click', () =>{document.querySelector('.img-file').click()
})

4. 收集并保存（form-serialize插件）

在这里插入图片描述

5、文章列表展示

目标1：获取文章列表并展示

1.1 准备查询参数对象

1.2 获取文章列表数据

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

在这里插入图片描述

6、筛选功能

在这里插入图片描述

注意这里 的实现是 先绑定，而不是等到点击按钮之后再绑定

document.querySelectorAll('.form-check-input').forEach(item => {item.addEventListener('change',e => {aObj.staus = e.target.value})
})document.querySelector('.form-select').addEventListener('change',
e => {console.log(e.target.value);
})document.querySelector('.sel-btn').addEventListener('click',
e => {getAllArticle()
})

7、分页

在这里插入图片描述

/*** 目标3：分页功能*  3.1 保存并设置文章总条数*  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据*  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据*/// 文章总条数
let totalCount = 0// 点击下一页，做临界值判断
document.querySelector('.next').addEventListener('click',e => {if(aObj.page < Math.ceil(totalCount / aObj.per_page)) {aObj.page++getAllArticle()document.querySelector('.page-now').innerHTML = `第${aObj.page}页`}
})
// 点击下一页
document.querySelector('.last').addEventListener('click',e => {if(aObj.page > 1) {aObj.page--getAllArticle()document.querySelector('.page-now').innerHTML = `第${aObj.page}页`}
})

8、删除文章

在这里插入图片描述

点击删除图标，删除该篇文章

要使用事件委托，文章是使用模板字符串动态添加的，所以将文章ID 绑定在父元素TD上。一个编辑一个删除都需要文章ID 在这里插入图片描述

删除最后一条时的问题

在这里插入图片描述

9、编辑文章(页面跳转传参)

在这里插入图片描述


// 点击编辑 获取文章ID 跳转到发布文章页面传递ID
document.querySelector('.art-list').addEventListener('click', async e => {if(e.target.classList.contains('edit')) {const aID = e.target.parentNode.dataset.id// ..回到父级的父级location.href = `../publish/index.html?id=${aID}`}
})

跨页面传参

async 和 awiat就近原则

10、退出登录

在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/745280.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

9种分布式ID生成之美团（Leaf）实战

9种分布式ID生成之美团（Leaf）实战

​​​​​ 前几天写过一篇《一口气说出 9种 分布式ID生成方式&#xff0c;面试官有点懵了》&#xff0c;里边简单的介绍了九种分布式ID生成方式&#xff0c;但是对于像美团&#xff08;Leaf&#xff09;、滴滴&#xff08;Tinyid&#xff09;、百度&#xff08;uid-generator&…
阅读更多...
Hadoop，Hive 数据预处理CR

Hadoop，Hive 数据预处理CR

记录一次大材小用，我在将.csv电影数据集 电影json数据 导入MySQL时，出现了报错： 很明显，意味着.csv中的数据有非utf8编码的， 尝试使用file查看了下.csv文件的编码格式： 如果不确定原始编码，可以先用file命令尝试检测一下： file -i input.csv该命令会显示文件的MIME类型…
阅读更多...
Hive3.0.0安装初始化过程，schematool -dbType mysql -initSchema报错

Hive3.0.0安装初始化过程，schematool -dbType mysql -initSchema报错

详细如下&#xff1a; 从字面意思理解&#xff0c;是在hive-site.xml文件3213行出现了非法字符&#xff0c;处理步骤如下 1、使用vi 3213 hive-site.xml打开文件 2、删除“&#8”&#xff0c;保存文件 3、再次执行初始化命令 schematool -dbType mysql -initSchema 4、登…
阅读更多...
Xcode15.3 -Library ‘iconv2.4.0‘ not found

Xcode15.3 -Library ‘iconv2.4.0‘ not found

今天升级了一下Mac mini 和Xcode15.3&#xff0c;运行项目就报 Library ‘iconv2.4.0’ not found的错误 xcode升级到&#xff1a;15.3(15A240d) 项目在旧版本下&#xff0c;是能通过编译 并且能运行的。 解决方法&#xff1a; 方案1&#xff1a;在Build Phases --> Link…
阅读更多...
华为OD技术C卷“测试用例执行计划”Java解答

华为OD技术C卷“测试用例执行计划”Java解答

描述 示例 算法思路1 整体思路是&#xff0c;先读取特性的优先级和测试用例覆盖的特性列表&#xff0c;然后计算每个测试用例的优先级&#xff0c;并将其与测试用例的索引存储到二维数组中。最后按照优先级和索引排序&#xff0c;输出测试用例的索引&#xff0c;即为执行顺序。…
阅读更多...
网络编程套接字(4)——Java套接字（TCP协议）

网络编程套接字(4)——Java套接字（TCP协议）

目录 一、Java流套接字通信模型 二、TCP流套接字编程 1、ServerSocket ServerSocket构造方法&#xff1a; ServerSocket方法: 2、Socket Socket构造方法&#xff1a; Socket方法&#xff1a; 三、代码示例&#xff1a;回显服务器 1、服务器代码 代码解析 2、客户端…
阅读更多...
配置阿里云加速器

配置阿里云加速器

国内镜像中心常用阿里云或者网易云。在本地docker中指定要使用国内加速器的地址后&#xff0c;就可以直接从阿里云镜像中心下载镜像。 2024阿里云-上云采购季-阿里云 [rootlocalhost /]# mkdir -p /etc/docker [rootlocalhost /]# tee /etc/docker/daemon.json <<-EOF &…
阅读更多...
windows 安装 gitlab-runner CICD

windows 安装 gitlab-runner CICD

点击搜索图标 手动输入PowerShell, 右键点击管理员权限打开&#xff0c; 一、安装 安装 gitlab runner 文档参考地址 1、下载exe执行文件 我这里是 win64 https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-amd64.exe 2、创建 gitla…
阅读更多...
论文研读笔记2

论文研读笔记2

1.Han异构图网络看不懂。。。正在看 https://zhuanlan.zhihu.com/p/346658317 https://www.bilibili.com/video/BV1fc411z7mx?p19&vd_source6fb54905ed1c5c332b7a606643d8525c 2. 阅读论文&#xff1a;Learning Long- and Short-Term User Literal-Preference with Mu…
阅读更多...
Java日志框架Log4j 2详解

Java日志框架Log4j 2详解

有时希望能够以文件的形式记录执行过程中出现的异常信息&#xff0c;甚至记录程序正常运行的关键步骤&#xff0c;以便日后查看&#xff0c;那么该如何处理呢? 答:显然&#xff0c;可以自行编程实现这个需求&#xff0c;但是&#xff0c;从更注重效率和性能的方面考虑&#x…
阅读更多...
物联网终端telegraf采集设备信息

物联网终端telegraf采集设备信息

背景 低功耗设备上资源有限&#xff0c;但又比较重要。对其的管理难度很大&#xff0c;有些时候又必须时刻了解其运行状况。我们自然想到的是能否有办法监控它呢&#xff1f;当时是有的&#xff01;而且很成熟的解决方案。TICK技术栈&#xff0c;那TICK是什么呢&#xff1f; TI…
阅读更多...
【剪枝实战】使用VGGNet训练、稀疏训练、剪枝、微调等，剪枝出只有3M的模型

【剪枝实战】使用VGGNet训练、稀疏训练、剪枝、微调等，剪枝出只有3M的模型

摘要 本次剪枝实战是基于下面这篇论文去复现的&#xff0c;主要是实现对BN层的γ/gamma进行剪枝操作&#xff0c;本文用到的代码和数据集都可以在我的资源中免费下载到。 相关论文&#xff1a;Learning Efficient Convolutional Networks through Network Slimming (ICCV 2017…
阅读更多...
Ubuntu18.04下opencv基础操作(打开图片及视频)

Ubuntu18.04下opencv基础操作(打开图片及视频)

文章目录 一、认识opencv一、编写一个打开图片进行特效显示的代码二、使用opencv库编写打开摄像头压缩视频的程序2.1 虚拟机获取摄像头权限2.2 播放视频2.3 录制视频 三、总结四、参考资料 一、认识opencv 开源计算机视觉(OpenCV)是一个主要针对实时计算机视觉的编程函数库。 …
阅读更多...
WanAndroid(鸿蒙版)开发的第四篇

WanAndroid(鸿蒙版)开发的第四篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …
阅读更多...
Gitee 服务器

Gitee 服务器

Git 服务器集成 1. 创建仓库 2. 远程仓库简易操作指令 # Git 全局设置&#xff0c;修改成自己的信息 git config --global user.name "Muko" git config --global user.email "txk0x7d2163.com" # 创建 git 仓库&#xff0c;基本操作指令和其他远程仓库一…
阅读更多...
Ps 滤镜：中间值

Ps 滤镜：中间值

Ps菜单&#xff1a;滤镜/杂色/中间值 Filter/Noise/Median 中间值 Median滤镜可用于减少或消除图像中的噪点和杂色&#xff0c;同时能较好地保留图像边缘和细节信息。 中间值滤镜通过计算一个像素周围一定区域内的像素值的中间值&#xff08;即这些值的中位数&#xff09;&…
阅读更多...
群集----Memcached

群集----Memcached

一、NoSQL介绍 NoSQL是对 Not Only SQL、非传统关系型数据库的统称。 NoSQL一词诞生于1998年&#xff0c;2009年这个词汇被再次提出指非关系型、分布式、不提供ACID的数据库设计模式。 随着互联网时代的到来&#xff0c;数据爆发式增长&#xff0c;数据库技术发展日新月异&a…
阅读更多...
怎么避免电脑数据被拷贝？电脑如何禁用USB功能？

怎么避免电脑数据被拷贝？电脑如何禁用USB功能？

在无纸化办公的今天&#xff0c;很多重要数据都存放在电脑中。为了避免数据泄露&#xff0c;需要采用安全的方式保护电脑数据。那么&#xff0c;该如何避免电脑数据被拷贝呢&#xff1f;下面我们就来了解一下。 方法一&#xff1a;物理隔绝 物理隔绝是一种原始但有效的USB禁用…
阅读更多...
《小程序从入门到入坑》框架语法

《小程序从入门到入坑》框架语法

前言 哈喽大家好&#xff0c;我是 SuperYing&#xff0c;我们继续小程序入门系列&#xff0c;本文将对小程序框架语法进行比较全面的介绍。在《小程序从入门到入坑》简介及工程创建中&#xff0c;我们提到小程序项目结构&#xff0c;主要包括 app.json&#xff0c;app.js&…
阅读更多...
STM32初识1

STM32初识1

什么是单片机&#xff1f; 单片机&#xff08; Single-Chip Microcomputer &#xff09;是一种集成电路芯片&#xff0c;把具有数据处理能力的中央处 理器 CPU 、随机存储器 RAM 、只读存储器 ROM 、多种 I/O 口和中断系统、定时器 / 计数器等功 能&#xff08;可能还包括显示…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023