VUE使用Axios发起请求

0.前言

身为攻城狮没有自己搭建的博客略微显得有的low，经过一系列拖延，开始慢慢搭建我的自制博客。
继上次集成markdown后，需要向后端发起请求保存我的编写的文档，我插入的图片等。
经过几番百度比较感觉axios还是不错的，就用他了

贴出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发起请求

全部代码请看上一篇VUE文章，点我~

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