精华内容
下载资源
问答
  • 我最近的在做的项目是一个前后端分离的项目,前后端由不同的团队分别...但问题也随之而来,定义 Mock 数据并配置 mock server 真的太浪费时间了!我真的非常讨厌这种没有任何技术含量的「苦力活」。所以,只好想办法...

    我最近的在做的项目是一个前后端分离的项目,前后端由不同的团队分别开发,并且前端的进度经常领先后端。这就意味着,当前端在开发一个新功能时,API 可能还没有准备好。不过,我们会先和后端先商议好 API Schema,然后使用 Mock 数据进行开发。

    但问题也随之而来,定义 Mock 数据并配置 mock server 真的太浪费时间了!我真的非常讨厌这种没有任何技术含量的「苦力活」。所以,只好想办法让生成 Mock 数据的过程「自动化」。那么,从哪里生成这些 Mock 数据呢?突然想到了开发时使用的 Swagger UI,它提供的 Swagger JSON 准确地定义了所有的 API Schema。因此,我们可以通过 Swagger JSON 去自动生成 Mock 数据。

    本篇文章会介绍如何通过 Swagger 定义去生成 Mock 数据以及 Mock Server 的配置。主要内容包括:

    Swagger 简介

    通过 Swagger JSON 生成 Mock 数据

    处理 Swagger JSON

    生成 Mock 数据

    生成 Mock Server 配置

    本文所有代码都在这个仓库 swagger-faker。

    Swagger 简介

    在介绍 Swagger 之前,你需要先了解一下 OpenAPI 规范。因为 Swagger 定义是基于 OpenAPI 规范的。

    OpenAPI 规范(OAS)为 RESTful API 定义了一个与语言无关的标准接口,允许人和计算机发现和理解服务的功能,而无需通过访问源代码、文档或开发者工具。

    OpenAPI 定义大致如下:

    {

    "swagger": "2.0",

    "info": {},

    "host": "petstore.swagger.io",

    "basePath": "/v2",

    "tags": [],

    "schemes": [],

    "paths": {

    "/user/logout": {

    "get": {

    "tags": [

    "user"

    ],

    "summary": "Logs out current logged in user session",

    "description": "",

    "operationId": "logoutUser",

    "produces": [

    "application/xml",

    "application/json"

    ],

    "parameters": [

    ],

    "responses": {

    "default": {

    "description": "successful operation"

    }

    }

    }

    }

    },

    "securityDefinitions": {},

    "definitions": {},

    "externalDocs": {}

    }

    通过上面的示例,我们可以清楚地知道,/user/logout 用于注销当前已登录的用户会话。它是一个 GET 请求,且不接收任何请求参数。当然,清楚地描述一个 API 意味着要定义很多东西。你可能会觉得 OpenAPI 定义写起来有点麻烦?不用担心,在实际工作中,我们会通过注解的方式自动生成 OpenAPI 定义。

    基于 OpenAPI 定义,我们还可以完成很多事情。比如自动生成服务器和客户端代码(Swagger Codegen)、通过交互式的 UI 来可视化服务接口(Swagger UI)等等。

    通过 Swagger JSON 生成 Mock 数据

    处理 Swagger JSON

    要生成 Mock 数据,我们应该从 Swagger JSON 中获取哪些内容?我从 这个 Swagger JSON 中截取了一段数据,如下所示。仔细观察下面的内容并思考这个问题。

    {

    "paths": {

    "/pet/findByStatus": {

    "get": {

    "tags": ["pet"],

    "summary": "Finds Pets by status",

    "description": "Multiple status values can be provided with comma separated strings",

    "operationId": "findPetsByStatus",

    "produces": ["application/xml", "application/json"],

    "parameters": [

    {

    "name": "status",

    "in": "query",

    "description": "Status values that need to be considered for filter",

    "required": true,

    "type": "array",

    "items": {

    "type": "string",

    "enum": ["available", "pending", "sold"],

    "default": "available"

    },

    "collectionFormat": "multi"

    }

    ],

    "responses": {

    "200": {

    "description": "successful operation",

    "schema": {

    "type": "array",

    "items": {

    "$ref": "#/definitions/Pet"

    }

    }

    },

    "400": {

    "description": "Invalid status value"

    }

    },

    "security": [

    {

    "petstore_auth": ["write:pets", "read:pets"]

    }

    ]

    }

    }

    }

    }

    从上面的例子中可以发现,对于一个请求来说,我们需要的 Mock 数据就是它成功响应之后的数据。也就是说,对于 Swagger JSON,我们需要关心 responses 中 HTTP Status Code 为 2xx 的数据。但是 response 可能会引用 definitions 中定义的数据。因此,为了生成 Mock 数据,我们还需要处理 $ref,也就是用 Definitions 中定义的数据替换它。

    生成 Mock 数据

    处理好 response 之后,就可以生成 Mock 数据了。因为 Swagger JSON 中可以为 response 或者每一个 property 定义 examples/example,所以使用 examples/example 来生成 Mock 数据一定是最准确的。因此,我们会优先使用 examples/example。如果没有定义 examples/example,我们就通过 type 定义的数据类型去生成。

    因为 faker.js 能让我们更方便地去生成 Mock 数据,因此这里选用了它。你可以像下面这样,构造一些方法,去生成不同类型的假数据。

    import * as faker from "faker";

    export const getRandomArrayItem = (items: any[]) => items[Math.floor(Math.random() * items.length)];

    export const booleanGenerator = () => faker.random.boolean();

    export const stringGenerator = (enumList?: any[]) => (enumList ? getRandomArrayItem(enumList) : faker.random.words());

    export const numberGenerator = (max?: number, min?: number) =>

    faker.random.number({

    min,

    max,

    });

    export const fileGenerator = () => faker.system.mimeType();

    生成 Mock Server 配置

    除了生成 Mock 数据之外,很多时候我们还需要配置 Mock Server。就拿我们常用的 JSON Server 来说,我们还需要配置一些额外的东西。比如在 db.json 中配置路由对应的 Mock 数据,在 routes.json 中自定义路由规则等。

    因此,我们还需要从 response 中获取更多的内容,包括 path、basePath、method、response 和 queryParams,如下所示:

    {

    "path": "/pet/findByStatus",

    "basePath": "/v2",

    "method": "get",

    "response": [

    {

    "id": 93645,

    "category": {

    "id": 85609,

    "name": "open-source"

    },

    "name": "doggie",

    "photoUrls": ["firewall Berkshire withdrawal"],

    "tags": [

    {

    "id": 13201,

    "name": "Salad synthesize e-business"

    }

    ],

    "status": "pending"

    }

    ],

    "queryParams": ["status"]

    }

    生成 JSON Server 中的自定义路由时,我们可以根据规则,使用 basePath, path 和 queryParams 拼接即可。

    // routes.json

    {

    "/v2/pet/findByStatus?status=:status": "./findPetsByStatus"

    }

    最后,将这些数据写入对应的文件中便大功告成了。

    最后

    生成 Mock 数据的过程中还是有很多细节需要处理,感兴趣的同学可以去这个仓库 swagger-faker 查看源码。

    展开全文
  • 我将介绍如何使用nodeJS来搭建一个mock服务器,方便前端自定义mock数据请求,提高前端开发的主观能动性和对项目健壮性的探索。 我们将学到 koa基本使用 koa-router的基本用法 koa-logger的使用 glob支持文件遍历...
  • Ant Design Pro V4项目,要想同时使用mock服务器接口,只要针对目标api不写mock就行了。程序会直接连到服务器上去。 亲测可用,如果用不了,那就另想办法吧。 -完- 参考:...

    Ant Design Pro V4 项目,要想同时使用mock和服务器接口,只要针对目标api不写mock就行了。程序会直接连到服务器上去。

    亲测可用,如果用不了,那就另想办法吧。

    -完-

     

    参考:https://blog.fm618.org/2019/08/10/ant-design-pro-v4如何同时使用mock和服务器接口

    展开全文
  • 实现一个本地mock服务器, 本地请求指向mock服务器(如配置axios.defaults.baseURL为mock服务器地址), 如果path匹配成功且该path开启了mock配置项则返回mock数据, 否则对请求进行转发(可根据配置转发至本地或远程...
  • Vue使用mock服务器开发

    2021-05-07 23:04:31
    Vue使用mock服务器开发
    1. 先给个mock官网地址
    npm install mockjs
    
    1. 创建mock文件夹和mock.js,创建一个接口
    import Mock from 'mockjs';
    
    Mock.mock('http://localhost:9000/list', 'get', {
        code: 200,
        data: {
            'list|1-100': [
                {
                    id: '@id',//随机id
                    name: '@name',//随机名称
                    nickName: '@last',//随机昵称
                    phone: /^1[34578]\d{9}$/,//随机电话号码
                    'age|11-99': 1,//年龄
                    address: '@county(true)',//随机地址
                    email: '@email',//随机邮箱
                    isMale: '@boolean',//随机性别
                    createTime: '@datetime',//创建时间
                }
    
            ]
        }
    })
    
    1. main.js引入mock
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    
    Vue.config.productionTip = false
    import '../mock/mock'
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    
    
    1. 安装npm install axios,创建request.js和api.js
    /**
    *. request.js
     * */  
    import axios from "axios";
    
    const  request = axios.create({
        baseURL: 'http://localhost:9000'
    })
    
    export default request;
    
    /**
    * api.js
     * */  
    import request from "./request";
    
    export const getList = ()=>request.get('/list')
    
    1. 组件引入getList,并调用
    <template>
      <div class="home">
        <el-table :data="tableData">
          <el-table-column prop="id"></el-table-column>
          <el-table-column prop="name"></el-table-column>
          <el-table-column prop="nickName"></el-table-column>
          <el-table-column prop="email"></el-table-column>
          <el-table-column prop="createTime"></el-table-column>
          <el-table-column prop="isMale">
            <template slot-scope="scope">
                <span>{{ scope.row.isMale ? '男' : '女' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import {getList} from "../api";
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      data(){
        return {
          tableData: []
        }
      },
      mounted() {
        getList().then(res=>{
          console.log(res)
          this.tableData = res.data.data.list;
        })
      }
    }
    </script>
    
    

    页面显示在这里插入图片描述

    展开全文
  • 快速搭建本地mock服务器

    千次阅读 2019-04-12 00:45:46
    mock-server是一个为开发环境快速搭建数据服务器的脚本工具,启动服务器仅只需要一个mockjs格式的模板文件即可。...# 快速启动mock服务器 mock -p 9999 -f ./_mock.js 复制代码参数说明 port,服务器端口号,默...

    mock-server是一个为开发环境快速搭建数据服务器的脚本工具,启动服务器仅只需要一个mockjs格式的模板文件即可。

    脚本将启动本地服务器,然后匹配mock模板内的url返回对应的数据

    使用

    # 全局安装
    npm i @shymean/mock-server -g
    # 快速启动mock服务器
    mock -p 9999 -f ./_mock.js
    复制代码

    参数说明

    • port,服务器端口号,默认7654,简写 -p
    • file,mock模板文件路径,默认./_mock.js,简写 -f

    mockjs模板语法

    使用该工具只需要准备一个mock模板文件,其语法参考

    // _mock.js
    // 对应的rurl会被中间件拦截,并返回mock数据
    // ANY localhost:9999/
    Mock.mock('/', {
        data: [],
        msg: "hello mock",
        "code|1-4": 1,
    })
    
    // 可以mock指定的请求方法
    // POST localhost:9999/test
    Mock.mock('/test', 'POST', {
        data: [],
        msg: "hello mock",
        "code|1-4": 1,
    })
    
    // 扩展rtype,支持jsonp形式,使用param传入对应的回调名
    // GET JSONP localhost:9999/test
    Mock.mock('/test', {
        type: 'jsonp',
        param: 'callbackName'
    },{
        code: 0,
        msg: 'hello from mock jsonp',
        data: {
            "id|1000-9999": 1,
        }
    })
    
    // 默认回调名称 callback
    Mock.mock("/test2", "jsonp", {
        code: 0,
        msg: "hello from mock jsonp2",
        data: {
            "id|1000-9999": 1,
        }
    });
    复制代码

    自定义请求头匹配

    有时候某个相同的url请求,根据业务参数需要返回不同的模拟数据,因此提供了自定义匹配请求url的功能,需要在模板文件中实现Mock.parseUrl方法即可,该方法返回一个用于匹配的rurl

    Mock.parseUrl = function(ctx){
        // ctx为koa上下文对象
        return 'someUrl'
    }
    
    Mock.mock('someUrl', {code: 0})
    复制代码

    nginx配置

    为了避免在业务代码中使用localhost域名,最佳实践方案是开发时将业务域名(如xxx.test.com)指向本地

    127.0.0.1 xxx.test.com
    复制代码

    然后通过nginx配置反向代理到mock服务器

    server {
        listen 80;
        server_name xxx.test.com;
    
        # 根据location判断需要使用mock数据的接口
        location /j/cn/control/api {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_pass http://127.0.0.1:9999; # mock -p 9999 指令启动的服务器的端口号
        }
    }
    复制代码

    Feature

    • 与mockjs浏览器端共用同一套mock模板,方便迁移和代码维护
    • 支持jsonp请求
    • 数据模板热更新,修改模板文件后,将自动重启服务器

    Todo

    • 支持映射本地文件,比如样式表、图片等

    转载于:https://juejin.im/post/5cafdf03f265da0380435d6c

    展开全文
  • 构建前端mock服务器

    2019-03-28 10:48:57
    本教程整体开发环境为nodejshttps://nodejs.org/en/ ... 本教程涉及到的2个项目的端口代理采用nginxnginx news 本教程涉及到的2个项目的git代码托管为 码...本教程涉及到的mock项目的自动化部署基于的码云平台的webho...
  • 前后端分离,往往后端负责提供数据接口,前端负责数据展示,但是往往后端接口有延迟或者其他原因,前端并不能等待接口进行下一步开发,所以mock数据就变得很重要(由于我司后端给力,接口给的非常迅速,所以实际开发...
  • 对于前端开发者而言,javascript正扮演着越来越重要的地位,它...我将介绍如何使用nodeJS来搭建一个mock服务器,方便前端自定义mock数据请求,提高前端开发的主观能动性和对项目健壮性的探索。 我们将学到 koa基本...
  • mock.7z,mock服务需要在服务器上部署
  • MOCK 服务器 一、mock 简介 向mock提供测试数据的格式要求,字段说明信息,mock可以提供符合要求的数据返回。 其实思路很简单,但是解决了很大的问题。 前后端分离,前端可以不必等后端接口,可以直接请求mock获得...
  • import Mock from 'mockjs' // 引入mockjsconst Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据let data = [] // 用于接受生成数据的数组let size = ['300x250', '250x250', '240x400', '...
  • 简介该项目实现的功能是:根据swagger文档,mock server 来生成假数据,这样便于实际...使用说明安装和运行项目的部署需要安装docker 和 docker compose, 服务器部署时采用docker compose: docker-compose up -d, ...
  • 快速搭建本地、测试环境Mock服务器 安装 npm install easy-mock 或者 git clone git@github.com:518yxx/easy-mock.git 运行 node index.js 使用 访问 在当前目录放入任意文件,访问 “127.0.0.1:4444/[文件名]” ...
  • 介绍Mock.js生成随机数据,拦截 Ajax 请求前端使用mockjs后,对后端接口进行请求时,mockjs会拦截Ajax请求,并返回随机数据,模拟后端的响应。这样,无需等到后端接口开发完毕,前端就可以对获取数据部分进行开发、...
  • easy to mock data by http server(简单的数据mock服务器
  • Linux下mock服务器搭建

    2017-07-13 10:54:00
    登录到Linux服务器,我用的是xshell 1.安装JDK 这是大多数中间件的前提 2.采用java安装 首先下载:mock serve的包 wget ...
  • 主要介绍了详解vue-cli项目中用json-sever搭建mock服务器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一、小程序实现自定义组件从小程序...右键新建component并生成四个文件第二步:如何在其他页面引入刚才创建的Dialog组件二、在小程序中如何mock数据(一)在小程序中使用mock数据的步骤:第一步:下载文件:mock.js,...
  • 关于Mock平台构建的一些资料
  • 搭建mock服务器(微信小程序) 如何在微信小程序使用mock.js实在是个问题,为了完全模拟访问路由和数据,选择在搭建本地mock服务器是一个不错的选择。 以下示例了一个mock服务器的搭建过程以及以学生为对象进行增删改...
  • Easy-Mock服务器部署

    千次阅读 2020-03-22 14:52:34
    1.一台服务器(话说最近掘金上很多卖服务器的垃圾广告,可被搞惨了..哈哈哈,推荐大家到阿里云官网合法途径购买哈~) 2.域名(个人觉得可有可无,因为需要域名备案,比较麻烦) 3.跟着这篇教程一步一步走 2.安装...
  • mock服务器的技术构思

    2018-12-10 16:44:57
    1.前后分离 现在大部分项目都采用前后分离,这时候数据模拟必不可少。我们模拟数据的思路一般是分为如下: ...mock.js也是这样实现的,这样做比较稳定。比较常用。 3.重定向请求 重定向请求已经是...
  • 搭建一个easy mock平台,并部署在服务器上,该平台可以快速创建接口并正常使用。该平台支持 自定义一些函数,语法参照 mockjs,可以在接口中构造随机的数据,支持正则,批量构造数据,还 可以根据 请求参数,变化...
  • 小巧的 mock 服务器,配合 Chrome 插件可以轻松地拦截或 mock 页面上的 xhr/jsonp/fetch 请求。不需要侵入页面本身代码,让前端同学在后端接口没有 ready 或者难以模拟数据的时候,继续开心地开发玩耍 .
  • ##基于express和mock.js搭建自己的前后端分离Mock服务器 运行$ npx express-generator api-server创建一个express项目 $ cd api-server进入项目目录 $ npm install安装项目所需要的依赖 $ npm install ...
  • 这是一个非常基本的假API服务器。 我用它来构建Web应用程序的前端,而无需准备好后端。 它是一个内存中的非持久键值存储,您可以用PUT请求填充它,其中请求路径是键,而请求主体是值。 在同一端点上通过后续的GET...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,145
精华内容 10,058
关键字:

mock平台服务器