vue 前端如何编写接口？

问题遇到的现象和发生背景

需要和后端联调接口，需要写哪些文件呢？下面是已写入的代码，不懂怎么改成适合自己项目的。api文件还没写，不明白怎么写。

问题相关代码，请勿粘贴截图

1.vue.config.js里面的相关代码

devServer: {
            /* 自动打开浏览器 */
            open: false,
            /* 设置为0.0.0.0则所有的地址均能访问 */
            host: '后端给的地址',
            port: 8080,
            https: false,
            hotOnly: false,
            /* 使用代理 */
            proxy: {
                '/api': {
                    target: '写了后端给的地址',//请求地址
                    secure: false,  // 如果是https接口，需要配置这个参数
                    ws: true,//是否代理websockets
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        },

2.request.js

import axios from 'axios'
import {getAdmin,setAdmin,removeAdmin} from "./cookies";
import router from "@/router";

const request = axios.create({
    baseURL:"/api",
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(
    config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    let userJson=sessionStorage.getItem("user");
    if (!userJson){
        router.push("/login")
    }
    // else {
    //     let user = JSON.parse(userJson);
    //     config.headers['token'] = user.token;  // 设置请求头
    // }
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }

        // 单独拦截登录接口
        let responseData = res.data
        if (responseData &&responseData['type'] && responseData['type'] === 'cache') {
            setAdmin(JSON.stringify(responseData))
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

3.xx.vue

methods: {
    getData:function() {
      this.$axios({
        method: 'post',
        url: '/api/xxxx/xx',
        data: {
          number: "5",
          type: "",
          ID: "",
          name: "",
          pt: "",
          date: "2021-10-01 00：00：00",
          connect: "",
          showBtn: true,
    }
    }).then((response) => {
        alert(JSON.stringify(response));//请求成功返回的数据
      }).catch((error) => {
        alert(error);   //请求失败返回的数据
      })
    },
}

运行结果及报错内容

没办法调用接口

我的解答思路和尝试过的方法

api文件怎么写呢，以上文件怎么修改呢

我想要达到的结果

希望帮忙看下，写接口的流程是什么呀，需要哪些配置


devServer: {
            /* 自动打开浏览器 */
            open: false,
            /* 设置为0.0.0.0则所有的地址均能访问 */
            host: 'localhost',
            port: 8080,
            https: false,
            hotOnly: false,
            /* 使用代理 */
            proxy: {
                '/': {
                    target: '后端地址',//请求地址
                    secure: false,  // 如果是https接口，需要配置这个参数
                    ws: true,//是否代理websockets
                    changeOrigin: true,
                    pathRewrite: {
                        '^/': '/'
                    }
                }
            }
        },

第二个根据你的需求改

第三个推荐你建一个api文件然后统一一下

接口一般都是后台提供的，不做前后端分离吗

遇到什么问题了呢？

引入axios
写请求拦截和相应拦截
涉及到跨域配置 proxy .

this是vue的实例，你确定你的axios挂载到vue对象上了吗 vue2的话 Vue.prototype.$axios = xxx