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
用于在发送请求时附带的数据,通常用于 POST、PUT 和 PATCH 等请求方法。 -
发送的
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.data
return 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); // 创建临时 URL
const imgUrl=objectURL
console.log('imgUrl', imgUrl);
document.querySelector('.rounded').src=imgUrl
document.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); // 创建临时 URL
const imgUrl=objectURL
document.querySelector('.rounded').src=imgUrl
document.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.wangEditor
const 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>