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