解析 API Blueprint 文檔並自動化生成代碼（可定製模板）

最近大前端概念愈來愈火，本着學習的目的，寫了一個自動化解析API Blueprint文檔的模板代碼生成工具，爲了提升開發效率，本工具使用nodejs開發，vue.js做爲可定製化的輸出模板的輔助，本項目娛樂爲主，但願能給你們提供一些思路，擴展下技術棧

源碼地址

GitHub：github.com/free46000/A…

下載與使用

普通方式

• 下載[APIBlueprintToGenerateCode]源碼，須要注意源碼使用ECMAScript6的語法
• 在源碼目錄下執行npm install命令，安裝依賴包，本過程當中在會有一些安裝 .NET Framework 2.0的相關錯誤提示，能夠忽略
• 安裝完成後在源碼目錄下執行node bin/www命令，啓動服務器
• 在瀏覽器地址欄中輸入http://localhost:3000便可訪問頁面，頁面中能夠自定義Api文檔Git地址，若是Api文檔沒有上傳Git，也能夠把Api文檔拷貝到頁面輸入框指定的路徑下，能夠自動識別，點擊生成按鈕，解析結果會展示在當前頁面中

注意：源碼中是過濾了以.apib結尾的文件列表，此處若是有須要能夠聯繫做者，修改成傳遞參數控制

docker容器方式

• 因爲代碼定製化比較強，這裏我會把DockerFile貼出來，你們有須要能夠修改代碼後自行build

效果截圖

entities效果

entities

apiset效果

apiset

主要流程

• 經過nodegit拉取API Blueprint文檔到本地（固然這一步視你們的具體狀況，也能夠直接把Api文檔拷貝到頁面輸入框指定的路徑下）
• 經過drafter官方解析庫解析API Blueprint文檔，drafter解析後的結構並非太友好，這裏須要寫一些適配代碼
• 解析Response中的json數據結構
• 藉助vue.js生成html的模板代碼
• 整合到docker容器

源碼解析

API文檔git下載

API Blueprint是一套基於markdown的API描述語言規範，基於此規範能夠方便的生成mock接口，這樣前端，移動端，後端能夠並行開發，好處多多，但願你們也多使用。

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

解析API Blueprint

• drafter地址
• 使用node的fs模塊，讀取文件列表，源碼中是過濾了下以.apib結尾的文件列表，此處若是有須要能夠聯繫做者，修改成傳遞參數控制
• 使用drafter.parse解析API Blueprint文檔，解析後的格式爲

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

        ... ...

}複製代碼

• 能夠發現上面的結構嵌套比較深，後面使用的時候會比較麻煩，這裏把有效數據拿到，併爲每一個HttpTransaction生成一個實體（JsonObject），處理邏輯在apib_parser.js中，解析以後的格式爲：

[{
    href:'',//請求路徑:/get/task/{taskid}
    hrefName:'',//路徑對應name:GetTask
    title:'',//請求標題：獲取任務
    hrefVariables:[ //路徑對應Variable"content": "taskid"
        {"element": "String","content": "post_id"}
    ],
    subTitle:'',//請求標題：經過id獲取任務
    tip:'',//相關提示
    method:'',//請求類型 POST or GET ...
    response:{},//響應實體{'taskId':1,'taskName':'任務'}
    param:{}//請求參數taskId
}]複製代碼

• 咱們能夠很方便的從上面拿到請求響應的數據，正常狀況下會是json格式的，例如：{'taskId':1,'taskName':'任務'},
• 以上幾步是在nodejs的服務端完成，通訊採用ajax，取得數據後咱們把HttpTransaction中請求響應的json數據轉換爲對生成實體類友好的結構，處理邏輯主要在to_bean.js中，處理以後的格式爲：

[{
    className: className,//實體類中名字
    fields: [{ //實體類中含有的屬性列表
        name: taskName, 
        type: String
    }],
    importTypes: [{//須要import的類型列表
        'java.util.List'
    }] 
}]複製代碼

模板生成

• 通過以上的準備，獲得了咱們須要的數據，而後藉助vue.js渲染html代碼模板,代碼都在bean_template.html中，目前寫了java實體類和Api接口類的模板，可自行擴展其餘模板。下面貼出一段實體類的模板代碼：

<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可讓應用程序佈署在軟件容器下的工做能夠自動化進行，不過開發接觸的偏少一些，有興趣的能夠了解一下，下面我貼出個人DockerFile代碼：

# 選擇image
FROM node:latest

# 建立源碼目錄並設置當前工做路徑
RUN mkdir -p /usr/app
WORKDIR /usr/app

# 拷貝源碼到目標路徑
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" ]複製代碼

總結

目前代碼只是在html中進行輸出，原本計劃下一步在指定目錄生成類文件，可是有兩個問題沒有辦法很好解決，因此就暫時放棄了，一是實體類的命名；還有實體類去重，例如：任務列表和詳情接口一樣都會有任務的實體，自動化生成代碼會生成兩個類。

本項目主要是爲了熟悉NodeJS vue等前端開發知識，娛樂爲主，主要寫寫實現的思路，雖然寫的比較簡陋，可是裏面用了一些比較好的開源組件API Blueprint nodegit docker 等，很是值得學習，歡迎留言交流，但願能夠幫助到你們。

最後請容許打個小廣告：做者開源了一個一個優雅的實現多類型的RecyclerView類庫 支持DataBinding Form表單錄入，Github地址：github.com/free46000/M…