您现在的位置是:首页 > 正文

前端 mock 接口响应数据

2024-02-01 03:24:29阅读 2

目录

写在开头

对mock和express的个人理解

本次案例效果图

项目结构

启动服务

mock编写

服务文件:mockServer.js

 接口文件:mockApi.js

前端项目处理

结束


写在开头

我是一个纯前端,不懂node里面的express,但是在这个mock里,查查资料也能用~

对mock和express的个人理解

1.前端mock与所用的前端框架没有关系。
2.mock让前后端可同步开发,待后端完成开发,前端切换接口api稍加调试即可发布到测试和生产环境
3.可以在不泄露公司数据的情况下,演示整个项目功能。
4.mock功能只能用于本地开发
5.需要安装mockjs而不是mock,这是重点

npm i mockjs --save-dev

6.express是node里面的模块,只要项目是跑在node环境下,即可引用。 

本次案例效果图

mock了列表数据,点击查询,返回mock出来的列表数据。

项目结构

新增一个mock目录,有mockServer.js和mockApi.js,分别为服务器文件和接口文件
注意:mock目录可放在任何地方,启动mockServer相当于模拟了一个后端服务器。api则模拟了后端的接口响应数据。

启动服务

1.package.json的启动配置如图

    "scripts": {
        "mock": "nodemon ./src/mock/mockServer.js",
        "start-dev": "cross-env UMI_ENV=development umi dev",
        "start-test": "cross-env UMI_ENV=test umi dev",
        "start-prod": "cross-env UMI_ENV=prod umi dev",
        "build-dev": "cross-env UMI_ENV=development umi build",
        "build-test": "cross-env UMI_ENV=test umi build",
        "build-prod": "cross-env UMI_ENV=prod umi build",
        "postinstall": "umi generate tmp",
        "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
        "test": "umi-test",
        "test:coverage": "umi-test --coverage"
    },

2.安装nodemon,也可以直接用node运行起来,不过node不是hot监听的

npm i nodemon --save-dev

3.引用nodemon的原因:修改mock目录里面的文件时,会自动运行mock服务器。
如果是node ./src/mock/mockServer.js,则修改mock里面的文件,需要ctrl+c关掉运行程序,重新npm run mock。
4.启动前端项目。比如我的项目,npm run start-dev。
5.启动mock服务器。比如我的项目,npm run mock。

mock编写

mock的语法见Mock.Random部分
Home · nuysoft/Mock Wiki · GitHub

服务文件:mockServer.js

const express = require('express');
const app = express(); //创建express 实例

app.all('*', (req, res, next) => {
    // google需要配置,否则报错cors error
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    // 允许的地址,http://192.168.1.111这样的链接,如果本地是http://127.0.0.1,可以改为http://127.0.0.1
    res.setHeader('Access-Control-Allow-Origin', 'http://192.168.1.111');
    // 允许跨域请求的方法
    res.setHeader(
        'Access-Control-Allow-Methods',
        'POST, GET, OPTIONS, DELETE, PUT',
    );
    // 允许跨域请求header携带哪些东西
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    // if (req.method.toLowerCase() === 'options') {
    //     res.sendStatus(200); // 让options尝试请求快速结束
    // } else {
    next();
    // }
});

//基本路由:app.METHOD(PATH, HANDLER)
app.get('/', function(res, req) {
    //req(请求),res(响应)
    req.send('test!');
});

app.use('/umiapi', require('./mockApi')); //装入mockApi路由器模块

//应用程序会启动服务器,并在端口 3000 上侦听连接,3000端口可以修改,如8000,8001等等
app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});

 接口文件:mockApi.js

const express = require('express');
const Mock = require('mockjs');
const router = express.Router();

// 请求 /umiapi/test 接口
router.post('/test', function(req, res) {
    //调用mock方法,模拟数据
    let data = Mock.mock({
        status: 200,
        data: {
            total: 20,
            'list|10': [{
                'storeCode|+1': 1000,
                storeName: '@cname()',
                yearmonth: '@date("yyyy-MM")',
                startupType: '@STRING("ABC",1)',
                persons: '@integer(1,10)',
                examDays: '@integer(1,10)',
                reGrTaskAvg: '@float(1,10,2,2)',
                storeDivide: '@float(1,10,2,2)',
                personName: '@cname()',
                partnerType: '@STRING("ABC",1)',
                partnerRatio: '@float(1,10,2,2)',
                cqRatio: '@float(1,10,2,2)',
                personDivide: '@float(1,10,2,2)',
                cmFee: '@float(1,10,2,2)',
            }, ],
        },
        result: true,
        message: '请求成功!',
    });
    return res.json(data); //res.json()发送 JSON 响应。
});


//请求 /umiapi/userInfo 接口
router.get('/userInfo', function(req, res) {
    //调用mock方法,模拟数据
    let data = Mock.mock({
        status: 200,
        content: {
            name: 'mollealala',
            age: '18',
            from: 'Hunan',
        },
        message: '请求成功啦',
    });
    return res.json(data);
});

