对于开发管理系统的前端开发人员来说，一个页面基本上就是增删改查的业务，一个页面基本上都是筛选（查询）、表格、弹框（新增/修改），复制一个模板页面之后，根据接口字段来修改，这都是重复性的劳动，那么既然是重复性的劳动，那么就可以用程序来解决。
自动生成思路
- 模板替换
- openapi接口读取
实现
- 既然要根据模板来生成，那么肯定需要一些模板，比如使用elementui，就可以准备elementui的表单组件模板，比如输入框模板
<el-form-item prop="#${prop}" label="#${label}">
<el-input
v-model="dataForm.#${prop}"
placeholder="请输入#${label}"
clearable
></el-input>
</el-form-item>
- 第二步就需要读取准备的这些模板了，我们可以先用以下结构来组织模板文件
读取模板代码字符串如下所示
async function getTemplate (templateName, _path) {
const filePath = _path ? path.resolve(process.cwd(), _path, templateName) : path.resolve(__dirname, `../templates/${templateName}-template.html`)
let isFile = await is_file(filePath)
if (isFile) {
try {
return (await fs.readFile(filePath)).toString()
} catch (err) {
return Promise.reject(err)
}
} else {
return Promise.reject("模板文件不存在，请检查文件路径")
}
}
- 读取之后需要对代码进行替换，用正则匹配到#${key}之后，将#${key}替换成params[key]值
- 那么有小伙伴要说了，如果我这个#${key}要替换成的值，也是用模板生成的呢，那么，就需要用递归继续获取模板替换的值，也就是下方代码所示
/**
* 递归模板填充
*/
async function replaceState (arr) {
if (typeof arr === 'string') return arr
if (Array.isArray(arr)) {
let temparr = []
for (let i = 0; i < arr.length; i++) {
let templateStr
if (arr[i].template) {
templateStr = await getTemplate(arr[i].template, arr[i].templatePath)
}
if (templateStr && typeof arr[i].params === 'object') {
for (let key in arr[i].params) {
arr[i].params[key] = await replaceState(arr[i].params[key])
}
templateStr = replaceMatch(templateStr, arr[i].params)
temparr.push(templateStr)
}
}
return temparr.join("\n")
} else {
return ""
}
}
最后效果如下图所示：
怎么才能不手写增删改查字段
对于上方的程序来说，还是需要我们对照接口文档进行增删改查字段的填充，那么如何才能不手写字段，做一个快乐的摸鱼工程师呢，那么就是需要分析接口文档。
- 如果文档可以导出openapi.json的话，那么就很好办了，就是分析openapi.json的结构，一般都能自动构建成功，
- 如果文档导不出openapi.json，只有一个html的话，那么使用爬虫把页面爬取下来，再分析页面结构
虽然上面方法看起来有些麻烦，但是基本上可以节省很多的对接口的时间。
我这边已经将代码上传了，有兴趣的小伙伴可以去试试看： yinyangshibolange/hy-template-gen: dynactic genorate template code (github.com)
npm可以搜索hy-template-gen
