当前位置: 首页 > news >正文

黑马头条-数据管理平台

目录

项目准备

验证码登录

验证码登录-流程

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 插件

相关文章:

黑马头条-数据管理平台

目录 项目准备 验证码登录 验证码登录-流程 token 的介绍 个人信息设置和 axios 请求拦截器 axios 响应拦截器和身份验证失败 优化-axios 响应结果 发布文章-富文本编辑器 项目准备 技术: • 基于 Bootstrap 搭建网站标签和样式 • 集成 wangEditor 插件…...

API Object设计模式

API测试面临的问题 API测试由于编写简单,以及较高的稳定性,许多公司都以不同工具和框架维护API自动化测试。我们基于seldom框架也积累了几千条自动化用例。 •简单的用例 import seldomclass TestRequest(seldom.TestCase):def test_post_method(self…...

Python 爬虫:多进程,多线程爬虫<提高爬取效率>

关于多进程,多线程的知识,请自行查询资料补充 ~~~~~~~~~~~ 使用多进程: 在python中,使用多进程需要先导包: from threding import Threaddef work(name):for i in range(1000):print(f"我是线程:{n…...

什么是上拉电阻器?上拉和下拉电阻的典型应用

什么是上拉电阻器? 上拉电阻是逻辑电路中使用的电阻,用于确保引脚在所有条件下具有明确定义的逻辑电平。提醒一下,数字逻辑电路有三种逻辑状态:高、低和浮动(或高阻抗)。当引脚未被拉至高或低逻辑电平&…...

centos7安装python3.10

文章目录 1. 安装依赖项2. 下载Python 3.10源码3. 解压源码并进入目录4. 配置安装选项5. 编译并安装Python6. 验证安装7.创建软连接8. 安装pip39. 换源 1. 安装依赖项 sudo yum groupinstall -y "Development Tools" sudo yum install -y openssl-devel bzip2-devel…...

QT事件处理及实例(鼠标事件、键盘事件、事件过滤)

这篇文章通过鼠标事件、键盘事件和事件过滤的三个实例介绍事件处理的实现。 鼠标事件及实例 鼠标事件包括鼠标的移动、按下、松开、单击和双击等。 创建一个MouseEvent项目,通过项目介绍如何获得和处理鼠标事件。程序效果如下图所示。 界面布局代码如下&#xff…...

职场新人必备待办工具 高效待办工作更省心

作为一名初入职场的菜鸟,我曾被繁琐的工作任务压得喘不过气。每天,邮件、会议、项目任务像潮水般涌来,我常常感到力不从心,生怕遗漏了什么重要事项。那种焦虑,就像站在人来人往的地铁站,却不知道自己该搭乘…...

【创作纪念日】我的CSDN1024创作纪念

机缘 注册CSDN是很长时间了,但是上学时因为专业是电气工程,与编程打交道比较少,一直都是寻求帮助,而非内容输出。直到考研后专业改变,成为了主要跟软件编程、计算机知识相关的研究后,才逐步开启自己的CSDN…...

在AvaotaA1全志T527开发板上使用 UART 连接开发板

连接开发板 AvaotaA1提供两种连接串口输出方式,因为AvaotaA1需要DC 12V/2A/5.5-2.1电源适配器才可以启动系统,请先确保电源已接通。 方式一: 使用配套的 TyepC-SUB 转接板 40Gbps雷电线标准TypeC数据线,就可以同步实现 USB 串口…...

【Asterinas】Asterinas 进程启动与切换

Asterinas 进程启动与切换 进程启动 进程创建&#xff1a; Rust pub fn spawn_user_process( executable_path: &str, argv: Vec, envp: Vec, ) -> Result<Arc> { // spawn user process should give an absolute path debug_assert!(executable_path.starts_with…...

CVE-2024-6387 分析

文章目录 1. 漏洞成因2. 漏洞利用前置知识2.1 相关 SSH 协议报文格式2.2 Glibc 内存分配相关规则 3. POC3.1 堆内存布局3.2 服务端解析数据时间测量3.3 条件竞争3.4 FSOP 4. 相关挑战 原文链接&#xff1a;个人博客 近几天&#xff0c;OpenSSH爆出了一个非常严重的安全漏洞&am…...

STM32 ADC精度提升方法

STM32 ADC精度提升方法 Fang XS.1452512966qq.com如果有错误&#xff0c;希望被指出&#xff0c;学习技术的路难免会磕磕绊绊量的积累引起质的变化 硬件方法 优化布局布线&#xff0c;尽量减小其他干扰增加电源、Vref去耦电容使用低通滤波器&#xff0c;或加磁珠使用DCDC时尽…...

Redis为什么设计多个数据库

​关于Redis的知识前面已经介绍过很多了,但有个点没有讲,那就是一个Redis的实例并不是只有一个数据库,一般情况下,默认是Databases 0。 一 内部结构 设计如下: Redis 的源码中定义了 redisDb 结构体来表示单个数据库。这个结构有若干重要字段,比如: dict:该字段存储了…...

零基础学习MySQL---MySQL入门

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、什么是数据库 问&#xff1a;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库呢&#xff1f; 这就不得不提…...

HUAWEI MPLS 静态配置和动态LDP配置

MPLS(Multi-Protocol Label Switching&#xff0c;多协议标签交换技术)技术的出现&#xff0c;极大地推动了互联网的发展和应用。例如&#xff1a;利用MPLS技术&#xff0c;可以有效而灵活地部署VPN(Virtual Private Network&#xff0c;虚拟专用网)&#xff0c;TE(Traffic Eng…...

【Rust】——所有的模式语法

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…...

基于Python的求职招聘管理系统【附源码】

摘 要 随着互联网技术的不断发展&#xff0c;人类的生活已经逐渐离不开网络了&#xff0c;在未来的社会中&#xff0c;人类的生活与工作都离不开数字化、网络化、电子化与虚拟化的数字技术。从互联网的发展历史、当前的应用现状和发展趋势来看&#xff0c;我们完全可以肯定&…...

Python23 使用Tensorflow实现线性回归

TensorFlow 是一个开源的软件库&#xff0c;用于数值计算&#xff0c;特别适用于大规模的机器学习。它由 Google 的研究人员和工程师在 Google Brain 团队内部开发&#xff0c;并在 2015 年首次发布。TensorFlow 的核心是使用数据流图来组织计算&#xff0c;使得它可以轻松地利…...

C++:枚举类的使用案例及场景

一、使用案例 在C中&#xff0c;枚举类&#xff08;也称为枚举类型或enum class&#xff09;是C11及以后版本中引入的一种更加强大的枚举类型。与传统的枚举&#xff08;enum&#xff09;相比&#xff0c;枚举类提供了更好的类型安全性和作用域控制。下面是一个使用枚举类的案…...

中英双语介绍美国的州:明尼苏达州(Minnesota)

中文版 明尼苏达州简介 明尼苏达州位于美国中北部&#xff0c;以其万湖之州的美誉、丰富的自然资源和多样化的经济结构而著称。以下是对明尼苏达州的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要城市。 地理位置 明尼苏达州东接威斯康星州&#xff0…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...