module.exports = router;

前端项目处理

在区分环境的api文件中,将development环境的api地址改为http://localhost:3000/umiapi/即可
如,我的项目为:

enum BUILD_ENV {
  PROD = 'prod',
  TEST = 'test',
  DEV = 'development',
}
const { UMI_ENV = '' } = process.env
const target = JSON.parse(UMI_ENV)
export default {
  /** 接口根地址 */
  getApiPrefix: (() => {
    switch (target) {
      case BUILD_ENV.PROD:
        return 'https://abc.com/'
      case BUILD_ENV.TEST:
        return 'https://abc.test.com/'
      case BUILD_ENV.DEV:
        return 'http://localhost:3000/umiapi/'
      default:
        return ''
    }
  })()
}

结束

1.如果发现请求方法是options 200,没有继续发出get/post请求,首先在控制台看看network》》other有没有请求,如果没有,则需要上网搜一下预检请求。或者直接参考官网:Cross-Origin Resource Sharing (CORS) - HTTP | MDN
2.express中app的use方法:可以将同一功能模块的接口封装在一个api文件里面,如个人信息,登录,注册,某某列表等功能模块。
3.整篇都没有设置proxy代理来解决跨域,因为mock服务器已经设置了允许本地访问,见Access-Control-Allow-Origin属性。

网站文章

  • Ant Design of Vue 时间选择框踩坑 && Ant Design of Vue 时间选择器数据回显解决方法

    Ant Design of Vue 时间选择框踩坑 && Ant Design of Vue 时间选择器数据回显解决方法

    表格中使用时间选择器 并使其数据回显 本人在项目开发中使用的框架为 Ant Design of Vue 因为这个组件在实际开发中用的是比较少的(一般都是用日期选择框) 肯定有人遇到和我一样的问题框架的...

    2024-02-01 03:24:23
  • atom服务器系列,新Atom:微型服务器我来了

    atom服务器系列,新Atom:微型服务器我来了

    "Atom正在努力探索两条新路,一是智能手机和平板机,二就是微型服务器,这两方面都正在与ARM展开正面交锋。面向微型服务器的Atom平台开发代号Bordenville,处理器代号Centerton,采...

    2024-02-01 03:24:17
  • 安装wsl并将Python和OpenCV Python包导入到wsl里

    安装wsl并将Python和OpenCV Python包导入到wsl里

    1、不一定非得安装原版python,可以选择aconda,里面包含了一些要用的包和工具,会更加方便,也更利于版本控制。其中python安装时我按照如下顺序勾选,看教程说几种安装方式都可以,过程稍微有点...

    2024-02-01 03:23:47
  • 通过CSS类型的顺序改变网页超级连接翻滚效果

    <script type="text/javascript"> </script> <script type="text/javascrip...

    2024-02-01 03:23:39
  • getaddrinfo ENOENT raw.githubusercontent.com

    找到问题所在,解决起来就容易得多了,直接找到可用的ip地址写进host里面,这里刚好有一个,如果下面的ip地址不行,找到可用ip地址就好。发生场景:react 老项目在执行npm install时报错。

    2024-02-01 03:23:31
  • 同符号数学运算

    描述 读入一个整数N,分别计算如下内容: 1. N的绝对值; 2. N与10进行同符号加法、减法和乘法运算,同符号运算指使用N的绝对值与另一个数进行运算,运算结果的绝对值被赋予N相同的符号,其中,0的符号是正号。 将上述4项结果在一行输出,采用空格分隔,输出结果均为整数。 程序如下: n=eval(input())a=abs(n)b=a+10c=a-10d=a*10if n>...

    2024-02-01 03:23:01
  • github团队开发之申请加入团队

    github团队开发之申请加入团队

    github团队协作开发,仓库创建者需要邀请团队成员加入,然后才能协作开发;远程库创建者登录,打开仓库地址,然后点击 Settings点击左侧 Manage access再点击 “Invite a c...

    2024-02-01 03:22:54
  • 数据可视化—随机漫步

    数据可视化—随机漫步

    随机漫步顾名思义就是你也不知道它下一步走哪,可能这辈子你都找不到两个一模一样的随机漫步(不信可以试试)

    2024-02-01 03:22:48
  • springboot2.7以上版本配置swagger3.0.0版本浏览器无法打开swagger-ui

    【代码】springboot2.7以上版本配置swagger3.0.0版本浏览器无法打开swagger-ui。

    2024-02-01 03:22:20
  • C++的数据类型总结,不能错过

    C++的数据类型总结,不能错过

    代码编译运行环境:VS2012+Win32+Debug。1.C++数据类型简介C++是一种强类型语言。C++程序中的任何变量(或函数)必须遵循“先说明后使用”的原则。定义数据类型有两个方面的作用:一是...

    2024-02-01 03:22:13