1.新建request.js文件(我放于util目录下),里面引入axios,创建axios实例,在实例里面作基础路径的配置,暴露出axios实例对象
import axios from 'axios'
const request = axios.create({
baseURL: 'api/', // 基础路径
withCredentials: true // 表示请求可以携带cookie
})
export default request
2.配置具体的请求接口。
新建目录 src/api/index.js 在index.js中定义每一个请求的方法
引入request文件,配置每个请求,注意get请求携带参数时参数在params对象中
import request from '../util/request'
export const getTagList = (params) => {
return request({
method: 'GET',
url: 'shop/1/tag',
params
})
}
// 新增tag
/**
* 参数: name:标签名字
* category:
* type:1
*/
export const creatTagAdd = data => {
return request({
method: 'POST',
url: 'shop/1/tag',
data: data
})
}
3.在页面中使用接口
按序导入接口方法,并使用
import { getGroupPacketById, getGroupPacket } from '../api/index'
async getTagDefined () {
const params = { type: 1 }
const data = await getTagList(params)
async addTagg () {
const arr = { name: this.addTag, type: 1 }
creatTag(arr)
4.跨域的设置
在与src同级的目录中新建vue.config.js文件
module.exports = {
// local Laravel server address for api proxy
devServer: {
proxy: {
'/api': {
target: 'http://106.14.175.81', // 接口的域名
changeOrigin: true, // 是否改变请求的host
}
}
},