美文网首页
模拟数据之-mock

模拟数据之-mock

作者: Jin_Simona | 来源:发表于2019-05-14 15:56 被阅读0次

前言:
前端的任务到底是什么
前端开发的本质,是数据的采集和数据的呈现,即把用户提交的数据准确安全地发送给服务器,把服务器传递的数据按照设计图展示在界面上,无论是否界面是否经过CSS的美化,是否经过交互设计的易用性优化,最本质的东西是一样的。
换句话说,你需要做到的是后端给的数据正确时,确保将其按设计稿展示出来,后端给的数据不正确时,给出提示并尽可能不要让脚本报错退出。

一、mock使用场景

1、现在的开发很多都是前后端分离的模式,前后端的工作是不同的,当我们前端界面已经完成,但是后端的接口迟迟不能提供前端很多时候都会等接口。
2、测试人员想要你提供一份可以直接测试,自行修改后端接口,测试 UI 的时候。
3、后端的接口,不能提供一些匹配不到的场景的时候。

二、mock 数据的方案

1、引入 mock.js 实现请求拦截。

Mock.js(github仓库地址)是一个生成Mock数据(也就是虚拟数据)js库,语法简单明了却非常好用,支持前端和服务端两种环境引用,感兴趣的读者可以点击上面链接进行学习,官方Wiki提供了全套文档,最多1小时就可以上手。

安装
  npm install mockjs
使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'id|+1': 1
    }]
})
// 输出结果
 console.log(JSON.stringify(data, null, 4))
RequireJS (AMD)
// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]  
    })
    // 输出结果
    document.body.innerHTML +=
        '<pre>' +
        JSON.stringify(data, null, 4) +
        '</pre>'
   })

2、搭建一个属于自己到 mock 服务器,模拟自己想要到数据及其数据结构。

使用node.js框架express快速搭建服务器,与后端人员约定好接口后,使用Mock.js在服务端生成各类型虚拟数据,前端开发人员直接对接Mock服务器
express (express框架): npm install express -g
express-generator (express项目生成插件): npm install express-generator -g
mockjs(模拟数据生成库): npm install mockjs
引入mockjs,生成需要的随机数据,当接收到前端发送的请求时,返回生成的数据:

var express = require('express');
var router = express.Router();
var Mock = require('mockjs');
var Random = Mock.Random;
router.get('/systemwarn', function (req, res, next) {
  var data =Mock.mock({
      'list|20':[{
            'id|+1':1,
            'serial_number|1-100':1,
            'warn_number|1-100':1,
            'warn_name|1':['流水线编排服务异常','磁盘占用超过阈值'],
            'warn_level|1':['紧急','重要'],
            'warn_detail':'环境IP:10.114.123.12,服务名称:XX',
            'create_time':Random.datetime(),
            'finish_time':Random.datetime(),
            'contact|4':'abc'
        }] 
      });

  res.send({
    meta : {
      message: 'success'
    },
    status:true,
        data: data.list
  })
})
module.exports = router;

3、传统Apache服务器

为方便管理,直接使用开源XAMPP集成环境,安装完成后一键开启apache服务器,并将前端代码拷贝至安装目录中htdoc文件夹中的子文件夹中,然后以方式1中类似的方式在浏览器中访问即可,由于服务端代码取消了跨域限制,故即使端口号不同,apache服务器中的网站仍然可以访问node服务器中的接口并拿到数据。

4、还有其他很多特别到手段....

相关文章

  • mock数据

    Vue中的mock数据指的是什么? mock数据指的模拟数据,mock中文翻译愚弄,嘲笑。 实现mock数据如下:...

  • 模拟数据之-mock

    前言:前端的任务到底是什么前端开发的本质,是数据的采集和数据的呈现,即把用户提交的数据准确安全地发送给服务器,把服...

  • mock.js深入

    1.Mock.mock( template )根据数据模板生成模拟数据。(具体语法见mock.js入门) 2.Mo...

  • mock服务入门实践

    mock是以代码来实现fiddler的一个功能,模拟返回数据 mock模拟接口返回数据,如下在test_metho...

  • 利用node.js来mock数据

    1.什么是mock数据? 模拟后端数据 2.mock数据解决的问题 使用mock数据可以在后端开发人员尚未完成接口...

  • mock

    mock使用优势:前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发 1,安装mock依...

  • 使用mockJs生成数据

    1,添加mock资源 2,没有找到模块 3,引入mock 模拟数据 4,输出

  • fiddler模拟mock -- 解决跨域访问(CORS)

    Fiddler模拟接口返回数据 前面其实大概写过如何模拟返回数据,参见:利用fiddler快速模拟mock[htt...

  • AJAX数据模拟之Mock

    出现的原因 1、开发进度的不同 2、前后端分离 优势 1、前后端分离—–定义好接口文档之后,前端人员不用再等待后台...

  • node项目必用工具

    调试工具devtool[nodemon] 数据模拟mock.js

网友评论

      本文标题:模拟数据之-mock

      本文链接:https://www.haomeiwen.com/subject/wmisaqtx.html