前后端分离——前端项目使用Mock.js 模拟数据

一、简单介绍一下Mock.js

众所周知Mock.js因为两个重要的特性风靡前端:

  • 数据类型丰富
    支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。(详情见官网
  • 拦截 Ajax 请求
    不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。安全又便捷

文章会用到的API(也是Mock经常使用的API):

    • Mock.mock(url, type, data)
参数名 参数需求 参数描述 例子
url 可选: URL 字符串或 URL 正则 拦截请求的地址 /mock
type 可选 拦截Ajax类型 GET、POST
template 可选: 可以是对象或字符串 生成数据的模板 {‘data|1-10‘:[‘mock‘] }‘@EMAIL‘

template可能有点难理解,我们试几个例子就一目了然了!

//类型1: 名字|规则: 内容
Mock.mock({‘data|1-4‘: ‘哑巴‘})

//生成1-4个‘哑巴‘字符串
{
    data: "哑巴哑巴哑巴"

}

//类型2: Mock自带模板
Mock.mock(‘@province‘)

//随机生成一个省份
"上海"

更多测试实例可以到:http://mockjs.com/examples.html上查看。

也可以亲自在网站的console里测试,非常方便:

二、如何高效地使用Mock.js

针对不同情况,罗列了以下几种可能会使用到的方式:

  • 直接创建使用
    1) 直接在需要Mock数据的js文件使用
    2) 创建一个js/json文件,导入使用
  • 优雅地搭配node
    1) 通过node开启Mock服务, 可加入到package.json命令里

上面两种方法区别蛮大的:

  1. 直接创建的Mock数据, 在控制台的netWork是无法看到的.而通过服务开启的Mock,在控制台是真真切切看得到拦截的!
  2. 对于要上线的项目, 直接创建(导入)Mock数据还会导致一个大的麻烦!当你开始调用真正后端接口的时候, 你不得不一个个删除创建的数据(即使你统一在一个文件创建,但也要一个个注释掉导入的地方)。 但是如果你用node服务,就避免了这个问题了。因为你需要用Mock数据的时候,只需要开启它的服务,而不需要导入

下面我在一个小项目(React + Antd)上测试Mock:

2.1直接创建使用

let dataSource = Mock.mock({
    ‘dataSource|5‘:[{
        ‘key|+1‘: 1,
        ‘mockTitle|1‘:[‘哑巴‘, ‘Butter-fly‘, ‘肆无忌惮‘, ‘摩天大楼‘, ‘初学者‘],
        ‘mockContent|1‘: [‘你翻译不了我的声响‘, ‘数码宝贝主题曲‘, ‘摩天大楼太稀有‘, ‘像海浪撞破了山丘‘],
        ‘mockAction|1‘: [‘下载‘, ‘试听‘, ‘喜欢‘]
    }]
})

//为了提高阅读效率, columns我就不放出来啦!

<Table
    style={{marginTop: 10}}
    columns={columns}
    dataSource={dataSource}
/>

其中,‘mockTitle|1‘:[‘哑巴‘, ‘Butter-fly‘, ‘肆无忌惮‘, ‘摩天大楼‘, ‘初学者‘]的含义为[‘哑巴‘, ‘Butter-fly‘, ‘肆无忌惮‘, ‘摩天大楼‘, ‘初学者‘]数组中选择一个值

详情请参考:语法规范

我们看一下输出的Table:

但对于追求完美的我们肯定想要代码更规范, 于是我们把它统一放到一个/mock/api.js文件中, 并尝试给它添加一个URL!

//api.js
import Mock from ‘mockjs‘

const url = {
    tableDataOne: ‘http://20181024Mock.com/mode1/tableDataOne‘,
    tableDataTwo: ‘http://20181024Mock.com/mode1/tableDataTwo‘,
    tableDataThi: ‘http://20181024Mock.com/mode1/tableDataThi‘,
}
module.exports = [
    Mock.mock(url.tableDataOne, {
        ‘dataSource|5‘:[{
            ‘key|+1‘: 1,
            ‘mockTitle|1‘:[‘哑巴‘, ‘Butter-fly‘, ‘肆无忌惮‘, ‘摩天大楼‘, ‘初学者‘],
            ‘mockContent|1‘: [‘你翻译不了我的声响‘, ‘数码宝贝主题曲‘, ‘摩天大楼太稀有‘, ‘像海浪撞破了山丘‘],
            ‘mockAction|1‘: [‘下载‘, ‘试听‘, ‘喜欢‘]
        }]
    })
]

