国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用API自動生成工具優(yōu)化前端工作流

GeekQiaQia / 756人閱讀

摘要：在工作中，我們的前端工作流一般開始于前后端協(xié)商好文檔之后，再針對這個文檔做模擬數(shù)據(jù)，然后用做好的進(jìn)行開發(fā)，后端開發(fā)完畢之后再改一下數(shù)據(jù)的切換到正式進(jìn)行聯(lián)調(diào)如下本文介紹的一個工具或者說方法，來將這個工作流優(yōu)化一下，也是我平時工作正在用的方法，

在工作中，我們的前端工作流一般開始于前后端協(xié)商好Api文檔之后，再針對這個Api文檔做mock模擬數(shù)據(jù)，然后用做好的mock進(jìn)行開發(fā)，后端開發(fā)完畢之后再改一下API數(shù)據(jù)的BaseURL切換到正式API進(jìn)行聯(lián)調(diào)；如下

本文介紹的一個工具(或者說方法)，來將這個工作流優(yōu)化一下，也是我平時工作正在用的方法，當(dāng)做自己的筆記，也跟大家一起分享一下~

這個方法的主要思路就是開發(fā)人員在某個api工具中按要求填好文檔，然后導(dǎo)出swagger.json配置文件，再把這個配置文件導(dǎo)入到easy-mock中，再用工具自動生成前端api的js文件以供調(diào)用。

本文中所使用的工具：sosoApi、Easy-mock、Swagger、Easy-mock-api-template、axios

1. 使用Api管理平臺導(dǎo)出swagger.json文件

一般我們前后端通過各種平臺或者工具來管理Api，比如免費的可視化Api管理平臺 sosoApi、Yapi等，一般來說這些工具都可以生成swagger.json的Api，我們可以用它來直接生成一個漂亮的可視化Api文檔，也可以用它來作為配置文件導(dǎo)入其他工具中，比如Easy-mock；

比如在sosoApi中就可以導(dǎo)出為swagger文檔(swagger.json)：

我們先導(dǎo)出一個swagger.json備用；

2. 使用swagger.json導(dǎo)入easy-mock

Mock平臺我們可以使用Easy-mock，輕量又簡潔，雖然沒有Api的分組功能，但平時應(yīng)付應(yīng)付不太大的應(yīng)用、個人應(yīng)用等場景足夠了；Easy-mock官網(wǎng)的服務(wù)被不少人直接拿到開發(fā)環(huán)境用，經(jīng)常被擠爆，這個情況可以用本地部署來解決這個問題，參考 windows本地安裝部署 Easy Mock 。

我們將Api管理平臺中導(dǎo)出的swagger.json文件在新建project的時候?qū)耄?/p>

這樣剛剛Api平臺中配置的Api就被同步到我們的Easy-mock配置中了，比如sosoApi的示例項目導(dǎo)出的結(jié)果就是：

這時我們就可以用它來進(jìn)行數(shù)據(jù)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";
 
// 調(diào)用
Api.activitySubmit({ activityId: 2 })
    .then(...)

簡單介紹一下配置文件，更復(fù)雜的配置要參考原來的文檔；

// .easy-mock.js 配置文件
 
{
  host: "http://localhost:8080/",        // easy-mock的源，沒有本地部署的話不用寫，本地部署則填本地服務(wù)地址
  output: "../",                       // 生成 API 的基礎(chǔ)目錄
  template: "../",                       // 指定模板，這里用本地寫的模板
  projects: [                           // 可以有多個模板來源
    {
      "id": "你要創(chuàng)建的 Easy Mock 項目的 id",    // 剛剛記下來的 Project ID
      "name": "api"                         // 生成的output目錄下的文件名
    }
  ]
}

然后

npm run create-api

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

網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯誤，歡迎留言指出~

參考：



用swagger.json自動生成axios api訪問代碼 - 簡書


Easy-mock-cli/README.md



推介閱讀：


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

PS：歡迎大家關(guān)注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108818.html

相關(guān)文章

  • 【效率專精系列】善用API統(tǒng)一描述語言提升RestAPI開發(fā)效率

    摘要：其標(biāo)準(zhǔn)為前身是，提供強大的在線編輯功能，包括語法高亮錯誤提示自動完成實時預(yù)覽，并且支持用戶以格式撰寫導(dǎo)入導(dǎo)出轉(zhuǎn)換文檔。 團(tuán)隊內(nèi)部RestAPI開發(fā)采用設(shè)計驅(qū)動開發(fā)的模式，即使用API設(shè)計文檔解耦前端和后端的開發(fā)過程，雙方只在聯(lián)調(diào)與測試時耦合。在實際開發(fā)和與前端合作的過程中，受限于眾多因素的影響，開發(fā)效率還有進(jìn)一步提高的空間。本文的目的是優(yōu)化工具鏈支持，減少一部分重復(fù)和枯燥的勞動。 現(xiàn)狀...

    tianyu 評論0 收藏0

  • API

    摘要：是一個極度純凈的上傳插件，通過簡單調(diào)整就可以融入到任何項目，支持多文件上傳上傳速率動態(tài)控制真實進(jìn)度監(jiān)控分塊生成分塊上傳校驗秒傳暫停取消等。 跨域?qū)W習(xí)筆記 前言: 當(dāng)一個資源，向與之所在服務(wù)器不同的域或端口請求另一個資源時，這個HTTP請求，我們認(rèn)為是跨域的請求。出于安全考慮，瀏覽器會限制腳本發(fā)起的跨域HTTP請求。 那天后端讓我把token放到http請求頭字段里，說是為了和RN端統(tǒng)一...

    lsxiao 評論0 收藏0

  • 前端每周清單第 51 期: React Context API 與模式變遷, Webpack 與 W

    摘要：前端每周清單第期與模式變遷與優(yōu)化界面生成作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000013279448); 前端每周清單第 51 期: React Context A...

    Jiavan 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • 性能優(yōu)化

    摘要：如果你的運行緩慢，你可以考慮是否能優(yōu)化請求，減少對的操作，盡量少的操，或者犧牲其它的來換取性能。在認(rèn)識描述這些核心元素的過程中，我們也會分享一些當(dāng)我們構(gòu)建的時候遵守的一些經(jīng)驗規(guī)則，一個應(yīng)用應(yīng)該保持健壯和高性能來維持競爭力。 一個開源的前端錯誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團(tuán)隊最近開發(fā)了一款前端錯誤收集工具，名叫 frontend-tracker ，這款...

    liangzai_cool 評論0 收藏0

發(fā)表評論

0條評論

GeekQiaQia

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<