vue-element-admin中利用模板快速生成代码

需求

vue-element-admin进行前端开发时，许多代码是相同的，不停的ctrl+v, 改名等，效率低下 因此我们可以把相同的内容做成为模板，利用nodejs的本地文件处理功能，来快速生成新的代码，提高工作效率

vue-element-admin的一般开发

1. 接口（api目录）
2. 模型(model目录)
3. 页面(views目录)
4. 路由（router）

分析

每个页面的开发都离不开这4步骤，每个页面中的各个步骤，内容变化不大，虽然可以使用ctrl+v，但效率不高，而且部分内容可能还要修改

比如修改文件名称 后端路由的名称等

对于这样的重复性工作，最好的方式是让程序自动进行

问题与解决之道

1.文件的读取 文件的删除 文件的保存等基本操作（fs模块）

2.模板中内容的替换（string.replace 字符串的常用函数 正则表达式等）

3.要获取我们输入的参数（readline模块 process.avg 等）

解决过程

1.安装模块到开发依赖

npm install --save-dev fs readline stdio

2.获取用户的输入

const readline = require("readline");

function rlPromisify(fn) {
    return async (...args) => {
        return new Promise(resolve => fn(...args, resolve));
    };
}
// 判断全部都是小写字母
function strIsLower(str){
  let bool = true;
  for(let i =0; i<=str.length; i++) {
    if (str.charCodeAt(i) < 97 || str.charCodeAt > 122) {
      bool = false;
      break;
    }
  }
  return bool;
}

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

const question = rlPromisify(rl.question.bind(rl));

(async () => {
    // 如果 空内容 重新输入, 不是小写字母，重新输入
    let moduleName ='';
     do {
       moduleName = await question("请输入模型名称（全部小写）：");
     } while (! moduleName || ! strIsLower(moduleName));
      rl.close();

})()

3.文件的打开与读写

    // 根据模板生成接口文件
    let apiFile = `src/api/${moduleName}.js`
    let modelFile = `src/model/${moduleName}.js`
    let result = fs.readFileSync('src/api/template.js')
    let code = result.toString();
    let str = code.replace('##name##', routerName)
    fs.writeFileSync(apiFile, str)
    console.log('生成接口文件成功')

4.全部代码

let fs = require('fs')
const readline = require("readline");
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

const question = rlPromisify(rl.question.bind(rl));
(async () => {
    // 如果首字符不大写 要重新输入  空内容 重新输入
    let moduleName ='';
     do {
       moduleName = await question("请输入模型名称（全部小写）：");
     } while (! moduleName || ! strIsLower(moduleName));

    let routerName ='';
     do {
       routerName = await question("请输入路由名称（建议小写、复数）：");
     } while (! routerName || ! strIsLower(moduleName));

     let pageType = 2
     do {
      pageType = await question("请输入页面类型(1-简单-不包括分页和查询  2-正常-功能全面):")
      pageType = parseInt(pageType)
    } while (pageType !== 1 && pageType !==2 )

    rl.close();

    // 根据模板生成接口文件
    let apiFile = `src/api/${moduleName}.js`
    let modelFile = `src/model/${moduleName}.js`
    let result = fs.readFileSync('src/api/template.js')
    let code = result.toString();
    let str = code.replace('##name##', routerName)
    fs.writeFileSync(apiFile, str)
    console.log('生成接口文件成功')

    // 根据模型模板文件生成模型文件
    result = fs.readFileSync('src/model/template.js')
    code = result.toString();
    fs.writeFileSync(modelFile, code)
    console.log('生成模型文件成功')
    //根据模型名生成页面视图

    let path = `src/views/${moduleName}`
    if (fs.existsSync(path)) {
       deleteall(path)
     }
    fs.mkdirSync(path)
    if (pageType===2) {
      result = fs.readFileSync('src/views/template/index.vue')
    } else {
      result = fs.readFileSync('src/views/template/simple.vue')
    }

    let component = moduleName.charAt(0).toUpperCase() + moduleName.slice(1) + 'Index'
    result = result.toString();
    code = result.replace('##component##', component)
    code = code.replace('##name##', moduleName)
    fs.writeFileSync(`src/views/${moduleName}/index.vue`, code)
    console.log('生成页面文件成功');
  })();
// 删除文件夹以及下面的内容
function deleteall(path) {
  var files = [];
  if(fs.existsSync(path)) {
    files = fs.readdirSync(path);
    files.forEach(function(file, index) {
      var curPath = path + "/" + file;
      if(fs.statSync(curPath).isDirectory()) { // recurse
        deleteall(curPath);
      } else { // delete file
        fs.unlinkSync(curPath);
      }
    });
    fs.rmdirSync(path);
  }
};

function rlPromisify(fn) {
    return async (...args) => {
        return new Promise(resolve => fn(...args, resolve));
    };
}

function strIsLower(str){
  let bool = true;
  for(let i =0; i<=str.length; i++) {
    if (str.charCodeAt(i) < 97 || str.charCodeAt > 122) {
      bool = false;
      break;
    }
  }
  return bool;
}

5.效果