接口文件的主要内容
(1)接口功能
(2)接口地址
(3)接口参数:参数个数。参数恨意,数据类型、示例值等
(4)请求方式:get | post
(5)返回值
get和post方式的区别(Java):
get:所有的参数在地址栏显示。(Java利用get提交数据将,非ASCII字符需要转码)
post:地址栏没有参数。(Java利用post提交数据,非ASCII字符不需要转码)
一、调取接口先要安装axios与qs依赖
npm install axios --save-dev
随着axios的安装,qs随之也就安装好了,在main.js入口文件中引用
//axios安装好后即可导入
import axios from 'axios';
import qs from 'qs';
//将$axios和qs挂在原型上,方便在实例中能够使用用this.$axios
Vue.prototype.$axios=axios;
Vue.prototype.qs=qs;
二、跨域问题的解决
出现跨域的三种情况:通信协议不同、域名不同、端口不同。
前端地址:http://localhost:8080
后台地址:http://localhost:8080
解决方案:项目根目录\config\index.js
module.exports = {
dev: {
proxyTable: {
'/api':{
target:'http://localhost:8080/product',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
}
三、利用get()请求后台接口
不带参数的get 请求
let url="/api/login.jsp";
this.$axios.get(url).then((res)=>{
//res.data - 接收服务器返回的数据
})
带参数的get请求
let url="/api/login.jsp";
let data={
params:{
//参数列表: 参数名:参数值
}
}
this.$axios.get(url,data).then((res)=>{
//res.data - 接收服务器返回的数据
})
三、利用post()请求后台接口
let url = '/api/staff/passwordCheck.jsp';
let data = {
//参数列表: 参数名:参数值
};
this.$axios.post(url,this.qs.stringify(data)).then(res=>{
//res.data - 接收服务器返回的数据
});