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

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

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

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

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

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

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

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

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

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
{
    ...
    "scripts": {
        "start": "node ./bin/www",
        "build": "webpack --progress --watch --color",
        "mock": "node ./mock/mode2/mockServer"
      },
    ...
}