后台接口的配置

第一步是在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中的数据里的数据    

      })  

   }

 }

}