Vue·Get或POST请求

注意:如果后端是 application/x-www-form-urlencoded 前端必须将传递的json数据转为form data格式。

(1)安装依赖 (项目cmd终端下运行)

npm install axios

npm install qs -S //转换格式用的

(2)在vue项目的main.js文件中引入axios

import axios from 'axios'

import qs from "qs"

(3)Vue·Get请求

//引入 import axios from ‘axios’

//1】地址带参数
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
  
//2】独立参数
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

或POST请求

//POST请求
axios.post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

//headers:{‘Content-Type’: ‘application/x-www-form-urlencoded’}, //请求头

POST请求 完整例子 vue3

import axios from "axios";
import qs from "qs"; //必须

const data = qs.stringify({//转换格式
			idSchool: '1010',
			intSum: '10'
		})
		const config = {
			headers: {
				'content-Type': 'application/x-www-form-urlencoded'
			}
		}
		axios.post('api/xxxxx', data, config)
			.then((res) => {
				console.log(res.data)//结果
			})
			.catch((err) => {
				console.log(err);
			});

配置跨域:

//项目下 vue.config.js 文件 最后面增加

module.exports = { //node.js 语法
	devServer: {
		// host: '0.0.0.0',
		// port: 80,
		// open: true,
		proxy: {
			'api': { //识别api
				target: 'http://xxx.xxx.xx', //代理的服务器地址涵端口
				changeOrigin: true, //是否跨域
				ws: true, //是否代理 websockets
				//secure: false, //是否https接口
				pathRewrite: { //过滤api字母
					'/api': '' //替换字母
				}
			}
		}
	}
}
153 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。