restful Api 風格契約設計器：Swagger-editor和swagger-ui的應用

小龍女先生發表於2017-01-14
RESTAPISwaggerUI

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格式的。方便傳閱。

相關文章