在一个index中设置
import axios from "axios"
// 储存自己的baseURL
const baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
axios.defaults.baseURL = baseURL
//通过axios请求拦截器添加token,保证拥有获取数据的权限
// 左侧接口数据需要拦截
axios.interceptors.request.use(config =>{
// console.log(config)
config.headers.Authorization = window.localStorage.getItem('mytoken')
return config //最后必须return
})
// 不管是post还是get都可以这样写
// 登录验证
// params对象
export const checkUser = params => {
return axios.post('login', params).then(res => res.data)
}
// 获取左侧菜单列表
export const MenuList = params => {
return axios.get('menus', params).then(res => res.data)
}
// 这个是带参数的接口
export const queryInfo={query:'', pagenum:1, pagesize:2}
export const userList = params =>{
// 定义参数,写在一个对象里面
// 用params来接收参数
return axios.get('users',{params:queryInfo}).then(res =>res.data)
}
获取的时候
1.引用
在需要的.vue页面
import {checkUser} from "../api/index.js"
2.调用
checkUser(formName).then(res=>{
if(res.meta.status===200){
// 把token存进去localStorage
localStorage.setItem('mytoken',res.data.token); //存进去的步骤就是这样写的
this.$router.push({path:'/home'})
// 使用vuex共享用户名
this.$store.commit('setUsername',res.data.username)
}else{
this.$message({
type:"error",
message:"用户名或密码错误"
})
}
})
另外一种方法
在main.js配置
import axios from "axios"
// 储存自己的baseURL
const baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
axios.defaults.baseURL = baseURL
Vue.prototype.$http = axios
获取接口
this.$http.put(`users/${userChangeDate.id}/state/${userChangeDate.mg_state}`).then(res=>{
console.log(res.data)
if(res.data.meta.status!==200){
return this.$message.error("状态改变失败")
}
this.$message.success("状态改变成功")
})
简化params操作有两种,一种是上面的,一种是下面的
async userList(){
// 这是另外一个传值的方法
// 简化pramas对象,使用async await
const {data:res} = await this.$http.get('users',{params:this.queryInfo}) //将data重命名为res
if(res.meta.status!==200) return this.$message.error("获取数据失败")
// 获取用户列表
this.userlist=res.data.users
// 获取页码条数
this.total=res.data.total
}