成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

GeekQiaQia / 764人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

這時(shí)我們就可以用它來進(jìn)行數(shù)據(jù)mock了，怎么樣，是不是很輕松~

easy-mock項(xiàng)目面板上面會(huì)有個(gè) Project ID，這個(gè)記下來后面要用；

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

有了easy-mock之后一般情況下我們要寫前端的api文件了，一般api工具用axios，這里提供一個(gè)封裝：

// 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之后改寫的一個(gè)模板e(cuò)asy-mock-api-template，生成的Api文件是這樣的：

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

然后在文件中就可以：

import * as Api from "api/index.js";
 
// 調(diào)用
Api.activitySubmit({ activityId: 2 })
    .then(...)

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

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

然后

npm run create-api

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

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

參考：



用swagger.json自動(dòng)生成axios api訪問代碼 - 簡(jiǎn)書


Easy-mock-cli/README.md



推介閱讀：


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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108818.html

相關(guān)文章

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

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

    tianyu 評(píng)論0 收藏0

  • API

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

    lsxiao 評(píng)論0 收藏0

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

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

    Jiavan 評(píng)論0 收藏0

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

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

    princekin 評(píng)論0 收藏0

  • 性能優(yōu)化

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

    liangzai_cool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

GeekQiaQia

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<