<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          lazy-mock ,一個(gè)生成后端模擬數(shù)據(jù)的懶人工具

          共 3851字,需瀏覽 8分鐘

           ·

          2020-10-08 13:13

          程序員的成長(zhǎng)之路
          互聯(lián)網(wǎng)/程序員/技術(shù)/資料共享?
          關(guān)注


          閱讀本文大概需要 3 分鐘。

          來(lái)自:https://juejin.im/post/6871592049485807630

          前言

          最近發(fā)現(xiàn)一個(gè)比較好玩的東東,一個(gè)不需要 mock 并且匹配正則的接口直接轉(zhuǎn)發(fā)到后端地址的小工具。

          install

          yarn create @lowcoding/mock

          start

          yarn start
          mock server 默認(rèn)在本地 3000 端口啟動(dòng),訪(fǎng)問(wèn) http://localhost:3000/?即可。
          lowcode-mock 默認(rèn)支持跨域,前端項(xiàng)目中可不必再配置代理,直接請(qǐng)求 lowcode-mock 起的服務(wù)即可。

          mock

          在 src\routes 目錄下新建一個(gè) js 文件,將如下內(nèi)容復(fù)制進(jìn)去保存即可:
          import KoaRouter from 'koa-router'import proxy from '../middleware/Proxy'import { delay } from '../lib/util'let Mock = require('mockjs')let Random = Mock.Random
          const router = new KoaRouter()router.get('/your-mock-api', (ctx) => { ctx.body = '你的第一個(gè)mock接口'})module.exports = router
          使用 vscode 插件 yapi-code ,可直接根據(jù) JSON 數(shù)據(jù)或者 YAPI 接口定義自動(dòng)生成 mock 接口以及 mock 數(shù)據(jù)。

          根據(jù) YAPI 生成 mock

          復(fù)制 YAPI 上接口 id ,比如?https://你的yapi地址/project/869/interface/api/14037?最后面的數(shù)字部分
          訪(fǎng)問(wèn)創(chuàng)建的 mock 接口,即可拿到隨機(jī)的 mock 數(shù)據(jù):

          根據(jù) JSON 生成 mock

          復(fù)制 JSON 數(shù)據(jù),比如:
          通過(guò) JSON 數(shù)據(jù)生成的 mock 接口需要手動(dòng)修改路由地址。

          根據(jù)字段類(lèi)型或字段名稱(chēng)生成特定的 mock 數(shù)據(jù)

          配置 yapi-code:
          配在 package.json 中即可。
          "yapi-code.mockKeyWordLike": { "icon": "Random.image('48x48')", "img":"Random.image('48x48')", "image":"Random.image('48x48')", "code": "200&&number", "name":"'模糊匹配后生成的mock'" }, "yapi-code.mockKeyWordEqual": { "message": "'這是一條精確的mock'", "total": 200, }, "yapi-code.mockString": "Random.cword(5, 6)", "yapi-code.mockBoolean": "Random.boolean()", "yapi-code.mockNumber": "Random.natural(100,1000)"
          根據(jù) json 數(shù)據(jù):
          const json = { code: 100, message: '請(qǐng)求成功', result: { list: [ { code: '注意這是一個(gè)字符串的code', name: '張三', icon: '', actived: false, }, ], total: 0, },}
          生成如下代碼
          .get(`xxxxx`, async (ctx, next) => { const list1 = [] for (let i = 0; i < 3; i++) { list1.push({ code: Random.cword(5, 6), name: '模糊匹配后生成的mock', icon: Random.image('48x48'), actived: Random.boolean(), }) } ctx.body = { code: 200, message: '這是一條精確的mock', result: { list: list1, total: 200 }, } })
          訪(fǎng)問(wèn) mock 接口即可拿到如下類(lèi)似數(shù)據(jù):
          { "code": 200, "message": "這是一條精確的mock", "result": { "list": [ { "code": "八別因教者活", "name": "模糊匹配后生成的mock", "icon": "http://dummyimage.com/48x48", "actived": true }, { "code": "毛著何工時(shí)白", "name": "模糊匹配后生成的mock", "icon": "http://dummyimage.com/48x48", "actived": false }, { "code": "縣稱(chēng)縣單下外", "name": "模糊匹配后生成的mock", "icon": "http://dummyimage.com/48x48", "actived": true } ], "total": 200 }}

          延時(shí)

          import KoaRouter from 'koa-router'import proxy from '../middleware/Proxy'import { delay } from '../lib/util'let Mock = require('mockjs')let Random = Mock.Random
          const router = new KoaRouter()router.get('/delay', (ctx) => { delay(3) // 3 秒后返回結(jié)果 ctx.body = 'delay'})
          可用于測(cè) loading 效果。

          http 異常狀態(tài)碼

          router.get('/httpError', (ctx) => { ctx.status = 401 ctx.body = 'http 401'})

          代理

          router.get('/proxy', proxy('https://github.com/wjkang/lowcode-mock'), (ctx) => {    ctx.body = 'https://github.com/wjkang/lowcode-mock'})
          來(lái)自?/proxy?的請(qǐng)求轉(zhuǎn)發(fā)到?https://github.com/wjkang/lowcode-mock/proxy?,用于后端接口可聯(lián)調(diào)的時(shí)候跳過(guò)本地 mock,轉(zhuǎn)發(fā)請(qǐng)求到后端接口。
          router.all(new RegExp('^/lowcode/mock/(|^$)'), proxy('https://github.com/wjkang/lowcode-mock'))
          不需要 mock 并且匹配正則的接口直接轉(zhuǎn)發(fā)到后端地址。

          源碼地址

          https://github.com/wjkang/lowcode-mock

          推薦閱讀:

          百度網(wǎng)盤(pán)突然大調(diào)整,網(wǎng)友炸了!!

          WeChat太“硬”!禁不動(dòng)

          5T技術(shù)資源大放送!包括但不限于:C/C++,Linux,Python,Java,PHP,人工智能,單片機(jī),樹(shù)莓派,等等。在公眾號(hào)內(nèi)回復(fù)「2048」,即可免費(fèi)獲取!!

          微信掃描二維碼,關(guān)注我的公眾號(hào)

          朕已閱?

          瀏覽 40
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  北条麻妃无码中文 | 岛国免费AV | 人妻日日夜夜 | 日韩V区 日韩美逼 | 香蕉国产视频2024 |