第一步是在src目录下创建一个文件夹叫utils然后在utils文件夹创建一个文件叫auth.js
import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) return 'eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2UiOiJleGFtIiwidWlkIjoiYWNkM2FlMDMtNGEzMi00YmI3LTllYjMtMDlmYzYwZGJhMmM1IiwiZXhwIjoxNjkyMjM5ODQ1LCJuYmYiOjE2OTIyMzYyNDUsImlhdCI6MTY5MjIzNjI0NX0.VpZho4171ZC66qajMb4pab3-j2SuHlpecxxWcm-GoxkyL9CU_2Pef8ky6vLmDmzR-a5MTuJ_fb-wbDd7t6lTOg' } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) }
第二步在utils文件夹创建一个文件叫http.js
import axios from "axios";
import { getToken } from './auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: 'http://127.0.0.1:10000', //IP地址
timeout: 10000 // 超时
})
service.interceptors.request.use(function (config) {
// 是否需要设置 token
if (getToken()) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 }
return config;
}, function (error) {
return Promise.reject(error);
});
service.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error)
})
export default service
第三步是在src目录下创建一个文件夹api，然后在api的文件夹在创建一个文件 例如exam.js
import axios from '@/utils/http'
export function huoqulist(data) {
return axios.post('/exam/front/get-topics',data)
}
第四步在使用接口的文件中引入
<script>
import { huoqulist } from "@/api/exam"
</script>
第五步使用
export default {
//传参id和类型传给后端
props: {
id: {
type: Number,
default:'aabed3b7-9976-4d41-bcca-acb7b9998a57' },
type: {
type: String, default:'单选'
}
},
data() {
return {
list: {},//获取data中的数据
list0: {},//获取data中的数据里的数据 } },
created() {
this.allhuoqu();
},
methods: {
// 获取选择题的数据
allhuoqu() {
huoqulist({
type: this.type, //在props中声明的传入给后端的type值
id:this.id //在props中声明的传入给后端的id值
}).then((res) => {
console.log(res);
this.list = res.data //获取data中的数据
this.list0 = res.data.content.topics;//获取data中的数据里的数据
})
}
}
}