使用API自動生成工具優化前端工作流
在工作中,我們的前端工作流一般開始於前後端協商好Api文件之後,再針對這個Api文件做mock模擬資料,然後用做好的mock進行開發,後端開發完畢之後再改一下API資料的BaseURL切換到正式API進行聯調;如下
本文介紹的一個工具(或者說方法),來將這個工作流優化一下,也是我平時工作正在用的方法,當做自己的筆記,也跟大家一起分享一下~
這個方法的主要思路就是開發人員在某個api工具中按要求填好文件,然後匯出swagger.json配置檔案,再把這個配置檔案匯入到easy-mock中,再用工具自動生成前端api的js檔案以供呼叫。
本文中所使用的工具: ofollow,noindex" target="_blank">sosoApi 、 Easy-mock 、 Swagger 、 Easy-mock-api-template 、 axios
1. 使用Api管理平臺匯出swagger.json檔案
一般我們前後端通過各種平臺或者工具來管理Api,比如免費的視覺化Api管理平臺 sosoApi 、 Yapi 等,一般來說這些工具都可以生成 swagger.json
的Api,我們可以用它來直接生成一個漂亮的 視覺化Api文件 ,也可以用它來作為配置檔案匯入其他工具中,比如Easy-mock;
比如在sosoApi中就可以匯出為swagger文件( swagger.json
):
我們先匯出一個 swagger.json
備用;
2. 使用swagger.json匯入easy-mock
Mock平臺我們可以使用Easy-mock,輕量又簡潔,雖然沒有Api的分組功能,但平時應付應付不太大的應用、個人應用等場景足夠了;Easy-mock官網的服務被不少人直接拿到開發環境用,經常被擠爆,這個情況可以用本地部署來解決這個問題,參考 windows本地安裝部署 Easy Mock 。
我們將Api管理平臺中匯出的 swagger.json
檔案在新建project的時候匯入:
這樣剛剛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
檔案了~
網上的帖子大多深淺不一,甚至有些前後矛盾,在下的文章都是學習過程中的總結,如果發現錯誤,歡迎留言指出~