数据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.color(), 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,12)", des: "@csentence(10, 20)", time: "@integer(1553425967486,1553475967486)", detail:{ auth:"@cname()", content:"@cparagraph(10,40)", auth_icon:mr.image('50x50', mr.color(), 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, 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.color(), mr.cword(1,2)),//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,5), "nikename": mr.cname(), "icon": mr.image('20x20',mr.color(),mr.cword(1)), "time": mr.integer(13,13) } }) : res.jsonp({ "error": 1, "msg": "登录失败", }) }); server.use(mock+'/reg', (req, res) => { let username=req.query.username; (username !== 'aa') ? res.jsonp({ "error": 0, "msg": "注册成功", "page_data": { "follow": mr.integer(0,0), "fans": mr.integer(0,0), "nikename": mr.cname(), "icon": mr.image('20x20',mr.color(),mr.cword(1)), "time": mr.integer(13,13) } }) : res.jsonp({ "error": 1, "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`, { method:'POST', //默认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') );