我们在去组件中引入api.js, 然后用axios请求它!

//TableComp.js
/*
* 我这里去掉了多余的import,例如antd、react等等
* 只截取了组件的主要学习部分
*/

import axios from ‘axios‘

//按需引入api文件, 但后面会导致删除麻烦的问题.
import ‘../../../../../../mock/mode1/api‘

componentDidMount(){
    const that = this;
    axios.get(‘http://20181022Mock.com/mode1/tableDataOne‘).then((res) => {
        if(res.status == 200){
            that.setState({
                dataSource: res.data.dataSource
            })
        }
    })
}

render(){
    const { dataSource } = this.state;

    return(
        <Table
            style={{marginTop: 10}}
            columns={columns}
            dataSource={dataSource}
        />
    )
}

不出乎意料, 应该也是可以拿到数据, 但是netWork里面是找不到这个请求的, 因为这是一个假的ajax!

这样虽然解决了代码统一处理/规范的问题, 但是每次使用都需要引入的麻烦并没有解决。 下面我们看如果通过搭配node服务解决这个问题.

2.2优雅地搭配node来使用mock.js

既然我们要伪造一个真的后台, 那么当然需要用node来启动服务, 那么我们就创建一个MockServer.js文件,当作是我们的入口.

和以前创建node服务一样即可!(这里我偷懒用express框架,koa也是一样的道理)

let express = require(‘express‘);   //引入express
let Mock = require(‘mockjs‘);       //引入mock

let app = express();        //实例化express

app.use(‘/mode2/DataOne‘,function(req, res){
    res.json(Mock.mock({
        ‘status‘: 200,
        ‘dataSource|1-9‘:[{
            ‘key|+1‘: 1,
            ‘mockTitle|1‘:[‘肆无忌惮‘],
            ‘mockContent|1‘: [‘角色精湛主题略荒诞‘, ‘理由太短 是让人不安‘, ‘疑信参半 却无比期盼‘, ‘你的惯犯 圆满‘, ‘别让纠缠 显得 孤单‘],
            ‘mockAction|1‘: [‘下载‘, ‘试听‘, ‘喜欢‘]
        }]
    }))
})

app.listen(‘8090‘, () => {
    console.log(‘监听端口 8090‘)
})

只需要以上几个步骤就可以完成了!

    1. 实例化express对象、引入mock模块
    2. (加入请求头,解决跨域)
    3. 通过express挂载一个请求(use、get...),并返回mock数据
    4. 暴露端口,开启服务!

大家可能注意到了第二点我还没实现.不过我们先不考虑跨域问题, 运行一下看看会出现什么情况。(存在跨域问题是必然的, 因为都不是同一个端口号!)

果然, 跨域问题出来了:

把请求头配置加上去吧(复制即可):

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(‘Access-Control-Allow-Methods‘, ‘PUT, GET, POST, DELETE, OPTIONS‘);
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header(‘Access-Control-Allow-Headers‘, ‘Content-Type‘);
    next();
});

跨域问题就顺利解决了!

这样一来我们就解决了导入带来的麻烦了!如果不想进入MockServer.js所在的文件夹里启动服务, 可以在package.json中配置命令

//package.json
{
    ...
    "scripts": {
        "start": "node ./bin/www",
        "build": "webpack --progress --watch --color",
        "mock": "node ./mock/mode2/mockServer"
      },
    ...
}

然后我们像启动项目一样, 在根路径npm run mock即可!

比较坑爹的是, 这样配置并不存在自动更新功能, 所以我们每次更改了MockServer.js还要command + c 杀掉这个进程, 重启服务生效。

虽然实际项目使用Mock的这种方式蛮多的, 但是其中复杂地多, 比如Mock生成数据的规则会统一放到一个rule.js中. 更多的便捷配置和用法还是需要你去学习别的项目是怎么运作的!

转自:https://www.cnblogs.com/soyxiaobi/p/9846057.html

原文地址:https://www.cnblogs.com/vickylinj/p/12336235.html

时间: 2024-10-04 10:01:36

前后端分离——前端项目使用Mock.js 模拟数据的相关文章

java结合node.js非对称加密,实现密文登录传参——让前后端分离的项目更安全

