axios哀求中的data和params的区别

玛卡巴卡的卡巴卡玛  金牌会员 | 2024-11-5 22:46:29 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 895|帖子 895|积分 2685

一、
http：超文本传输协议，规定浏览器和服务器之间传输数据的格式
域名：标记访问服务器在互联网中的方位
资源路径：标记资源在服务器下的详细位置
url查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数值2=值2
axios查询参数
语法：使用axios提供的params选项
  1. axios({
  2.     url:'目标资源地址',
  3.     params:{
  4.         参数名：值
  5.     }
  6. })
复制代码
二、常用哀求方式
哀求方法操作
get获取数据
post提交数据
put修改数据（全部）
delete删除数据
patch修改数据（部门）
aixos哀求配置
url：哀求的url网址
method:哀求的方法，get可以省略
data:提交数据
  1. axios({
  2.     url:'目标资源地址',
  3.     method:'请求方法',
  4.     data:{
  5.         参数名：值
  6.     }
  7. })
复制代码
data和params的区别



  • data 用于在发送哀求时附带的数据，通常用于 POST、PUT 和 PATCH 等哀求方法。
  • 发送的 data 会被作为哀求体（request body）发送给服务器。
  1. axios({
  2.   url: 'https://example.com/api/resource',
  3.   method: 'POST',
  4.   data: {
  5.     name: 'John',
  6.     age: 30
  7.   }
  8. });
  10. //简写
  11. axios.post('https://example.com/api/resource', {
  12.   name: 'John',
  13.   age: 30
  14. });
复制代码


  • params 用于发送 URL 查询参数，通常用于 GET 哀求。
  • 这些参数会被附加到 URL 的查询字符串部门。
  1. axios({
  2.   url: 'https://example.com/api/resource',
  3.   method: 'GET',
  4.   params: {
  5.     id: 123,
  6.     sort: 'asc'
  7.   }
  8. });
  10. //简写
  11. axios.get('https://example.com/api/resource', {
  12.   params: {
  13.     id: 123,
  14.     sort: 'asc'
  15.   }
  16. });
复制代码
哀求报文：浏览器按照http协议要求的格式，发送给服务器的内容
(哀求行，哀求头，空行，哀求体)
响应报文：浏览器按照http协议要求的格式，返回给给服务器的内容
（响应行：协议，http响应状态码，状态信息
   响应头：以键值对的格式携带的附加信息，比如：content-type
   空行：分割响应头，空行之后的是服务器返回的资源
   响应体：返回的资源）
http响应状态码

用来表明哀求是否成功
404服务器找不到资源
状态码说明
1xx信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务器错误
token

token访问权限的令牌，本质上是一串字符串。精确登录后，由后端签发并返回
作用：判断是否有登录状态等，控制访问权限
前端只能判断token有无，后端才能判断token的有效性。
判断有无token，没有强制跳转到登录页；登录成功后，保存token令牌字符串到当地，并跳转到内容页面。
  1. const token =localStorage.getItem('token')
  2. if(!token){
  3.     location.href='../login.html'
  4. }
  6. //登录请求
  7. localStorage.setItem('token'，res.data.data)
  8. setTimeout(()=>{
  9.     location.href='../content.html'
  10. },1500)
复制代码
axios哀求拦截器（携带token)
发起哀求前，触发的配置函数，对哀求参数举行额外配置
  1. axios.interceptors.request.use((config)=>{
  2.     const token =localStorage.getItem('token')
  3.     token && (config.headers.Authorization=`Bear ${token}`)
  4.     return config
  5. },(error)=>{
  6.     return Promise.reject(error)
  7. })
复制代码
axios相应拦截器
响应回到then/catch之前，处罚的拦截函数，对响应结果的同一处理。
状态为2xx触发成功回调，其他则触发失败的回调函数
  1. axios.interceptors.response.use((response)=>{
  2.     const result=response.data
  3.     return result
  4. },(error)=>{
  5.     if(error?.response?.status===401){
  6.         alert('token过期')
  7.         localStorage.clear()
  8.         location.href='../login.html'
  9.     }
  10.     return Promise.reject(error)
  11. })
复制代码
富文本编辑器

