axios请求中的data和params的区别

一、

http:超文本传输协议,规定浏览器和服务器之间传输数据的格式

域名:标记访问服务器在互联网中的方位

资源路径:标记资源在服务器下的具体位置

url查询参数:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数值2=值2

axios查询参数

语法:使用axios提供的params选项

axios({url:'目标资源地址',params:{参数名:值}
})

二、常用请求方式

请求方法操作
get获取数据
post提交数据
put修改数据(全部)
delete删除数据
patch修改数据(部分)

aixos请求配置

url:请求的url网址

method:请求的方法,get可以省略

data:提交数据

axios({url:'目标资源地址',method:'请求方法',data:{参数名:值}
})

data和params的区别

  • data 用于在发送请求时附带的数据,通常用于 POSTPUTPATCH 等请求方法。

  • 发送的 data 会被作为请求体(request body)发送给服务器。

axios({url: 'https://example.com/api/resource',method: 'POST',data: {name: 'John',age: 30}
});//简写
axios.post('https://example.com/api/resource', {name: 'John',age: 30
});
  • params 用于发送 URL 查询参数,通常用于 GET 请求。

  • 这些参数会被附加到 URL 的查询字符串部分。

axios({url: 'https://example.com/api/resource',method: 'GET',params: {id: 123,sort: 'asc'}
});//简写
axios.get('https://example.com/api/resource', {params: {id: 123,sort: 'asc'}
});

请求报文:浏览器按照http协议要求的格式,发送给服务器的内容

(请求行,请求头,空行,请求体)

响应报文:浏览器按照http协议要求的格式,返回给给服务器的内容

(响应行:协议,http响应状态码,状态信息

   响应头:以键值对的格式携带的附加信息,比如:content-type

   空行:分割响应头,空行之后的是服务器返回的资源

   响应体:返回的资源)

http响应状态码

用来表明请求是否成功

404服务器找不到资源

状态码说明
1xx信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务器错误

token

token访问权限的令牌,本质上是一串字符串。正确登录后,由后端签发并返回

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

前端只能判断token有无,后端才能判断token的有效性。

判断有无token,没有强制跳转到登录页;登录成功后,保存token令牌字符串到本地,并跳转到内容页面。

const token =localStorage.getItem('token')
if(!token){location.href='../login.html'
}//登录请求
localStorage.setItem('token',res.data.data)
setTimeout(()=>{location.href='../content.html'
},1500)

axios请求拦截器(携带token)

发起请求前,触发的配置函数,对请求参数进行额外配置

axios.interceptors.request.use((config)=>{const token =localStorage.getItem('token')token && (config.headers.Authorization=`Bear ${token}`)return config
},(error)=>{return Promise.reject(error)
})

axios相应拦截器

响应回到then/catch之前,处罚的拦截函数,对响应结果的统一处理。

状态为2xx触发成功回调,其他则触发失败的回调函数

axios.interceptors.response.use((response)=>{const result=response.datareturn result
},(error)=>{if(error?.response?.status===401){alert('token过期')localStorage.clear()location.href='../login.html'}return Promise.reject(error)
})

富文本编辑器

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

快速开始 | wangEditor

使用:wangEditor

编辑器函数,创建工具栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"><style>#editor—wrapper {width: 600px;border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container { border-bottom: 1px solid #ccc; }#editor-container { height: 500px; }</style>
</head>
<body><div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container"><!-- 编辑器 --></div></div>
</body>
</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>

上传图片

准备标签结构和样式

选择文件并保存在FormData

单独上传图片并得到图片URL地址

