前端开发之mock.js使用——前后端分离，生成随机数据

前言

本篇目标在于先简单了解mock.js，然后可以简单使用，运行出第一个Mock.js的“HelloWorld”。

一、Mock.js是什么？

官网： http://mockjs.com/

官方简介：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据

个人总结的说： 就是用来造假数据的，使前端脱离后端也能编程，方便前端开发测试使用；然后mock.js产生的是随机的数据，根据我们想要的啥样产生相同类型的json数据，至于怎么产生，这个要我们自己来写，mock有自己的一套语法，可参考官网，比较简单。

二、如何使用Mock.js

1.引入库

首先我们使用的编译器是vscode，然后在终端输入：

代码语言：javascript复制

npm install mockjs

静静地等待安装成功。

2.写数据

创建一个data2.js文件

代码语言：javascript复制

import Mock from 'mockjs'

export default Mock.mock('/postdata1','post',{
    success: true,
    message: '@cparagraph',
    // 属性 list 的值是一个数组，其中含有 1 到 5 个元素
    'list|1-5': [{
        // 属性 sid 是一个自增数，起始值为 1，每次增 1
        'sid| 1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': '',
    }],
    //产生一个数组对象，出现一次
    'user|1':[{
        'CustomerID|1000-9000':1000,
        'customerName':'@ctitle'
    }]
})

3.发送请求

创建一个mock.js文件

代码语言：javascript复制

import React from 'react';
import axios from 'axios';

//请求mock假数据,demo
class Mock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            gData: null,
            pData: null,
            agData: null
        };
    }

//axios请求
getDate2 = () => {
    axios.post('/postdata1', {
        params: {
            name: 'jack'
        }
    })
        .then((res) => {
            console.log(res.data)
            this.setState({
                pData: res.data.message
            })
        })
        .catch((err) => {
            console.log(err)
        })
}

render() {
        return (
            <React.Fragment>
                <h3>数据展示</h3>
                <p>post: {this.state.pData == null ? '无' : this.state.pData} </p>
                <button onClick={this.getDate2} >点击获取(Post)Mock数据</button>
            </React.Fragment>
        );
    }

总结

待更新。

javascript 网站

0 人点赞