带样式，多格式的文本，在前端一样平常使用标签配合内联样式实现
快速开始 | wangEditor
使用：wangEditor
编辑器函数，创建工具栏
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  8.     <style>
  9.         #editor—wrapper {
  10.           width: 600px;
  11.           border: 1px solid #ccc;
  12.           z-index: 100; /* 按需定义 */
  13.         }
  14.         #toolbar-container { border-bottom: 1px solid #ccc; }
  15.         #editor-container { height: 500px; }
  16.       </style>
  17. </head>
  18. <body>
  19.     <div id="editor—wrapper">
  20.         <div id="toolbar-container"><!-- 工具栏 --></div>
  21.         <div id="editor-container"><!-- 编辑器 --></div>
  22.     </div>
  23. </body>
  24. </html>
  25. <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  26. <script>
  27.     //创建编辑器函数，创建工具栏函数
  28.     const { createEditor, createToolbar } = window.wangEditor
  29.     //编辑器配置对象
  30.     const editorConfig = {
  31.         placeholder: 'Type here...',
  32.         onChange(editor) {
  33.           const html = editor.getHtml()
  34.           console.log('editor content', html)
  35.           // 也可以同步到 <textarea>
  36.         }
  37.     }
  38.     //创建编辑器
  39.     const editor = createEditor({
  40.         selector: '#editor-container',//创建的位置
  41.         html: '<p><br></p>',//默认内容
  42.         config: editorConfig,//配置项
  43.         mode: 'default', // or 'simple'
  44.     })
  46.     //工具栏配置对象  
  47.     const toolbarConfig = {}
  48.     //创建工具栏
  49.     const toolbar = createToolbar({
  50.         editor,
  51.         selector: '#toolbar-container',
  52.         config: toolbarConfig,
  53.         mode: 'default', // or 'simple'
  54.     })
  55. </script>
复制代码
上传图片

