• 搭建Mock Server


    1.为什么要搭建mock-server?

    为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server。

    目前很多前端 mock 数据的方案的基本流程都是使用 node.js 来模拟 http 请求,配置 router 返回 mock 数据。

    一个比较好的 mock-server 该有的能力:

    1.与线上环境一致的接口地址,每次构建前端代码时不需要修改调用接口的代码

    2.所改即所得,具有热更新的能力,每次增加 /修改 mock 接口时不需要重启 mock 服务,更不用重启前端构建服务

    3.能配合 Webpack

    4.mock 数据可以由工具生成不需要自己手动写

    5.能模拟 POST、GET 请求

    6.简单(包括:文件结构简单、编写代码简单) 

    2.我们mock server 服务器

    1.就是一个基于Node的 Express web 搭建的一个本地server。

    2.数据mock的思路就是在这个本地server端进行,Promise 发出http请求,通过 router 返回mock数据。

    3.与线上环境一致,前端代码构建和接口服务是分开独立的

    app.listen(3001, () => {

      debug(`The fake API server is listening on ${'3001'.rainbow}.`)

    }) //启动一个服务并监听从 3001 端口进入的所有API连接请求

    在webpack 配置中, 比较简单:

    proxy: {

          '/api/*': {

            target: `http://${host}:3001`,

            secure: false,

          },

    将匹配 ‘/api/*’ 这种格式的API的域名重定向为 http://${host}:3001

    4.具有热更新的能力,每次增加 /修改 mock 接口(入口api/index.js)时自动重启 mock 服务

    nodemon 自动重启的工具 启动 mock server

    5.mock 数据可以由工具生成不需要自己手动写,还能模拟 POST、GET 请求

    用到LowDB,LowDB 基于Lo-Dash 中间件, 基于Node的纯Json文件数据库,LowDB支持 JSON Server 和 JSONPlaceholder.

    dbs[entry] = low(`${entries[i]}/data.json`)

    返回或者创建一个Lo-Dash包裹数组。然后,您可以使用这些方法: where, find, filter, sortBy, groupBy, ...和来自Underscore.db的方法

    目录结构,根据大模块划分了mock数据目录结构,

    每一个模块下,都有个schemas/*.js  Object类型 default 数据定义,然后JSON.stringify(data)转为JSON 字符串,同步写入data.json文件中。用到Faker.js 的一些API。 (mock一些不变的数据)

    每一个模块下,都有routes/*.js , 每个模块都对应创建了 express.Router() 实例,在具体app.get(‘/’, (req, res)) 对应的URL 或 路由 来模拟POST 或者GET 请求 以及PUT和DELETE请求,固定的status code 对应了不同的error。

     6.简单(包括:文件结构简单、编写代码简单)

    如何在src (业务代码) 中调用mock server呢?

    在src 下modules/*.js 中定义Promise 请求

     export const myFun = () => ({

      type: MYFUN,

      promise: (dispatch, getStore, api) => api.get(URL.myFun)

    })

    URL 对应配置了不同环境的url 请求, 生产环境(真实),开发环境 (mock server 路由),测试环境(unit test)

  • 相关阅读:
    吴裕雄--天生自然C++语言学习笔记:C++ 存储类
    吴裕雄--天生自然C++语言学习笔记:C++ 修饰符类型
    吴裕雄--天生自然C++语言学习笔记:C++ 常量
    吴裕雄--天生自然C++语言学习笔记:C++ 变量作用域
    吴裕雄--天生自然C++语言学习笔记:C++ 变量类型
    吴裕雄--天生自然C++语言学习笔记:C++ 数据类型
    吴裕雄--天生自然C++语言学习笔记:C++ 注释
    吴裕雄--天生自然C++语言学习笔记:C++ 基本语法
    SPOJ375Query on a tree I(树剖+线段树)(询问边)
    HDU5768Lucky7(中国剩余定理+容斥定理)(区间个数统计)
  • 原文地址:https://www.cnblogs.com/torri/p/7258285.html
Copyright © 2020-2023  润新知