最近大前端概念越來(lái)越火捕犬，本著學(xué)習(xí)的目的，寫了一個(gè)自動(dòng)化解析API Blueprint文檔的模板代碼生成工具砖茸，為了提高開發(fā)效率隘擎，本工具使用nodejs開發(fā)，vue.js作為可定制化的輸出模板的輔助凉夯，本項(xiàng)目娛樂為主货葬，希望能給大家提供一些思路，擴(kuò)展下技術(shù)棧

源碼地址

GitHub：https://github.com/free46000/APIBlueprintToGenerateCode.git

下載與使用

普通方式

• 下載[APIBlueprintToGenerateCode]源碼劲够，需要注意源碼使用ECMAScript6的語(yǔ)法
• 在源碼目錄下執(zhí)行npm install命令震桶，安裝依賴包，本過(guò)程中在會(huì)有一些安裝 .NET Framework 2.0的相關(guān)錯(cuò)誤提示征绎，可以忽略
• 安裝完成后在源碼目錄下執(zhí)行node bin/www命令蹲姐，啟動(dòng)服務(wù)器
• 在瀏覽器地址欄中輸入http://localhost:3000即可訪問頁(yè)面，頁(yè)面中可以自定義Api文檔Git地址人柿，如果Api文檔沒有上傳Git柴墩，也可以把Api文檔拷貝到頁(yè)面輸入框指定的路徑下，可以自動(dòng)識(shí)別顷扩，點(diǎn)擊生成按鈕拐邪，解析結(jié)果會(huì)展現(xiàn)在當(dāng)前頁(yè)面中

注意：源碼中是過(guò)濾了以.apib結(jié)尾的文件列表，此處如果有需要可以聯(lián)系作者隘截，修改為傳遞參數(shù)控制

docker容器方式

• 由于代碼定制化比較強(qiáng)扎阶，這里我會(huì)把DockerFile貼出來(lái)，大家有需要可以修改代碼后自行build

效果截圖

entities效果

entities

apiset效果

apiset

主要流程

• 通過(guò)nodegit拉取API Blueprint文檔到本地（當(dāng)然這一步視大家的具體情況婶芭，也可以直接把Api文檔拷貝到頁(yè)面輸入框指定的路徑下）
• 通過(guò)drafter官方解析庫(kù)解析API Blueprint文檔东臀，drafter解析后的結(jié)構(gòu)并不是太友好，這里需要寫一些適配代碼
• 解析Response中的json數(shù)據(jù)結(jié)構(gòu)
• 借助vue.js生成html的模板代碼
• 整合到docker容器

源碼解析

API文檔git下載

API Blueprint是一套基于markdown的API描述語(yǔ)言規(guī)范犀农，基于此規(guī)范可以方便的生成mock接口惰赋，這樣前端，移動(dòng)端呵哨，后端可以并行開發(fā)赁濒，好處多多，希望大家也多使用孟害。

• nodegit地址
• 使用Git.Clone克隆API Blueprint文檔
• 使用Repository.fetchAllfetch到最新文檔
• 根據(jù)具體情況使用Repository.mergeBranches合并分支拒炎，源碼中是把develop分支代碼合并到master中，代碼邏輯在git_handler.js中

解析API Blueprint

• drafter地址
• 使用node的fs模塊挨务，讀取文件列表击你，源碼中是過(guò)濾了下以.apib結(jié)尾的文件列表玉组，此處如果有需要可以聯(lián)系作者，修改為傳遞參數(shù)控制
• 使用drafter.parse解析API Blueprint文檔丁侄，解析后的格式為

