在vue-cli里面使用axios发送get和post请求

最新推荐文章于 2024-07-28 11:59:52 发布

原创最新推荐文章于 2024-07-28 11:59:52 发布 · 1.6k 阅读

9 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Vue 3.0项目中全局安装和配置axios，包括原型链上绑定、axios配置、get/post请求实例，以及后端接口的处理。重点讲解了局部引用和跨域配置，适合初学者和进阶开发者参考。

在vue-cli里面使用axios

全局引用

vue2.0
1.全局安装axios
```
npm install axios
```
2.首先在 main.js 中引入 axios
```
import axios from 'axios'
```
3.将 axios 改写为 Vue 的原型属性
```
Vue.prototype.$http= axios
```

请添加图片描述

4.配置config

请添加图片描述

5.发送请求

请添加图片描述

如果请求失败可以尝试重启前端项目

局部引用

vue2.0
- 1.全局安装axios
```
npm install axios
```
- 2.配置config
- 3.引入axios并发送请求
- 4.重启vue前端项目
  
  注意最终真实请求的路径是不带api的包括api和前面的内容会被target里面的内容替换掉

请求实例

get请求（不带参数）
post请求（不带参数）

请添加图片描述

get请求（带参数）
- 1.直接在url后面接参数
- 2.设置params传参
- 3.node部分

post请求（带参数）

node部分

1.安装body-parser来拿到传过来的数据

npm install body-parser
// cnpm install body-parser

2.require引入

//引入express框架
const express = require('express');
const bodyParser = require('body-parser');
const app = express();  

//拦截所有请求
//extended:false 方法内部使用querystring模块处理请求参数的格式 
//querystring也是一种类似qs类型转换工具
//extended:true 方法内部使用第三方模块qs处理请求参数的格式

// 解析application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended:false}))

//解析application/json
//app.use(bodyParser.json())

app.post('/add',(req,res)=>{  //接收post请求参数  res.send(req.body);})  

app.listen(3000, function () {  console.log('Example app listening on port 3000!')})

请添加图片描述

前端部分

1.安装qs来封装要传的data数据

全局引入

请添加图片描述

局部引入

请添加图片描述

//全局引入

打开控制台输入：npm install qs
在main.js中导入qs插件：import qs from 'qs'
在main.js中配置全局属性：Vue.prototype.$qs = qs
//局部引入
打开控制台输入：npm install qs
在该组件中导入qs插件：import qs from 'qs'

2.使用qs

vue3.0

1.全局安装axios
```
npm install axios
```
2.首先在 main.js 中引入 axios
```
import axios from 'axios'
```
3.在main.js里面改写app

请添加图片描述

改写顺序不能变

4.在项目根文件夹下新建vue.config.js

module.exports = {
  outputDir: 'dist',   //build输出目录
   assetsDir: 'assets', //静态资源目录（js, css, img）
   lintOnSave: false, //是否开启eslint
   devServer: {
       open: true, //是否自动弹出浏览器页面
       host: "localhost", 
       port: '8081', 
       https: false,   //是否使用https协议
       hotOnly: false, //是否开启热更新
       proxy: null,
       //  配置axios
       proxy: {//如需跨域请求多个域名，在此对象进行扩展便可
        '/api': {
            target: 'http://127.0.0.1:4000/',//设置你调用的接口域名和端口号 别忘了加http
            ws: true,
            changeOrigin: true, //允许跨域
            pathRewrite: {
                '^/api': '' //这个是定义要访问的路径，名字随便写 
            }
        },
    }
   }
}

请添加图片描述