VUE使用Axios发起请求
程序员文章站
2022-03-06 18:24:52
0.前言身为程序原没有自己搭建的博客略微显得有的low,经过一系列拖延,开始慢慢搭建我的自制博客。继上次集成markdown后,需要向后端发起请求保存我的编写的文档,我插入的图片等。经过几番百度比较感觉axios还是不错的,就用他了贴出axios中文网地址1.盘他1.1项目构架依然优先贴出架构1.2引入import axios from 'axios'axios.get();axios.defaults.headers.common["token"] = ""axios.def...
0.前言
身为攻城狮没有自己搭建的博客略微显得有的low,经过一系列拖延,开始慢慢搭建我的自制博客。
继上次集成markdown后,需要向后端发起请求保存我的编写的文档,我插入的图片等。
经过几番百度比较感觉axios还是不错的,就用他了
1.盘他
1.1项目构架
依然优先贴出架构
1.2引入
import axios from 'axios'
axios.get();
axios.defaults.headers.common["token"] = ""
axios.defaults.withCredentials = true
axios.defaults.headers.post["Content-type"] = "application/json"
axios.defaults.baseURL = '/api' //设置统一路径前缀,解决跨域问题
此时涉及到一个跨域问题,即:前端8080端口访问后端2716端口为一种跨域(当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域)
1.3解决跨域
1.3.1在main.js
如1.2添加axios.defaults.baseURL = '/api' //设置统一路径前缀,解决跨域问题
1.3.2在config->index.js里的module.exports里添加
'/api':{
target: "http://localhost:2716/",
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
如图,如果没有proxyTable就添加
这样他就会把所有请求都加上/api,然后所有的/api都过滤代理成http://localhost:2716/
这个地址,就解决了跨域问题
1.4发起请求
1.4.1给后端发送图片
使用继承的MarkDown,直接这样就行了
我遇到的坑:
集成markdown中反写使用$vm.$img2Url(pos, url.data)
就行,我是怎么试都不好用,知道原因就是this的问题,组件之间调用,这块掌握不够,弄不懂。就勉强用下面的先用,下次搞懂再来改~⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
<mavon-editor v-model="push.articleBody" ref="md" @imgAdd="imgAdd" @imgDel="imgDel" />
imgAdd (pos, $file) {
let formdata = new FormData()
formdata.append('file', $file)
this.$axios({
url: '/file/upload',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' ,
'aaa':'aaa'
},
}).then((url) => {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
// this.$vm.$img2Url(pos, url.data);
this.$refs.md.$img2Url(pos, url.data);
})
}
1.4.2给后端发送保存文章
这样有点繁琐,下次找到封装成对象的方法再来改下~
<template>
<div>
<div class="leftMenu">
<li>保存</li>
<li>预览</li>
<li @click="updateArticle">发布</li>
</div>
<div id="editor">
<div>
<p>文章标题</p>
<input type="text" v-model="push.articleName">
</div>
<mavon-editor v-model="push.articleBody" ref="md" @imgAdd="imgAdd" @imgDel="imgDel" />
</div>
<div>{{push.articleBody}}</div>
<div>{{push.articleName}}</div>
</div>
</template>
data(){
return {
push:{
articleBody: "",
articleDescription: "",
articleFlag: 0,
articleId: 0,
articleImgUrl: "",
articleName: "",
classifyIdList: [
1
],
collectStatus: true,
commentStatus: true,
starStatus: true
}
}
}
updateArticle(){
var add = {
articleBody: "",
articleDescription: "",
articleFlag: 0,
articleImgUrl: "",
articleName: "",
classifyIdList: [
1
],
collectStatus: true,
commentStatus: true,
starStatus: true
}
add.articleBody = this.push.articleBody
add.articleDescription = this.push.articleDescription
add.articleFlag = this.push.articleFlag
add.articleImgUrl = this.push.articleImgUrl
add.articleName = this.push.articleName
add.classifyIdList = this.push.classifyIdList
add.collectStatus = this.push.collectStatus
add.commentStatus = this.push.commentStatus
add.starStatus = this.push.starStatus
document.cookie="user_info=1;path = /"
this.$axios({
url :'/admin/updateArticle',
method : 'post',
data: add
}).then((url) => {
if(url.data.Result == 1){
alert(url.data.Message)
}else{
alert(url.data.Message)
}
})
}
1.5OK大功告成~展示
1.6遗留问题
图片保存本地,浏览器不能读取
躬身自省,淳朴而谦逊否——文文的博客
前辈见之,如有问题,麻烦留言斧正。
本文地址:https://blog.csdn.net/weixin_42119415/article/details/111986429
上一篇: vue项目微前端试水
下一篇: 运筹系列61:Julia中使用GPU