{
  "element": "parseResult",
  "content": [
    {
      "element": "category",
      "meta": {
        "classes": [
          "api"
        ],
        "title": ""
      },
      "content": [
         {
          "element": "category",
          "meta": {
            "classes": [
              "resourceGroup"
            ],
            "title": ""
          },
          "content": [

        ... ...
    
}

• 可以發(fā)現(xiàn)上面的結(jié)構(gòu)嵌套比較深惯雳，后面使用的時(shí)候會(huì)比較麻煩，這里把有效數(shù)據(jù)拿到鸿摇，并為每個(gè)HttpTransaction生成一個(gè)實(shí)體（JsonObject）石景，處理邏輯在apib_parser.js中，解析之后的格式為：

[{
    href:'',//請(qǐng)求路徑:/get/task/{taskid}
    hrefName:'',//路徑對(duì)應(yīng)name:GetTask
    title:'',//請(qǐng)求標(biāo)題：獲取任務(wù)
    hrefVariables:[ //路徑對(duì)應(yīng)Variable"content": "taskid"
        {"element": "String","content": "post_id"}
    ],
    subTitle:'',//請(qǐng)求標(biāo)題：通過(guò)id獲取任務(wù)
    tip:'',//相關(guān)提示
    method:'',//請(qǐng)求類型 POST or GET ...
    response:{},//響應(yīng)實(shí)體{'taskId':1,'taskName':'任務(wù)'}
    param:{}//請(qǐng)求參數(shù)taskId
}]

• 我們可以很方便的從上面拿到請(qǐng)求響應(yīng)的數(shù)據(jù)户辱，正常情況下會(huì)是json格式的鸵钝，例如：{'taskId':1,'taskName':'任務(wù)'},
• 以上幾步是在nodejs的服務(wù)端完成，通信采用ajax庐镐，取得數(shù)據(jù)后我們把HttpTransaction中請(qǐng)求響應(yīng)的json數(shù)據(jù)轉(zhuǎn)換為對(duì)生成實(shí)體類友好的結(jié)構(gòu)恩商，處理邏輯主要在to_bean.js中，處理之后的格式為：

[{
    className: className,//實(shí)體類中名字
    fields: [{ //實(shí)體類中含有的屬性列表
        name: taskName, 
        type: String
    }],
    importTypes: [{//需要import的類型列表
        'java.util.List'
    }] 
}]

模板生成

• 經(jīng)過(guò)以上的準(zhǔn)備必逆，得到了我們需要的數(shù)據(jù)怠堪，然后借助vue.js渲染html代碼模板,代碼都在bean_template.html中，目前寫了java實(shí)體類和Api接口類的模板名眉，可自行擴(kuò)展其他模板粟矿。下面貼出一段實(shí)體類的模板代碼：

<div id="bean" v-if="beans">
    <div :id="bean.className" style="background: cornsilk">
        <p>package com.bean.response;</p>

        <p v-for="imp in bean.importTypes">import {{imp}};</p>

        <p>public class {{ bean.className }} {</p>
        <div v-for="field in bean.fields">
            private {{field.type}} {{field.name}};
        </div>
        <div v-for="field in bean.fields">
            public void set{{ firstToUpperCase(field.name) }}({{field.type}} {{ field.name }}) {<br>
            this.{{field.name}} = {{field.name}};<br>
            }<br><br>
            public {{field.type}} get{{ firstToUpperCase(field.name) }}() {<br>
            return this.{{field.name}};<br>
            }<br><br>
        </div>
        <p>}</p>
    </div>
</div>

docker整合

• 最后整合在docker容器中，docker可以讓應(yīng)用程序布署在軟件容器下的工作可以自動(dòng)化進(jìn)行损拢，不過(guò)開發(fā)接觸的偏少一些陌粹，有興趣的可以了解一下，下面我貼出我的DockerFile代碼：

# 選擇image
FROM node:latest

# 創(chuàng)建源碼目錄并設(shè)置當(dāng)前工作路徑
RUN mkdir -p /usr/app
WORKDIR /usr/app

# 拷貝源碼到目標(biāo)路徑
COPY ./bin /usr/app/bin
COPY ./public /usr/app/public
COPY ./routes /usr/app/routes
COPY ./views /usr/app/views
COPY ./app.js /usr/app/app.js
COPY ./package.json /usr/app/package.json

RUN npm install .

CMD [ "node", "/usr/app/bin/www" ]

總結(jié)

目前代碼只是在html中進(jìn)行輸出福压，本來(lái)計(jì)劃下一步在指定目錄生成類文件掏秩，但是有兩個(gè)問題沒有辦法很好解決，所以就暫時(shí)放棄了荆姆，一是實(shí)體類的命名蒙幻；還有實(shí)體類去重，例如：任務(wù)列表和詳情接口同樣都會(huì)有任務(wù)的實(shí)體胆筒，自動(dòng)化生成代碼會(huì)生成兩個(gè)類邮破。

本項(xiàng)目主要是為了熟悉NodeJS vue等前端開發(fā)知識(shí)，娛樂為主仆救，主要寫寫實(shí)現(xiàn)的思路抒和，雖然寫的比較簡(jiǎn)陋，但是里面用了一些比較好的開源組件API Blueprint nodegit docker 等彤蔽，非常值得學(xué)習(xí)构诚，歡迎留言交流，希望可以幫助到大家铆惑。

最后請(qǐng)?jiān)试S打個(gè)小廣告：作者開源了一個(gè)一個(gè)優(yōu)雅的實(shí)現(xiàn)多類型的RecyclerView類庫(kù) 支持DataBinding Form表單錄入范嘱，Github地址：https://github.com/free46000/MultiItem