一、
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.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>