vue axios发送表单 vue怎么发送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': '' //这个是定义要访问的路径，名字随便写 
            }
        },
    }
   }
}

• 5.配置vue.config.js

• 6.发送请求

后端接口