前端使用后端增删改查接口之前，要先将其封装为函数（vue和react均适用）

首先，引入和定义变量。

import request from '@/utils/request';
const prefix = process.env.BASE_PATH + '/xxx';

 假设后台接口名为“aaa-bbb-ccc”： 

1、查询接口（get），形参为id，并将id定为后缀。前端将此接口命名为“getAbc”。

export async function getAbc (id) {
  const response = await request(prefix + '/aaa-bbb-ccc/' + id, {
    method: 'GET'
  })
  return Promise.resolve(response)
}

2、新增接口（post）,形参为可选值。前端将此接口命名为“createAbc”。

export async function createAbc(options) {
  return request(prefix + '/aaa-bbb-ccc', {
    method: 'POST',
    ...(options || {}),
  });
}

3、编辑接口（put），形参为必选值id和可选值，并将id定为后缀。前端将此接口命名为“updateAbc”。

export async function updateAbc(id, options) {
  return request(prefix + '/aaa-bbb-ccc/' + id, {
    method: 'PUT',
    ...(options || {}),
  });
}

4、删除接口（delete），形参为id， 并将id定为后缀。前端将此接口命名为“deleteAbc”。

export async function deleteAbc(id) {
  return request(prefix + '/aaa-bbb-ccc/' + id, {
    method: 'DELETE',
  });
}

要在其他文件使用以上接口，引入就行了 

import {getAbc, deleteAbc} @/src/services

（以上接口为基础写法，请根据实际情况加以微调）