预备标签布局和样式
选择文件并保存在FormData
单独上传图片并得到图片URL地址
回显并切换img标签（隐藏+号上传标签）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .cover .place{
  9.             width: 200px;
  10.             height: 200px;
  11.             text-align: center;
  12.             font-size: 40px;
  13.             line-height: 200px;
  14.             border:1px solid #ddd;
  15.             color:#aaa;
  16.             cursor:pointer;
  17.             display: inline-block;
  18.             vertical-align: top;
  19.         }
  20.         .cover img{
  21.             width: 200px;
  22.             height: 200px;
  23.             vertical-align: top;
  24.         }
  25.         .cover .rounded{
  26.             display: none;
  27.         }
  28.         .show{
  29.             display: inline-block !important;
  30.         }
  31.         .hide{
  32.             display: none !important;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="cover">
  38.         <label for="img">封面：</label>
  39.         <label for="img" class="place">+</label>
  40.         <input type="file" class="img-file" name="img" id="img" hidden>
  41.         <img src="" class="rounded">
  42.     </div>
  43. </body>
  44. </html>
  45. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  46. <script>
  47.     document.querySelector('.img-file').addEventListener('change',async(e)=>{
  48.         const file=e.target.files[0]
  49.         // const fd=new ForemData()
  50.         // fd.append('image',file)
  51.         // //body参数（application/form-data）
  52.         // const res=await axios({
  53.         //     url:'xxxx',
  54.         //     method:'post',
  55.         //     data:fd
  56.         // })
  57.         // console.log('res',res);
  58.         // const imgUrl=res.data.data.url
  59.         // document.querySelector('.rounded').src=imgUrl
  60.         // document.querySelector('.rounded').classList.add('show')
  61.         // document.querySelector('.place').classList.add('hide')
  62.         const objectURL = URL.createObjectURL(file); // 创建临时 URL
  63.         const imgUrl=objectURL
  64.         console.log('imgUrl', imgUrl);
  65.         
  66.         document.querySelector('.rounded').src=imgUrl
  67.         document.querySelector('.rounded').classList.add('show')
  68.         document.querySelector('.place').classList.add('hide')
  69.     })
  70.     //点击ing可以重新切换封面
  71.     document.querySelector('.rounded').addEventListener('click',()=>{
  72.         document.querySelector('.img-file').click()
  73.     })
  74. </script>
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  9.   <style>
  10.     .cover .place{
  11.         width: 200px;
  12.         height: 200px;
  13.         text-align: center;
  14.         font-size: 40px;
  15.         line-height: 200px;
  16.         border:1px solid #ddd;
  17.         color:#aaa;
  18.         cursor:pointer;
  19.         display: inline-block;
  20.         vertical-align: top;
  21.     }
  22.     .cover img{
  23.         width: 200px;
  24.         height: 200px;
  25.         vertical-align: top;
  26.     }
  27.     .cover .rounded{
  28.         display: none;
  29.     }
  30.     .show{
  31.         display: inline-block !important;
  32.     }
  33.     .hide{
  34.         display: none !important;
  35.     }
  36.     #editor—wrapper {
  37.        width: 600px;
  38.        border: 1px solid #ccc;
  39.        z-index: 100; /* 按需定义 */
  40.      }
  41.     #toolbar-container { border-bottom: 1px solid #ccc; }
  42.     #editor-container { height: 300px; }
  43. </style>
  44. </head>
  46. <body>
  47.   <form >
  48.     <input type="text" required name="username"><br>
  49.     <input type="password" name="password"><br>
  50.     <div class="cover">
  51.         <label for="img">封面：</label>
  52.         <label for="img" class="place">+</label>
  53.         <input type="file" class="img-file" name="img" id="img" hidden>
  54.         <img src="" class="rounded">
  55.     </div>
  56.     <div id="editor—wrapper"  name="content">
  57.         <div id="toolbar-container"><!-- 工具栏 --></div>
  58.         <div id="editor-container"><!-- 编辑器 --></div>
  59.         <textarea name="content" class="publish-content hide" ></textarea>
  60.     </div>
  61.     <button class="btn">提交</button>
  62.   </form>
  64. <script src="./1.form-serialize.js"></script>
  65. <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  66. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  67. <script>
  68.     //上传图片
  69.     document.querySelector('.img-file').addEventListener('change',async(e)=>{
  70.         const file=e.target.files[0]
  71.         const objectURL = URL.createObjectURL(file); // 创建临时 URL
  72.         const imgUrl=objectURL
  73.         document.querySelector('.rounded').src=imgUrl
  74.         document.querySelector('.rounded').classList.add('show')
  75.         document.querySelector('.place').classList.add('hide')
  76.     })
  77.     //点击ing可以重新切换封面
  78.     document.querySelector('.rounded').addEventListener('click',()=>{
  79.         document.querySelector('.img-file').click()
  80.     })
  81.     //创建编辑器函数，创建工具栏函数
  82.     const { createEditor, createToolbar } = window.wangEditor
  83.     const editorConfig = {
  84.         placeholder: 'Type here...',
  85.         onChange(editor) {
  86.           const html = editor.getHtml()
  87.           console.log('editor content', html)
  88.           document.querySelector('.publish-content').value=html
  89.           // 也可以同步到 <textarea>
  90.         }
  91.     }
  92.     const editor = createEditor({
  93.         selector: '#editor-container',//创建的位置
  94.         html: '<p><br></p>',//默认内容
  95.         config: editorConfig,//配置项
  96.         mode: 'default', // or 'simple'
  97.     })
  98.     const toolbarConfig = {}
  99.     const toolbar = createToolbar({
  100.         editor,
  101.         selector: '#toolbar-container',
  102.         config: toolbarConfig,
  103.         mode: 'default', // or 'simple'
  104.     })
  105.     //提交
  106.     document.querySelector('.btn').addEventListener('click', async() => {
  107.         const form = document.querySelector('form');
  108.         const data = serialize(form, { hash: true, empty: true });
  109.         data.cover={
  110.           type:1,//封面类型
  111.           images:[document.querySelector('.rounded').src]//封面地址
  112.         }
  113.         console.log(data);
  114.         try{
  115.             const res=await axios({
  116.               url:'',
  117.               method:'post',
  118.               data
  119.             })
  120.             alert('发布成功')
  121.             form.reset()
  122.             location.href='../content.html'
  123.         }catch{
  124.             alert('发布失败')
  125.         }
  127.     })
  128.   </script>
  129. </body>
  130. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

玛卡巴卡的卡巴卡玛

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表