VUE使用Axios发起请求

最新推荐文章于 2024-09-26 16:10:57 发布
最新推荐文章于 2024-09-26 16:10:57 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： # 前端框架Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42119415/article/details/111986429
版权

0.前言

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

贴出axios中文网地址

2021-1-8修改：
发现axios和vue-axios的关系：axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定，就像上次写的第一节里描述使用Vue.prototype.$axios = axios;绑到原型链上。而vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装，使用 Vue 的插件写法，更符合 Vue 整体生态环境。集成见第二节。

贴出网站地址

2021-3-15修改：
封装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遗留问题

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

2.集成axios和vue-axios

发现axios和vue-axios的关系：axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定，就像上次写的第一节里描述使用Vue.prototype.$axios = axios;绑到原型链上。而vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装，使用 Vue 的插件写法，更符合 Vue 整体生态环境。

2.1导入

npm install --save axios vue-axios

2.2引入

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

// 使用
Vue.use(VueAxios, axios)

2.3使用

一个Methods里的方法，获取文章列表

listArticle(){
    // 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
    // 由于 main.js 里定义了每个请求前缀，此处的 / 即为http://localhost:2716
    this.axios.get('/listArticle',{
        params:{
            search : "",
            pageNum :this.currentPage,
            pageSize :this.pageSize
        }
    }).then((response) => {
        console.log(response.data)
        if(response.data.Result == 1){
            this.items = response.data.Data
            this.tableData = response.data.Data
            this.articleTotal = response.data.TotalCount
        }
    })
}

这里在昨天引入了Element的表格、分页组件，嘿比自己写表格样式和分页样式方便太多了
此页全部代码如下

