根據介面檔案實作前端代碼的快速生成方案-有解無憂

此方案針對后臺管理系統類，新增表單欄位特別多的情況，如下
在這里插入圖片描述
這里大概有三四十個欄位，如果一個的對著介面檔案來寫例外耗時，就是個苦力活，那有沒有什么辦法可以實作快速生成這種簡單的代碼呢？我們的介面檔案用的是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)

列印出來的效果，自己再放到頁面中做一些調整就可以了
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/121743.html

標籤：其他

上一篇：鴻蒙 OS：使用 JavaScript 開發 Todo App UI 界面

下一篇：Creating multiline strings in JavaScript （JS中字串換行問題）