一個前端寫的接口mock平臺

時間 2019-12-28

標籤一個前端寫的接口 mock 平臺简体版

原文原文鏈接

前言

如今不少公司都講求先後端分離開發。這可能會存在一個問題，後端接口還沒寫好，我們🐂🐂的前端同窗已經把前端寫完了，急等接口調試。爲了解決這個問題，寫了個前端接口mock的平臺，項目開發時間不長，思路也不盡清晰，大佬輕噴。前端

線上體驗地址：接口mock平臺node

源碼地址： git源碼nginx

思路

一個接口請求包含了請求行，請求頭，請求內容。那咱們就能夠經過node解析一個請求而後對這個接口的內容進行匹配，將符合接口請求的條件的數據返回去，這樣就像一個faker。僞造了一個真正的接口會返回的數據，從而達到和真正的接口同樣的效果。git

實現

實現的功能：github

1. 登陸註冊
2. 增刪項目工程
3. 增刪接口
4. 接口mock
複製代碼

技術棧： nextjs + koa + sqlite + sequelizesql

本項目整體不算複雜，也能夠給想學習上面技術的同窗提供一個demo。數據庫

項目總體架構

項目基於服務端渲染，有兩個頁面：首頁和項目詳情頁。我把node起的接口服務和服務端渲染框架nexjs起的服務放在了同一個端口。也能夠分開，這裏主要是不想再起一個服務了。json

數據庫使用的sqlite3，它的好處是嵌入式，零配置，超輕量級，數據以文件的形式存儲，不須要額外配置數據庫了。說白了，就是方便，固然也很好用。後端

數據庫鏈接是經過ORM框架sequelize： (Object Relational Mapping)框架採用元數據來描述對象一關係映射細節，這是個好東西啊，對於不太懂SQL語言的前端同窗簡直是福音，經過它咱們就能夠不用寫SQL語句了，只須要像js操做對象那樣就能操做數據庫了。api

路由設計也很簡單，主要分爲三種路由：

處理服務端頁面渲染的路由，
處理頁面請求的路由，
處理接口mock的路由。

//next頁面api接口
router.post('/api/:page', async ctx => {
    await routePost({ params: ctx.params.page, query: ctx.request.body }).then((res, err) => {
        response(res, err, ctx)
    })
})

router.get('/api/:page', async ctx => {
    await routeGet({ params: ctx.params.page, query: ctx.request.query }).then((res, err) => {
        response(res, err, ctx)
    })
})

router.delete('/api/:page', async ctx => {
    await routeDelete({ params: ctx.params.page, query: ctx.request.body }).then((res, err) => {
        response(res, err, ctx)
    })
})

//mock數據接口
router.all('/mock/:project_id/*', async ctx => {
    const { method, body, url, header } = ctx.request
    await routeMock({ params: ctx.params, body, method, url, header }).then((res, err) => {
        response(res, err, ctx)
    })
})

//next頁面接口
app.prepare()
    .then(() => {

        // 首頁
        router.get('/', async ctx => {
            await app.render(ctx.req, ctx.res, '/', ctx.query)
            ctx.respond = false
        })
        // 項目
        router.get('/project', async ctx => {
            await app.render(ctx.req, ctx.res, `/project`, ctx.query)
            ctx.respond = false
        })

        // 若是沒有配置nginx作靜態文件服務，下面代碼請務必開啓
        router.get('*', async ctx => {
            await handle(ctx.req, ctx.res)
            ctx.respond = false
        })
        // 防止出現控制檯報404錯誤
        server.use(async (ctx, next) => {
            ctx.res.statusCode = 200
            await next()
        })
        server.use(router.routes()).use(router.allowedMethods())
        server.listen(port, () => {
            console.log(`> Ready on http://localhost:${port}`)
        })
    })
複製代碼

以url做爲區分： api是頁面請求， mock是接口mock請求，別的是next頁面渲染請求。經過判斷請求url進行不一樣的處理：

routeDelete: async ({ params, query }) => {
        const { id } = query
        switch (params) {
            case 'project':
                await api.deleteApi(id)                     //刪除項目的同時清空對應的api接口
                return await project.deleteOne(id).then(res => response(0, res)).catch(error => response(1, error.message))
            case 'interface':
                return await api.deleteOneApi(id).then(res => response(0, res)).catch(error => response(1, error.message))
            default:
                return '接口請求出錯'
        }
    },
複製代碼