使用API自動生成工具優化前端工做流

在工做中,咱們的前端工做流通常開始於先後端協商好Api文檔以後,再針對這個Api文檔作mock模擬數據,而後用作好的mock進行開發,後端開發完畢以後再改一下API數據的BaseURL切換到正式API進行聯調;以下前端

本文介紹的一個工具(或者說方法),來將這個工做流優化一下,也是我平時工做正在用的方法,當作本身的筆記,也跟你們一塊兒分享一下~ios

這個方法的主要思路就是開發人員在某個api工具中按要求填好文檔,而後導出swagger.json配置文件,再把這個配置文件導入到easy-mock中,再用工具自動生成前端api的js文件以供調用。git

本文中所使用的工具:sosoApiEasy-mockSwaggerEasy-mock-api-templateaxiosgithub

感興趣的同窗能夠加文末的微信羣,一塊兒討論吧~npm

1. 使用Api管理平臺導出swagger.json文件

通常咱們先後端經過各類平臺或者工具來管理Api,好比免費的可視化Api管理平臺 sosoApiYapi等,通常來講這些工具均可以生成swagger.json的Api,咱們能夠用它來直接生成一個漂亮的可視化Api文檔,也能夠用它來做爲配置文件導入其餘工具中,好比Easy-mock;json

好比在sosoApi中就能夠導出爲swagger文檔(swagger.json):axios

咱們先導出一個swagger.json備用;windows

2. 使用swagger.json導入easy-mock

Mock平臺咱們可使用Easy-mock,輕量又簡潔,雖然沒有Api的分組功能,但平時應付應付不太大的應用、我的應用等場景足夠了;Easy-mock官網的服務被很多人直接拿到開發環境用,常常被擠爆,這個狀況能夠用本地部署來解決這個問題,參考 windows本地安裝部署 Easy Mock後端

咱們將Api管理平臺中導出的swagger.json文件在新建project的時候導入:api

這樣剛剛Api平臺中配置的Api就被同步到咱們的Easy-mock配置中了,好比sosoApi的示例項目導出的結果就是:

這時咱們就能夠用它來進行數據mock了,怎麼樣,是否是很輕鬆~

easy-mock項目面板上面會有個 Project ID,這個記下來後面要用;

3. 使用easy-mock-cli生成js格式Api

有了easy-mock以後通常狀況下咱們要寫前端的api文件了,通常api工具用axios,這裏提供一個封裝:

// utils/fetch.js
import axios from 'axios'
 
const service = axios.create({
  baseURL: 'https://easy-mock.com/project/5bf6a23c92b5d9334494e884',
  timeout: 5000
})
 
// request攔截器
service.interceptors.request.use( config => {...},  err => {...})
 
// respone攔截器
service.interceptors.response.use( res => {...},  err => {...})
 
export default service
複製代碼

咱們能夠用easy-mock-cli來生成api,模板文件若是不想用原來的模板的話,可使用我fork以後改寫的一個模板easy-mock-api-template,生成的Api文件是這樣的:

// api/index.js
import fetch from 'utils/fetch';
 
/* 活動查詢 */
const activityQuery = ({ activityDate }) => fetch({
  method: 'get',
  url: '/activity/query',
  params: { activityDate }
});
 
/** 活動保存 */
const activitySave = () => fetch({
  method: 'post',
  url: '/activity/save'
});
 
/** 活動提交 */
const activitySubmit = ({ activityId, content }) => fetch({
  method: 'post',
  url: '/activity/submit',
  data: { activityId, content }
});
 
export {
  activityQuery,   // 活動查詢
  activitySave,    // 活動保存
  activitySubmit   // 活動提交
};
複製代碼

而後在文件中就能夠:

import * as Api from 'api/index.js';
 
// 調用
Api.activitySubmit({ activityId: 2 })
    .then(...)
複製代碼

簡單介紹一下配置文件,更復雜的配置要參考原來的文檔

// .easy-mock.js 配置文件
 
{
  host: 'http://localhost:8080/',        // easy-mock的源,沒有本地部署的話不用寫,本地部署則填本地服務地址
  output: "../",                       // 生成 API 的基礎目錄
  template: "../",                       // 指定模板,這裏用本地寫的模板
  projects: [                           // 能夠有多個模板來源
    {
      "id": "你要建立的 Easy Mock 項目的 id",    // 剛剛記下來的 Project ID
      "name": "api"                         // 生成的output目錄下的文件名
    }
  ]
}
複製代碼

而後

npm run create-api
複製代碼

就能夠在根目錄下生成一個api/index.js文件了~


網上的帖子大多深淺不一,甚至有些先後矛盾,在下的文章都是學習過程當中的總結,若是發現錯誤,歡迎留言指出~

參考:

  1. 用swagger.json自動生成axios api訪問代碼 - 簡書
  2. Easy-mock-cli/README.md

推介閱讀:

  1. windows本地安裝部署 Easy Mock - 掘金

PS:歡迎你們關注個人公衆號【前端下午茶】,一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣,長按識別下面二維碼便可加我好友,備註加羣,我拉你入羣~

相關文章
相關標籤/搜索