<template>
    <div>
        <Vheader></Vheader>
        <div class="articleList">
	        <!--  Element表格组件-->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column
                fixed
                prop="addTime"
                label="日期"
                width="180">
                </el-table-column>

                <el-table-column
                prop="articleName"
                label="文章名"
                width="400">
                </el-table-column>

                <el-table-column
                label="操作"
                width="100">

                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.articleId)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>

            <!--  Element分页组件-->
            <div class="page_item">
                <div  class="page_item_float">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[20, 40, 60, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="articleTotal">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vheader from './vheader.vue'
// import Vfooter from './vfooter'
    export default {
        data () {
            return {
                msg: "",
                items : [],
                tableData: [],
                currentPage: 1,
                articleTotal:0,
                pageSize:20
            }
        },
        created (){
            // 组件创建完后获取数据，
            // 此时 data 已经被 observed 了
            this.listArticle(1)
        },
        components:{
            Vheader,
            // Vfooter
        },
        watch:{
            // 如果路由有变化，会再次执行该方法
            '$route': 'listArticle'
        },
        methods :{
            listArticle(){
                // 由于 main.js 里全局定义的 axios,此处直接使用 $axios 即可。
                // 由于 main.js 里定义了每个请求前缀，此处的 / 即为http://localhost:2716
                this.axios.get('/listArticle',{
                    params:{
                        search : "",
                        pageNum :this.currentPage,
                        pageSize :this.pageSize
                    }
                }).then((response) => {
                    console.log(response.data)
                    if(response.data.Result == 1){
                        this.items = response.data.Data
                        this.tableData = response.data.Data
                        this.articleTotal = response.data.TotalCount
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.listArticle()
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.listArticle()
            },
            handleClick(row) {
                console.log(row);
                console.log(row.articleId);
            }
        }
    }
</script>

<style scoped>
.articleList{
    width: 70%;
    margin: 0 auto;
}
.page_item{
  width:80%;
  margin: 0 auto ;
  background: green;
}
.page_item_float{
  margin: 10px auto;
  float: left;
}
</style>

2.4齐活儿~，展示

进入页面就直接发起请求，看这篇文章
在这里插入图片描述

3.封装Axios

查看Vuex的使用的2.4.2章节

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

园长的牧歌
关注
专栏目录
Vue使用axios进行请求
weixin_45648000的博客
01-02 397
安装axios 1）方案一：使用npm进行安装 cnpm install axios --save 2）vue3.0以上可以使用vue ui进行依赖安装 以项目目录打开终端； vue ui 安装axios的依赖 全局引入并定义使用axios 打开main.js文件 1）引入axios import axios from 'axios' 2）设置baseurl axios.defaults.baseURL = 'http://rambuild.cn:8888/api/private/v1' 3）定
vue 使用axios 数据请求第三方插件的使用教程详解
12-04
这样，你可以在任何Vue组件中使用`this.$axios`来发起请求。例如，发起GET和POST请求： ```javascript // GET请求 this.$axios.get('/user?ID=1234') .then(response => { console.log(response) }) .catch...
VUE 之 AXIOS请求
热门推荐
yhl521112的博客
08-27 1万+
AXIOS介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios是我们在vue项目中常见封装http请求相对受欢迎的，优点如下： 简单易用，api接近于jquery，比原生的fetch之类的简单， 浏览器兼容性好，都能兼容IE7，使用fetch就得自己处理兼容 通用性好，能在node和浏览器中使用 api一致 稳定大牌，vue官网文档有推荐 以上几点呢，是大多数公司选择使用axios的主要原因，通过简单的了解我们应该知道axios是干嘛的
Vue之axios请求
最新发布
m0_55297736的博客
09-26 1162
Vue的axios请求
vue中axios请求
m0_74265396的博客
06-26 100
qs.stringify()将对象序列化成URL的形式，以&进行拼接。post请求使用data传参,需要使用qs处理参数。qs是axios的一个数据序列化工具，可通过。qs.parse()将URL解析成对象的形式。get请求使用params传参。
vue中的axios的请求（一）
一个小白的成长历程
07-11 3055
axios的基本使用；安装使用axios，并进行请求与拦截；进行区分不同的环境变量来配置全局的变量；
Vue使用axios出现options请求方法
10-16
在Vue项目中，我们经常使用axios库来进行HTTP请求。然而，有时在进行跨域请求时，浏览器会先发送一个预检请求（OPTIONS请求），这是由于CORS（Cross-Origin Resource Sharing，跨源资源共享）机制的规定。当请求的...
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
`axios.defaults.withCredentials = true` 这行代码是关键，它告诉axios在发起请求时携带当前的会话cookie。这样，当你在登录后设置了cookie，比如用户信息、会话ID等，这些信息将会被自动添加到Ajax请求的头部，供...
Vue中 axios delete请求参数操作
01-21
vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数，url,data和config，所以在使用这两个时，可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数：url和config，data...
vue axios请求频繁时取消上一次请求的方法
10-17
token用于传递给axios发起请求时使用，而cancel方法可以用来触发取消操作。在cancelRequest方法中，检查当前的CancelToken源是否是函数类型，如果是，则调用该函数并传入“终止请求”作为参数来取消上一次的请求。 ...
vue中axios请求篇
zhangxueyou2223的博客
08-30 682
利用axios来发起请求，但是前期需要配置。不封装单独使用和封装使用
Vue使用axios发送请求
qq_45525848的博客
03-07 1243
Vue使用axios发送请求
在vue中使用axios发送请求
l12345666777的博客
12-21 1832
axios是基于promise的http库，可以运行在浏览器和nodejs。特性：1.运行在浏览器和nodejs2.基于promise，可以使用promise实例方法3.可以对请求和响应拦截处理4.运行在浏览器创建XMLHttpRequests5.运行在nodejs创建http请求。
vue---Axios网络请求
cmHuney的博客
08-17 611
在网页中看到控制台显示参数缺失，请传递完整参数，此时参数是对的，出现这种问题是因为网络请求接收参数的方式并不是对象类型，而是一个字符串类型，那么这个时候就需要做一个数据的转换。因为挂载全局是把axios挂载到了全局，给它起了新的名字叫$axios，所以写的时候，直接读$axios就行了。在vue当中使用比较方便的网络请求，Axios是一个基于promise的网络请求库，Axios的应用是需要单独安装的。1、在终端输入cnpm install --save axios，库比较小，安装比较快。
Vue之axios网络请求21
钢铁直女
07-09 524
Vue之axios选择网络模块 选择网络模块 传统ajax（基于XHR） 配置和调用等环混乱 编码问题 jquery-ajax Vue-resource（基于Vue1.0） 不再维护、更新 axios框架 浏览器中发送XHR请求 在node中发送http请求 支持Promise 拦截请求和响应 转换请求和响应数据 …… 安装axios npm install axios --save 模拟请求：httpbin.org 接口url http://123.207.32.3
vue项目中使用axios请求数据，axios请求封装
Mgf_Yzy的博客
11-01 615
vue项目中使用axios请求数据，axios请求封装 第一步，先下载axios依赖 npm i axios --save 第二步，创建service.js文件 // 引入axios import axios from 'axios' const service = axios.create({ // baseURL会自动地加载到接口地址上 baseURL: "http://127.0.0.1：8080" // 指定请求超时的毫秒数，请求花费的时间超过timeou
vue3中，axios的几种用法之抽离接口、post请求、get请求、.env.dev、网关标识、基准地址
weixin_44867717的博客
03-28 1664
【代码】vue3中，axios的几种用法之抽离接口、post请求、get请求、.env.dev、网关标识、基准地址。
vue基础-axios封装/同步请求
weixin_40017062的博客
07-24 8896
vue项目中封装axios
Vue项目中axios网络请求封装及使用示例
之后，便可以使用该模块发起请求。例如，在一个vue组件的方法中，可以这样使用： ``` import request from '../network/request'; request({ url: '需要请求的接口地址' }).then(res => { // 对结果res进行处理...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

园长的牧歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值