vue模块化管理接口，并动态生成相应模块的api

比如我们项目有两个模块的接口，分别是模块一和模块二
这个时候我们可以创建两个js文件来管理这两个模块的接口
比如test1.js和test2.js

这两个js如下 在根目录创建coder > interface > test1和test2文件

module.exports = {
    name: '模块一',
    model: [
        {
            path: '/aaa', //接口名称
            title: '接口一', //接口中文名称
            name: 'aaa', 
            methods: false, 
            option: {
                method: 'get' // 请求的方法
            },
            state: 'aaa'  // 调用接口时的请求方法
        },
        {
            path: '/bbb',
            title: '接口二',
            name: 'bbb',
            methods: false,
            state: 'bbb'
        }
    ]
}

module.exports = {
    name: '模块二',
    model: [
        {
            path: '/ccc',
            title: '接口三',
            name: 'ccc',
            methods: false,
            option: {
                method: 'get'
            },
            state: 'ccc'
        }
    ]
}

在coder文件夹下创建config.js定义一些配置文件

module.exports = {
    // 这里是放所有模块接口的js文件夹路径
    interface: './interface/',
    // 生成api文件路径'
    interfaceApi: '../src/base/api/',
    //模板文件目录
    templatesDir: './templates/',
    // 接口地址
    API_URL: 'http://localhost:8081'
}

在coder文件夹下创建index.js作为入口，首先获取接口文件夹下得所有接口文件路径

const fs = require('fs')
const path = require('path')
// 引入遍历插件
const _ = require('lodash')
// const rm = require('rimraf')
// 导入生产types模板
// const typesRender = require('./templates/types')
const config = require('./config');

// 首先获取接口文件夹下得所有接口文件路径
function getInterFaceDir() {
   // 获取存放接口的文件夹路径
   let interfaceDir = path.join(__dirname, config.interface);
   let fileList = [];
   // 获取存放接口的文件夹路径下面的文件名称，['test1', 'test2']
   let files = fs.readdirSync(interfaceDir);

   // 遍历文件名称
   _.each(files, function(file) {
       // 获取完整的路径
       let filePath = path.join(interfaceDir, file);

       // 判断是不是js文件
       if(file.indexOf('.js') > 0) {
          fileList.push({
             name: file,
             path: filePath
          });
       }
   });
  //  console.log(fileList);
   return fileList  
}

根据配置文件生成json

const interfaceFiles = getInterFaceDir();
// 根据配置文件生成json
function getInterFaceInfo(files) {
   let models = {}
   _.each(files, function(file) {
      models[file.name] = require(file.path);
   });
  //  console.log(models, 'models');
   return models;
}
const interfaceInfo = getInterFaceInfo(interfaceFiles);

解析json格式，返回可使用并符合自己要求的map格式

// 解析models
function getInterFaceJson(schemas) {
  let results = {}
   _.each(schemas, function(schema, name) {
      // console.log(schema.model, 'results');
      results[name] = parseModel(schema.model);
   });
  //  console.log(results, 'results');
   return results;
}
function parseModel(model) {
  let arr = [];
  _.each(model, function(item) {
      let options = _.extend({}, {method: 'post'}, item.option || {});
      arr.push({
        path: item.path,
        options: options,
        methodType: item.methods,
        httpMethod: item.methods,
        name: item.name,
        state: item.state.toUpperCase(),
        title: item.title
    });
  });
  return arr;
}
const interfaceJson = getInterFaceJson(interfaceInfo);

创建一个通用的模板，在coder文件夹下创建templates文件夹，创建types文件

const _ = require('lodash')
module.exports = _.template(`
import axios from 'axios'
<%_.each(model, function(items, name){%>
  /**
   * <%=items.title%> api
   * @module base/api/<%=items.name%>
   * @ author chengweituo
   */
  export const <%=items.state%> = '<%=url%>' + '<%=items.path%>'
  export function <%=items.name%> (data) {
     let dataType = '<%=items.options.method%>' === 'get' ? 'params' : 'data';
     return axios({
        method: '<%=items.options.method%>',
        [dataType]: data,
        url: <%=items.state%>
     });
  }
<%})%>
`)

输出文件到指定位置

// 创建文件
function writeFile(path, fileName, content) {
   if(!fs.existsSync(path)) {
      fs.mkdirSync(path);
   }
   fs.writeFileSync(path + fileName, content, {encoding: 'utf8'});
}
const tempaltes = require('./templates/types');
function writeApi(json, info) {
  _.each(json, function(model, name) {
    // 指定输出位置
    const interfaceApi = path.join(__dirname, config.interfaceApi);
    console.log(model);
    writeFile(interfaceApi, name, tempaltes({
       model: model,
       url: config.API_URL
    }));
  });
}

初始化项目

function init() {
    // 初始化
    // console.log(SCHEMA, 'asd');
    console.log('开始生成代码.....')
    writeApi(interfaceJson, interfaceInfo);
    console.log('代码构建完成.....')
}
init()

怎么用，在package.json里面运行

QQ截图20191204174428.png

运行后的效果

QQ截图20191204174630.png

在项目中运用

代码git地址
https://github.com/a1218331130/axiosJson