Skip to content

解析API Blueprint文档并生成业务代码工具(自动 模板)

Notifications You must be signed in to change notification settings

free46000/APIBlueprintToGenerateCode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

自动化解析API Blueprint文档的模板代码生成工具,为了提高开发效率,本工具使用nodejs开发,vue.js作为可定制化的输出模板的辅助(目前只实现了java的实体类和请求接口类的模板)。

下载与使用

普通方式

  • 下载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地址
  • 使用nodefs模块,读取文件列表,源码中是过滤了下以.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地址:https://github.com/free46000/MultiItem

About

解析API Blueprint文档并生成业务代码工具(自动 模板)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published