欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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还是不错的,就用他了

贴出axios中文网地址

1.盘他

1.1项目构架

依然优先贴出架构
VUE使用Axios发起请求

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就添加
VUE使用Axios发起请求
这样他就会把所有请求都加上/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大功告成~展示

VUE使用Axios发起请求
VUE使用Axios发起请求

1.6遗留问题

图片保存本地,浏览器不能读取

躬身自省,淳朴而谦逊否——文文的博客
前辈见之,如有问题,麻烦留言斧正。

本文地址:https://blog.csdn.net/weixin_42119415/article/details/111986429