vue项目后台接口管理

前言

---

上篇文章axios二次封装及API接口统一管理讲到了vue项目中的axios请求api统一的封装，但是api管理这块一直没有时间总结，最近项目清闲,本着以后开发能偷懒就偷懒的情况下，把项目中的api管理这块优化了一下。

目录结构

---

首先后台api请求接口按照功能分文件归档，统一放在interface文件夹下的apis中，如下图：

结构目录

apis下的文件夹为项目模块及所含功能，同级目录下的api.js为主要配置文件。
每个文件下的js内容为一个小模块，如图：

部分文件
用法请参详axios二次封装及API接口统一管理

主要配置

---

估计大家看到目录结构的时候已经想到处理方法，没错，用到的技术很简单，webpack自带去中心化配置：

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

directory:需要创建上下文检索的文件目录路径u
useSubdirectories:是否检索子目录
regExp:匹配文件的正则表达式

导出的功能有3个属性：resolve，keys，id。

• resolve 是一个函数并返回已解析请求的模块ID。
• keys 是一个函数，它返回上下文模块可以处理的所有可能请求的数组。

核心代码如下：

1. 引入辅助函数

import { extend } from "../assets/js/tool";

2. 检索apis下所有js文件

const APIS = require.context('./apis/', true, /[\w+]+\.js$/);

3. 获取目录列表

const DIRECTORY =APIS.keys();

4. 根据检索目录导出对象

/**
 * @description 返回检索后按照目录结构导出的可能对象
 * @param files 目录列表
 * @param context 文件
 * @return object 返回读取完成后(按照apis下目录分别为power/sport/auth/trade)带前缀组成的apis实例对象
 * @example
 *
 *  getContent(DIRECTORY,APIS) == > { power :{....}, trade:{....}}
 *
 */
function getContent(files,context) {
    let tree={};
    if(Array.isArray(files) && files.length){
       files.forEach(item=>{
           const fileName=item.replace(/^(\.\/*)+(.*)\.\w+$/, '$2').split('/');
           const parent=fileName.shift();
           if(tree.hasOwnProperty(parent)){
                extend(tree[parent],toTree(fileName,context(item).default))
           }else{
               tree[parent]=toTree(fileName,context(item).default);
           }
       });
    }
    return tree;
}

5. 根据目录嵌套结构生成相应对象结构

/**
 * @description 根据apis问价下的模块生成对应的层级树
 * @param array 文件路径 ['trade','index']
 * @param tag 赋值对象
 * @return object 返回根据array传入的元素生成树形JSON
 * @example
 *
 *   toTree(['trade','analysis','index'],2) ==> { trade:{ analysis: { index :2} } }
 *
 */
function toTree(array,tag){
    const tree={};
    const arr=array.slice();
    if(arr.length<=1){
        tree[arr[0]]=tag;
        return tree;
    }else{
        tree[arr.shift()]={};
    }
    for(var key in tree){
        if(key && tree.hasOwnProperty(key)){
            tree[key]=toTree(arr,tag);
        }
    }
    return tree;
}

6. 导出模块

export default getContent(DIRECTORY,APIS);

之后的开发我们只需要在相应的模块目录下新建相关模块即可，再也不用满页面找接口了。

真香