回显并切换img标签(隐藏+号上传标签)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cover .place{width: 200px;height: 200px;text-align: center;font-size: 40px;line-height: 200px;border:1px solid #ddd;color:#aaa;cursor:pointer;display: inline-block;vertical-align: top;}.cover img{width: 200px;height: 200px;vertical-align: top;}.cover .rounded{display: none;}.show{display: inline-block !important;}.hide{display: none !important;}</style>
</head>
<body><div class="cover"><label for="img">封面:</label><label for="img" class="place">+</label><input type="file" class="img-file" name="img" id="img" hidden><img src="" class="rounded"></div>
</body>
</html>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>document.querySelector('.img-file').addEventListener('change',async(e)=>{const file=e.target.files[0]// const fd=new ForemData()// fd.append('image',file)// //body参数(application/form-data)// const res=await axios({//     url:'xxxx',//     method:'post',//     data:fd// })// console.log('res',res);// const imgUrl=res.data.data.url// document.querySelector('.rounded').src=imgUrl// document.querySelector('.rounded').classList.add('show')// document.querySelector('.place').classList.add('hide')const objectURL = URL.createObjectURL(file); // 创建临时 URLconst imgUrl=objectURLconsole.log('imgUrl', imgUrl);document.querySelector('.rounded').src=imgUrldocument.querySelector('.rounded').classList.add('show')document.querySelector('.place').classList.add('hide')})//点击ing可以重新切换封面document.querySelector('.rounded').addEventListener('click',()=>{document.querySelector('.img-file').click()})
</script>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"><style>.cover .place{width: 200px;height: 200px;text-align: center;font-size: 40px;line-height: 200px;border:1px solid #ddd;color:#aaa;cursor:pointer;display: inline-block;vertical-align: top;}.cover img{width: 200px;height: 200px;vertical-align: top;}.cover .rounded{display: none;}.show{display: inline-block !important;}.hide{display: none !important;}#editor—wrapper {width: 600px;border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container { border-bottom: 1px solid #ccc; }#editor-container { height: 300px; }
</style>
</head><body><form ><input type="text" required name="username"><br><input type="password" name="password"><br><div class="cover"><label for="img">封面:</label><label for="img" class="place">+</label><input type="file" class="img-file" name="img" id="img" hidden><img src="" class="rounded"></div><div id="editor—wrapper"  name="content"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container"><!-- 编辑器 --></div><textarea name="content" class="publish-content hide" ></textarea></div><button class="btn">提交</button></form><script src="./1.form-serialize.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>//上传图片document.querySelector('.img-file').addEventListener('change',async(e)=>{const file=e.target.files[0]const objectURL = URL.createObjectURL(file); // 创建临时 URLconst imgUrl=objectURLdocument.querySelector('.rounded').src=imgUrldocument.querySelector('.rounded').classList.add('show')document.querySelector('.place').classList.add('hide')})//点击ing可以重新切换封面document.querySelector('.rounded').addEventListener('click',()=>{document.querySelector('.img-file').click()})//创建编辑器函数,创建工具栏函数const { createEditor, createToolbar } = window.wangEditorconst editorConfig = {placeholder: 'Type here...',onChange(editor) {const html = editor.getHtml()console.log('editor content', html)document.querySelector('.publish-content').value=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'})//提交document.querySelector('.btn').addEventListener('click', async() => {const form = document.querySelector('form');const data = serialize(form, { hash: true, empty: true });data.cover={type:1,//封面类型images:[document.querySelector('.rounded').src]//封面地址}console.log(data);try{const res=await axios({url:'',method:'post',data})alert('发布成功')form.reset()location.href='../content.html'}catch{alert('发布失败')}})</script>
</body>
</html>

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

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

相关文章

设计模式-七个基本原则之一-开闭原则 + SpringBoot案例

开闭原则:(SRP) 面向对象七个基本原则之一 对扩展开放&#xff1a;软件实体&#xff08;类、模块、函数等&#xff09;应该能够通过增加新功能来进行扩展。对修改关闭&#xff1a;一旦软件实体被开发完成&#xff0c;就不应该修改它的源代码。 要看实际场景&#xff0c;比如组内…

Scala的List

1.定义List的类型方式为List[ T ],T表示为数据类型。 2.List是一个不可变的集合&#xff0c;想要获取可变的序列就需要ListBuffer&#xff0c;通过-或方式添加或删除元素&#xff0c;还可以调用remove方法移除元素。 def main(args: Array[String]): Unit {//1.建立 可变列表…

[zotero]Ubuntu搭建WebDAV网盘

搭建Ubuntu Apache WebDAV网盘的综合步骤&#xff0c;使用666端口&#xff1a; 安装Apache和WebDAV模块&#xff1a; sudo apt update sudo apt install apache2 sudo a2enmod dav sudo a2enmod dav_fs创建WebDAV目录&#xff1a; sudo mkdir /var/www/webdav sudo chown www-d…

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、1×1 卷积层、汇聚层、多通道汇聚层

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、11 卷积层、汇聚层、多通道汇聚层 多输入多输出通道多通道输入的卷积示例&#xff1a;多通道的二维互相关运算 多输出通道实现多通道输出的互相关运算 11 卷积层11 卷积的作用 使用全连接层实现 11 卷积小结 …

如何解读多年连续发布的指数?

解读多年连续发布的指数是投资者和分析师理解市场趋势、预测未来走向的重要手段。以下是一些关键步骤和方法&#xff0c;有助于系统地解读多年连续发布的指数&#xff1a; 一、收集历史数据 来源&#xff1a;从财经网站、证券交易所官方网站或专业的金融数据服务提供商处获取…

Spring——入门

概述 Spring是什么 Spring是一款主流的Java EE轻量级开源框架&#xff0c;其目的适用于简化Java企业级应用开发难度和开发周期。Spring用途不仅限于服务器端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任何Java应用都可以从Spring中受益。Spring框架…

计算机毕业设计Python+Neo4j中华古诗词可视化 古诗词智能问答系统 古诗词数据分析 古诗词情感分析 PyTorch Tensorflow LSTM

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

vue+exceljs前端下载、导出xlsx文件

首先安装插件 npm install exceljs file-saver第一种 简单导出 //页面引入 import ExcelJS from exceljs; import {saveAs} from file-saver; export default {methods: { /** 导出操作 */async handleExportFun() {let that this// 获取当前年月日 用户下载xlsx的文件名称设…

潮玩宇宙方块兽系统开发:可定制UI与多种游戏内嵌助力个性化体验

潮玩宇宙方块兽系统开发正在推动潮玩与游戏的融合&#xff0c;通过个性化的UI设计和多游戏内嵌模式&#xff0c;为用户带来了独一无二的体验。本文将从可定制UI、多游戏内嵌功能以及系统实现等方面入手&#xff0c;探讨如何构建一个极具吸引力的潮玩宇宙方块兽系统。 一、可定制…

【Windows修改Docker Desktop(WSL2)内存分配大小】

记录一下遇到使用Docker Desktop占用内存居高不下的问题 自从使用了Docker Desktop&#xff0c;电脑基本每天都需要重启&#xff0c;内存完全不够用&#xff0c;从16g扩展到24&#xff0c;然后到40G&#xff0c;还是不够用&#xff1b;打开Docker Desktop 运行时间一长&#x…

HTTP 和 HTTPS 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】

HTTP 和 HTTPS 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】 &#x1f310; 在现代网络通信中&#xff0c;HTTP&#xff08;超文本传输协议&#xff09;和 HTTPS&#xff08;安全超文本传输协议&#xff09;是两种非常重要的协议。理解它们之间的区别和各自的特点…

无人机之姿态融合算法篇

无人机的姿态融合算法是无人机飞行控制中的核心技术之一&#xff0c;它通过将来自不同传感器的数据进行融合&#xff0c;以实现更加精确、可靠的姿态检测。 一、传感器选择与数据预处理 无人机姿态融合算法通常依赖于多种传感器&#xff0c;包括加速度计、陀螺仪、磁力计等。这…

pta 树

L2-006 树的遍历 - 团体程序设计天梯赛-练习集 #include <bits/stdc.h> #define int long long #define x first #define y second using namespace std; const int N35; pair<int,int> tree[N]; int post[N],in[N]; int n; int build(int la,int lb,int ra,int r…

Transformer 中的残差连接:为什么在正则化前加入残差?

7. Residual Connection Transformer 中的残差连接&#xff1a;为什么在正则化前加入残差&#xff1f; Transformer 中的编码器块&#xff08;EncoderBlock&#xff09;设计了一项重要的结构&#xff1a;残差连接&#xff08;Residual Connection&#xff09;&#xff0c;即在…

大语言模型LLMs在医学领域的最新进展总结

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 相比其他学科&#xff0c;医学AI&#xff0c;是发表学术成果最多的领域。 医学数据的多样性和复杂性&#xff08;包括文本、图像、基因组数据等&#xff09;&#xff0c;使得…

15分钟学 Go 第 43 天:前端与Go的结合

第43天&#xff1a;前端与Go的结合 目标&#xff1a;了解Go如何与前端交互&#xff0c;前端使用Vue.js 在现代Web开发中&#xff0c;Go语言常用于后端开发&#xff0c;而Vue.js是一个流行的前端框架&#xff0c;用于构建用户界面。结合二者&#xff0c;可以构建高效、可维护的…

项目:使用LNMP搭建私有云存储

一、准备工作 恢复快照&#xff0c;关闭安全软件 systemctl status firewalld //检查防火墙是否关闭getenforce //查看SElinux的执行状态which nmcli //检查虚拟机网络状态 二、搭建LNMP环境 yum -y nstall nginx mariadb-server php* //搭建环境三、上传软件 …

初学者指南:用例图——开启您的软件工程之旅

目录 背景&#xff1a; 基本组成&#xff1a; 关联&#xff08;Assciation&#xff09;&#xff1a; 包含&#xff08;Include&#xff09;&#xff1a; 扩展&#xff08;Extend&#xff09;&#xff1a; 泛化&#xff08;Inheritance&#xff09;&#xff1a; 完整银行…

针对oneplus6 怎么选择lineage源码的什么分支

针对oneplus6 怎么选择lineage源码的什么分支 &#xff1a; 先刷入 官方LineageOS-20 从而正常启动, 正常启动 说明 官方LineageOS-20 中的驱动是正常的 再用 编译LineageOS源码的分支20 &#xff0c;并用https://github.com/LineageOS/android_device_oneplus_enchilada/blob…

Python yeild关键字

定义生成器函数 def sync_generator(n):for i in range(n):yield i python复制代码 def sync_generator(n): 定义了一个名为 sync_generator 的函数&#xff0c;它接受一个参数 n。for i in range(n): 在函数内部&#xff0c;有一个 for 循环&#xff0c;它遍历从 0 到 n-1 …