react-mock

数据mock
    1. 前期定义数据结构（后期不能改)
    2. 前期确定传参方式 resufApi (后期不能改)


    简洁:  会用，会改

        1. mock目录拷贝到项目下
        2. 修改package.json
            + scripts 的 key
            "mock": "nodemon ./mock/server.js"
        3. yarn add json-server --save   安装依赖
        4. yarn add mockjs --save        安装依赖
        4.5 添加代理项
              app.use(
                proxy("/mock",{
                  target: ‘http://localhost:3333‘,changeOrigin: true
                })
              );

        5. yarn mock           启动mock服务器
        6. yarn start          启动react开发服务器

            组件内部发送请求:  /mock/接口名


        配置自己的数据接口:

            ./mock/db.js

            ‘banner|2‘: [
              {
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                ‘id|+1‘: 1,title: "@ctitle(4,8)",//标题型中文4到8个字
                sub_title: "@ctitle(6,12)",banner: mr.image(‘750x501‘,mr.color(),mr.cword(4,10)),//banner不变
                time: "@integer(1553425967486,1553475967486)",detail:{
                  icon:mr.image(‘20x20‘,mr.cword(1,2)),//20X20尺寸
                  auth:"@cname()",//百家姓
                  content:"@cparagraph(10,40)"//正文
                }
              }
            ]

mock文件夹配置

npm i mockjs --save
npm json-erver --save
最后跑起来是npm run server
 
在pack.json 内更改

在mock内的db文件内

// 用mockjs模拟生成数据
var Mock = require('mockjs');

let mr = Mock.Random;//提取mock的随机对象

//随机id和图片
let mapData = (n) => {
  var data = [];

  for (var i = 1; i <= n; i++) {

    data.push({
      id: i,title: "@ctitle(8,des: "@csentence(10,20)",time: "@integer(1553425967486,detail:{
        auth:"@cname()",content:"@cparagraph(10,40)",auth_icon:mr.image('50x50',mr.cword(1))
      }
    })
  }
  return data
};

//json-server 要对象||函数(返回mock后的数据)
module.exports = {
  ...Mock.mock({
    'home': mapData(32),//解决 auth_icon 不随机
    'follow': mapData(21),'column': mapData(11),'banner|2': [
      {
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,//标题型中文4到8个字
        sub_title: "@ctitle(6,banner: mr.image('750x501',//banner不变
        time: "@integer(1553425967486,detail:{
          icon:mr.image('20x20',//20X20尺寸
          auth:"@cname()",//百家姓
          content:"@cparagraph(10,40)"//正文
        }
      }
    ]
  })
};

在server.js文件内

const jsonServer = require('json-server');//在node里面使用json-server包
const db = require('./db.js');//引入mockjs配置模块

var Mock = require('mockjs');

let mr = Mock.Random;//提取mock的随机对象

const server = jsonServer.create();//创建jsonserver 服务对象
const router = jsonServer.router(db);//创建路由对象
const middlewares = jsonServer.defaults();

let mock='/mock';//创建根api名 这里的 /mock 如同 后端真实/api

//路由自定义
const rewriter = jsonServer.rewriter({
  [mock+"/*"]: "/$1","/product?dataName=:dataName": "/:dataName","/banner?dataName=:dataName": "/:dataName","/detail?dataName=:dataName&id=:id": "/:dataName/:id",// "/product/del?dataName=:dataName&id=:id": "/:dataName/:id",// "/product/add?dataName=:dataName": "/:dataName",// "/product/check?dataName=:dataName&id=:id": "/:dataName/:id"
});

server.use(middlewares);

server.use((request,res,next) => {//可选 统一修改请求方式
  // console.log(1)
  // request.method = 'GET';
  next();
});

server.use(jsonServer.bodyParser);//抓取body数据使用json-server中间件

//模拟校验
server.use(mock+'/login',(req,res) => {
  console.log(req.query,req.body);//抓取提交过来的query和body
  let username=req.query.username;
  let password=req.query.password;
  (username === 'aa' && password === 'aa123')?
    res.jsonp({
      "error": 0,"msg": "登录成功","page_data": {
        "follow": mr.integer(1,5),"fans": mr.integer(1,"nikename": mr.cname(),"icon": mr.image('20x20',mr.cword(1)),"time": mr.integer(13,13)
      }
    }) :
    res.jsonp({
      "error": 1,"msg": "登录失败",})

});
server.use(mock+'/reg',res) => {
  let username=req.query.username;
  (username !== 'aa') ?
    res.jsonp({
      "error": 0,"msg": "注册成功","page_data": {
        "follow": mr.integer(0,0),"fans": mr.integer(0,"msg": "注册失败",})

});

server.use(rewriter);//路由重写
server.use(router);//路由响应

//自定义返回内容
router.render = (req,res) => {
  let len = Object.keys(res.locals.data).length; //判断数据是不是空数组和空对象
  // console.log(len);

  setTimeout(()=>{
    res.jsonp({
      error: len !== 0 ? 0 : 1,msg: len !== 0 ? '成功' : '失败',page_data: res.locals.data
    })
  },1000)

  // res.jsonp(res.locals.data)

};


//开启jsonserver服务
server.listen(3333,() => {
  console.log('mock server is running')
});

最后再把react跑起来 npm start

import React from 'react'
import ReactDom from 'react-dom'

class App extends React.Component{

  state={
    msg:'-',};

  render(){

    return (
      <div className="app">
        <h3>mock</h3>
        <input type="button" value="读接口_地址栏传参" onClick={this.getMock}/>
        <input type="button" value="读接口_非地址栏传参" onClick={this.postMock}/>
        <input type="file" ref="f1" />
        <input type="button" value="读接口_上传文件" onClick={this.postMockFile}/>
      </div>
    )

  }


  getMock = () => {
    fetch(
      `/mock/home?_page=2&_limit=2`
    ).then(
      res => res.json()
    ).then(
      data => console.log(data)
    )
  };
  postMock = () => {

    let params = new URLSearchParams();
    params.append("username","alex");
    params.append("password","alex123");


    let headers = new Headers();
    headers.append("Content-type","application/x-www-form-urlencoded");


    fetch(
      `/mock/login`,{
        method:'POST',//默认get
        // headers:{"Content-type":"application/x-www-form-urlencoded"},headers:headers,// body:params//{username:'alex',password:'alex123'}//URLSearchPrams
        body:"username=alex&password=alex123"
      }
    ).then(
      res => res.json()
    ).then(
      data => console.log(data)
    )

  };

  postMockFile = () => {
    let formData = new FormData();

    formData.append("username","heheda");
    formData.append("password","heheda123");
    formData.append("nikename","2019-7-10");

    // HTML 文件类型input，由用户选择
    formData.append("icon",this.refs.f1.files[0]);

    fetch(
      `/mock/reg`,//默认get
        // body:params//{username:'alex',password:'alex123'}//URLSearchPrams
        body:formData
      }
    ).then(
      res => res.json()
    ).then(
      data => console.log(data)
    )

  }

}

ReactDom.render(
  <App/>,document.querySelector('#app')
);