首页 > 代码库 > restful Api 风格契约设计器:Swagger-editor和swagger-ui的应用

restful Api 风格契约设计器:Swagger-editor和swagger-ui的应用

swagger-editor的安装

  • swagger-editor应用的yaml语法,有定义变量和数据结构,不明白可以参考其示例
  • 安装步骤:
    • 下载swagger-editor git地址
    • 运行npm run build生成可运行的包
      • window注意事项:

      • 去掉package.json文件中scripts节点的prebuild功能,不然会提示 rm -rf dist/** 无效,看出这是删除生成包的文件,可以手动删除或者自己改下命令。

      • 更改.eslintrc.js文件,主要是修正linebreak-style的验证方式

        module.exports = {  extends: ‘google‘,  quotes: [2, ‘single‘],  globals: {    SwaggerEditor: false  },  env: {    browser: true  },  rules:{    "linebreak-style": ["error", "windows"]  }};
  • 增加了rules节点,以上是.eslintrc.js完整的配置

  • 输入 .\node_modules\.bin\http-server即可打开,然后访问此服务器的8080端口就可以了。

技术分享

swagger-ui的安装

  • 展示swagger-editor生成的api文档,api文档格式可以是yaml或json。
  • 安装步骤:
    • 下载swagger-ui git地址
    • 两种部署方式:
      • 第一种:可以直接把dist文件夹中内容复制到某个网站目录下或者创建一个新的站点也可以,这里有一套默认的swagger-ui的默认皮肤。
      • 第二种:
        • 运行cnpm install 安装所有依赖包
        • 运行gulp serve
        • 访问本机的8080端口,如果存在多个http-server,需要自定义http-server的端口,在gulpfile.js文件中实现
gulp.task(‘connect‘, function() {  connect.server({    root: ‘dist‘,    livereload: true,    port:8888  });});
  • 可以增加打印功能,用于导出api文档为pdf格式的。方便传阅。

技术分享

restful Api 风格契约设计器:Swagger-editor和swagger-ui的应用