大型的网站开发,主流网站风格,天津网站建设培训课件,中国建筑工程考试网目录 项目准备
验证码登录
验证码登录-流程
token 的介绍
个人信息设置和 axios 请求拦截器
axios 响应拦截器和身份验证失败
优化-axios 响应结果
发布文章-富文本编辑器 项目准备 技术#xff1a; • 基于 Bootstrap 搭建网站标签和样式 • 集成 wangEditor 插件…目录 项目准备
验证码登录
验证码登录-流程
token 的介绍
个人信息设置和 axios 请求拦截器
axios 响应拦截器和身份验证失败
优化-axios 响应结果
发布文章-富文本编辑器 项目准备 技术 • 基于 Bootstrap 搭建网站标签和样式 • 集成 wangEditor 插件 实现 富文本编辑器 • 使用原生 JS 完成 增删改查 等业务 • 基于 axios 与黑马头条线上接口交互 • 使用 axios 拦截器 进行权限判断 目录管理建议这样管理方便查找 • assets资源文件夹图片字体等 • lib资料文件夹第三方插件例如form-serialize • page 页面文件夹 • utils 实用程序文件夹工具插件 验证码登录 目标完成验证码登录后端设置验证码默认为 246810 原因因为短信接口不是免费的防止攻击者恶意盗刷 步骤 1. 在 utils/request.js 配置 axios 请求 基地址 作用提取公共前缀地址配置后 axios 请求时都会 baseURL url 2. 收集手机号和验证码数据 3. 基于 axios 调用验证码登录接口 4. 使用 Bootstrap 的 Alert 警告框反馈结果给用户 验证码登录-流程 token 的介绍 概念访问权限的 令牌 本质上是一串 字符串 创建正确登录后由后端签发并返回 作用判断是否有 登录状态 等控制访问权限 注意 前端 只能判断 token 有无 而 后端 才能判断 token 的 有效性 token 的使用 目标只有登录状态才可以访问内容页面 步骤 1. 在 utils/auth.js 中判断无 token 令牌字符串则强制跳转到登录页手动修改地址栏测试 2. 在登录成功后保存 token 令牌字符串到本地再跳转到首页手动修改地址栏测试 个人信息设置和 axios 请求拦截器 需求设置用户昵称 语法axios 可以在 headers 选项传递请求头参数 问题很多接口都需要携带 token 令牌字符串 解决在 请求拦截器 统一设置公共 headers 选项 axios 请求拦截器发起请求之前触发的配置函数对 请求参数 进行额外配置 1. 什么是 axios 请求拦截器 ✓ 发起请求之前调用的一个 函数 对 请求参数 进行 设置 2. axios 请求拦截器什么时候使用 ✓ 有 公共配置 和设置时统一设置在请求拦截器中 axios 响应拦截器和身份验证失败 axios 响应拦截器响应回到 then/catch 之前触发的 拦截函数 对 响应结果统一处理 例如身份验证失败统一判断并做处理 1. 什么是 axios 响应拦截器 ✓ 响应回到 then/catch 之前触发的 拦截函数 对 响应结果统一处理 2. axios 响应拦截器什么时候触发成功/失败的回调函数 ✓ 状态为 2xx 触发 成功 回调 其他 则触发 失败 的回调函数 优化-axios 响应结果 目标axios 直接接收服务器返回的响应结果 发布文章-富文本编辑器 富文本带样式多格式的文本在前端一般 使用标签配合内联样式实现 富文本编辑器用于编写富文本内容的容器 使用wangEditor 插件
