无论你是前端工程师，还是后端工程师，接口永远都是两者交互的桥梁，那么下面我们来学习一下怎样根据接口文档实现前端代码的快速生成。
此方案针对后台管理系统类，新增表单字段特别多的情况，如下

这里大概有三四十个字段，如果一个的对着接口文档来写异常耗时，就是个苦力活，那有没有什么办法可以实现快速生成这种简单的代码呢？我们的接口文档用的是Swagger

可以看到其实接口文档上对应的中文名和字段都是有的了，其实只需要把这个格式解析出来，然后循环一下就可以了。我们的接口文档有一个复制文档功能，复制出来是markdown文档，是这个样子的，我们只需要把表格部分复制出来解析就可以了。

下面是实现的方法

var { Extractor } = require('markdown-tables-to-json');

let md = `

| label         | 请求类型     |     required |  type      |  --   |  --  |
| ------------ | -------------------------------- |-----------|--------|----|--- |
| fAreaId  | 大区id,整数类型 |   body    |   true   |integer(int64)  |       |
| fCaptainTel  | 车长电话 |   body    |   true   |string  |       |
| fCarsetCaptain  | 车长 |   body    |   true   |string  |       |
| fCarsetCaptainId  | 车长id,整型 |   body    |   true   |integer(int64)  |       |
| fCarsetDeputy  | 副车长 |   body    |   true   |string  |       |
| fCarsetDeputyId  | 副车长id |   body    |   true   |integer(int64)  |       |
| fCompanyApprove  | 公司特批:有特批,无特批 |   body    |   true   |string  |       |
| fContractDesc  | 合同说明 |   body    |   false   |string  |       |
| fContractName  | 合同名称 |   body    |   false   |string  |       |
| fContractSituation  | 合同情况 |   body    |   true   |string  |       |
| fCustomerCity  | 城市 |   body    |   false   |string  |       |
| fCustomerId  | 客户id,整数类型 |   body    |   true   |integer(int64)  |       |
`

// 这里只写了一个input如果想更细致些，可以自己写判断来处理
function input(label,code){
  return`
    <el-col :span="6">
          <el-form-item label="${label}" prop="${code}">
            <el-input v-model="form.${code}"></el-input>
          </el-form-item>
        </el-col>
        `
}


let mdData = Extractor.extractObject(md);
let html = ''

for(let key in mdData){
	 html = html + input(mdData[key].label,key)
}

console.log(html)

打印出来的效果，自己再放到页面中做一些调整就可以了