【Mock.使用手册】

Mock.使用手册

• ##mock 的使用方式分类：

  ###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}
/>

可以输出的table表格：

如果需要更加规范的话，本地创建mock文件夹，在mock文件夹内部管理好，
类似于：/mock/app.js 文件中，并尝试给他一个URL；

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': ['下载', '试听', '喜欢']
        }]
    })
]

我们在组件中引入app.js 然后用axios 调用 mock 生成的这个URL地址，

/*
* 我这里去掉了多余的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}
        />
    )
}

实际效果图如下：
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=media%2F16257256072533%2F16257266626548.jpg&pos_id=img-n2WA1TLN-1699173130338

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

###2.针对实际项目
那就要本地的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')
})

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

实例化express对象、引入mock模块
(加入请求头,解决跨域)
通过express挂载一个请求(use、get…),并返回mock数据
暴露端口，开启服务！
大家可能注意到了第二点我还没实现.不过我们先不考虑跨域问题, 运行一下看看会出现什么情况。(存在跨域问题是必然的, 因为都不是同一个端口号！)

果然, 跨域问题出来了:

那我们还是乖一点把请求头配置加上去吧(复制即可):

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();
});

跨域问题就顺利解决了！

在默认的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中. 更多的便捷配置和用法还是需要你去学习别的项目是怎么运作的！

参考档案地址 http://mockjs.com/examples.html

完整版配置：

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

let app = express();        //实例化express
// 增加 请求头的配置，解决跨域问题；
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();
});

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')
})

以上的配置是一个基础 mockserver.js 文件配置，需要看各位的业务需求开发；
跟多mock写法可以参考 上面的链接地址。

希望对你有所帮助！如有任何其他问题，请随时提问。