使用axios调取接口
- 首先在项目中通过npm安装axios,
npm i axios -S
- 在main.js中引入,
import axios from "axios"
- 在main.js中,在vue原型上进行设置
vue.prototype.$axios=axios
这样就设置好了,然后在各个组件中使用了。
this.$axios({
url:url,
methods:"get",
params:{}
})
this.$axios({
url:url,
methods"post",
data:{}
})
解决跨域问题
在vue.config.js中进行设置
在modules.exports中写
devServer:{
proxy:{
"/api":{
target:"公共url", // 设置公共url
ws:true, // 支持跨域,默认为true
changeOrigin:true, // 代理服务器
pathRewrite:{ // 地址重写为
"^/api":"" // 正则匹配
}
}
}
}
api文件夹
我们还可以在src文件夹中创建一个api文件夹,里面可以存放各个组件封装的方法的js文件
还有一个知识点就是拦截器,拦截器分为请求拦截和响应拦截
- 请求拦截,是你在发送数据时进行拦截,可以在这个阶段进行一些操作
- 响应拦截,是服务器给你返回数据时进行拦截,一般来说进入这个阶段的时候,我们就是成功进入了接口,并获取到了数据,即使是反悔了err也是成功进入了接口,一般这种情况就是因为传的参数是不正确的,这个时候就要好好检查一下传过去的参数了
在api文件夹中创建一个index.js文件,里面放我们封装的axios请求拦截和响应拦截
import axios from "axios" // 引入axios
axios.defaults.baseUrl = "/api" // 将公共地址提取出来
axios.interceptors.request.use(config=>{ // 请求拦截
// console.log(config,"请求拦截");
// config.headers.token=123
// config.headers.name ="joke"
return config
},err=>console.log(err))
axios.interceptors.response.use(response=>{ // 响应拦截
// console.log(response,"响应拦截");
response=response.data
return response
},err=>console.log(err))
export default axios // 将axios导出出去
封装的axios使用:
在api文件中为组件创建一个js文件,例如list.js
里面存放这个组件需要使用的方法,在这个js文件中首先要将我们封装好的axios导入:import axios from "import axios from "./index";"
然后创建方法并导出出去
export let fun= (url,type,data)=>{
return axios({
url:url, // 请求地址
methods:type, // get/post
params:data // 传参,对象形式
})
}
在vue组建中使用js文件中封装的方法,要先将方法引入
import {fun} from "@/api/list.js"
fun(url,get,{data:data}).then(res=>console.log(res)).catch(err=>console.log(err))
如果是从同一个js文件中引入不同的方法,可以在花括号中直接添加,每个方法名之间用英文逗号隔开。
传参方式
- query string :地址栏拼接
- formData:form表单提交方式
- request:data提交
request的数据形式:data:{name:1,age:2}
formData :将request的数据形式转换为:?name=1age=2,拼接在url后面
query String形式需要安装qs,
1. 通过npm安装npm i qs
2. 在main.js中引入import qs from "qs"
3. 在vue原型中添加vue.prototype.$qs=qs
4. 使用this.$qs.stringify({name:1,age:2})
vant
vant是一个ui框架,一般用于制作手机app项目
如果我们做的是vue2项目,就用vant2,如果是vue3项目,就用vant3
安装vant
通过npm,npm i vant@latest-v2 -S
在main.js中导入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
然后根据操作手册,在各个组建中将需要使用的模块引入就可以
大概操作如此,具体可以查阅vant官网vant官网地址