前言   在参考互联网大厂的登录.订单.提现这类对安全性操作要求较高的场景操作时发现,传输的都是密文.而为了目前项目安全,我自己负责的项目也需要这方面的技术.由于,我当前的项目是使用了前后端分离技术,即node.js做前端,spring boot做后端.于是,我开始搜索有关node.js与java实现非对称加密的资料,然而,我却没有得到一个满意的答案.因此,我有了写本篇博客的想法,并希望给用到这类技术的朋友提供帮助. 一.明文密码传输对比 首先. 构建spring boot 2.0项目 引入we

[转] 前后端分离开发模式的 mock 平台预研

引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都各自有自己的开发流程,构建工具,测试集合 关注点分离,前后端变得相对独立并松耦合 开发流程 后台编写和维护接口文档,在 API 变化时更新接口文档 后台根据接口文档进行接口开发 前端根据接口文档进行开发 开发完成后联调和提交测试 面临问题 没有统一的文档编写规范,导致文档越来越乱,无法维护和阅读 开

gin+vue的前后端分离开源项目

该项目是gin+vue的前后端分离项目,使用gorm访问MySQL,其中vue前端是使用vue-element-admin框架简单实现的: go后台使用jwt,对API接口进行权限控制.此外,Web页面在token过期后的半个小时内,用户再次操作会自动刷新token: 项目很小,适合gin新手学习!(后续有时间会补上相关教程) GitHub地址:https://github.com/Bingjian-Zhu/gin-vue 一.运行go后台项目 (1)把项目clone到GOPATH/src目录下

mock.js模拟数据

一.mock解决的问题 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据.特殊的格式,例如IP,随机数,图片,地址,需要去收集 二.mock优点 1.前后端分离 让前端工程师独立于后端进行开发. 2.增加测试的真实性 通过随机数据,模拟各种场景. 3.开发无侵入 不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数

axios + mock.js模拟数据实现前后端分离开发的实例代码

首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中全局引入axios插件和mock.js文件如图 3. 在组件中用axios获取mock.js文件 4. 在mock.js mockjs的用法可以到官网了解:http://mockjs.com(小生初学mock.js有不当之处请指出) 原文地址:https://www.cnblogs.com/mei1

Spring Boot企业级开发前后端分离博客系统+Thymeleaf实战+Jpa数据持久化实战+全文检索实战+架构设计与分层+API设计

前端项目名为wh-web后端项目名为wh-server项目展示地址为我的github pages(https://smallsnail-wh.github.io)用户名:admin,密码admin(第一次启动会比较慢)项目建构简单介绍: 数据库设计 用户表sys_user:存储用户基本信息.角色表sys_role:存储不同的角色.菜单表sys_menu:存储菜单信息.用户和角色关系表r_user_role:存储用户和角色的关系. 逻辑是sys_user表通过id关联r_user_role表得到对

vue使用mock.js模拟数据

一.安装1.安装 mock axiosnpm install mockjs axios --save2.安装axios-mock-adapteraxios-mock-adapter 是axios与mock配置器,简单来说就是把二者结合在一起的工具npm install axios-mock-adapter --save-dev 二.使用mock1.在src目录下,创建mock文件夹,在下面再创建data文件夹,创建数据文件,比如user.js,用于模拟生成用户信息数据,初始化我们需要的数据,这里

记录在一次前后端分离的项目开发中遇到的坑

问题如下图: 在一次实际的项目开发中,我负责前端开发,使用的是vue+axios,后台使用的是php,由于我们的开发环境处于不同的域名和端口下, 所以出现了跨域问题,当然php服务端 可以直接解决这个问题,但是后端设置之后,前端每次都会先发出options请求,然后再post请求, 这说白了,就是每个接口请求两次.我们来分析下原因: 出于安全考虑,并不是所有域名访问后端服务都可以.其实在正式跨域之前,浏览器会根据需要发起一次预检(也就是option请求),用来让服务端返回允许的方法(如get.p

关于使用vue搭建前后端分离的项目,部署过程遇到的问题

1.首先应该有三个端口号:app前端.网页前端.后台接口  后台接口有很多,但是会映射到zuul上,保证他的端口号是对外开放的,其他不被占用就行 2.pc前端访问后台路径 他的baseUrl是每一次请求的基础路径,需要写服务器后台对外开放的ip和端口号,tomcat部署前端服务也得需要另一个端口号 3.然后发现他的静态资源都访问不到,可以看我的另一篇博客  https://www.cnblogs.com/vv-lilu/p/11106894.html 4.使用vue-lic3搭建的手机端框架,静