在Vue项目中对api的封装、统一管理

在前后端分离的项目中，前端对api进行统一管理。

第一步：进行跨域配置：

在config下index.js中修改以下代码：

第二步：创建自己接口封装的文件

在src目录下创建HTTP文件夹。文件目录结构如下图：

第三步：封装axios和post/get请求`

第四步：对api进行统一管理

/** 
 * api接口统一管理
 */
import { get, post } from './axios';
/**
 * @param {string} params 
 * 我们定义了一个topics方法
 * 这个方法有一个参数params
 * params是我们请求接口时携带的参数对象
 * 而后调用了我们封装的post方法
 * post方法的第一个参数是我们的接口地址
 * 第二个参数是topics的params参数
 * 即请求接口时携带的参数对象
 * 最后通过export导出topics。
 */
// 用户相关接口
export const login = params => post('/users/login', params);//登录
export const logout = params => post('/users/logout', params);//登出
export const uplodHead = params => post('/users/uploadHead', params);//修改头像
export const bannerTextList = params => post('/query/bannerTextList', params);//查询轮播内容
// 普通文章相关接口
export const gengealList = params => post('/query/gengealList', params);//普通文章列表
export const addgengealList = params => post('/upload/addgengealList', params);//上传普通文章列表
export const editgengealList = params => post('/upload/editgengealList', params);//修改普通文章列表
export const deletegengealList = params => post('/upload/deletegengealList', params);//删除普通文章列表
export const getArticle = params => post('/query/getArticle', params);//普通文章详情
export const uploadBgImg = params => post('/upload/uploadBgImg', params);//普通文章页面背景
export const getBannerBg = params => post('/query/getBannerBg', params);//查询普通文章页面背景

  
  

第五步：在页面中使用

//先引入
import { getArticle }from '../http/api.js' 
//使用
getArticle(这里是参数).then((res)=>{        
	console.log(res);
})

  
  

原文链接：https://blog.csdn.net/qq_40076219/article/details/103089457