react mock

🧙 Questions

实现前端mock数据，在不需要后端的前提下开发

技术选型: Npm+Express+MockJs+Nodemon

Express: 支持多种协议请求(json-server只支持get，所以不选)
MockJs: 支持随机生成数据
Nodemon: 实时监听数据变化
Npm: 依赖管理 (Yarn2安装Express，运行失败，所以不选)

☄️ Ideas

Note:
为了不污染原有项目
建议在项目的根目录下创建mock文件夹
记得修改.gitignore文件

mkdir mock
cd mock
npm init

# vim .gitignore
mock/node_modules

安装express

npm install express

创建index.js

const express = require('express')
const app = express()
const port = 3000 // 设置启动端口号

// 解决返回code 和 跨域问题
app.all('*', (req, res, next) => {
  res.header("Content-Type", "application/json;charset=utf-8");
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "POST,GET");
  res.header("Access-Control-Allow-Headers", "Accept,Accept-Encoding,Accept-Language,Cookie,Host,Proxy-Connection,Referer,User-Agent,content-type,authorization");
  res.status(200)
  next();
});

// 支持路由，将mock分文件夹管理
app.use('/leo/user', require('./api/user'));

// 访问不到的路径返回4040
app.use(function (req, res) {
  res.status(404);
  res.send("404");
});

// 开启
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

创建路由下的api

vim api/user.js

const express = require("express");
const router = express.Router();
const Mock = require('mockjs');

router.get('/getUser', (req, res) => {

  const data = {
    code: "200",
    msg: "查询用户信息成功",
    data:{
      avatarUrl: "https://avatars.githubusercontent.com/u/34756621?v=4",
      nickName: "leo_946809185155289088",
      userId: Mock.mock("@cname")
    }
  }
  res.end(JSON.stringify(data));
});

module.exports = router;

安装mockjs

npm install mockjs

使用mock

// 使用 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))

安装nodemon

npm install -g nodemon

配置nodemon

vim nodemon.json

{
  "verbose": true,
  "ignore": [],
  "script": "index.js",
  "watch": [
    "api/",
    "index.js"
  ],
  "execMap": {
    "rb": "ruby",
    "pde": "processing --sketch={{pwd}} --run"
  },
  "ext": "js json"
}

修改package.json

vim package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mock": "nodemon index.js"
  },
}

启动mock

cd mock && npm run mock

访问地址

刷新随机生成返回值

• http://localhost:3000/leo/user/getUser

🔗 Links

• react docs
• express website
• mockjs website
• nodemon website