mockjs,mockjs 在react中的使用 模拟数据
mockjs 在react中的使用 1、按照依赖,axios(请求数据)和mockjs(数据) 2、创建一个文件夹mock里面有一个文件index.js,在这里编写需要获得的那些数据类型,具体写法还要依照mockjs 提供的示例写自己需要的数据
3、把mock文件夹中的index文件引入到src中的入框文件vue式app.js react一般是index
import "./mock/index";
4、在需要引入的组件中,引入请求数据的axios,填写请求的数据 import axios from "axios";
1、按照依赖,axios(请求数据)和mockjs(数据)
yarn add mockjs yarn add axios
或者
cnpm install mockjs
cnpm install axios
2、创建一个文件夹mock里面有一个文件index.js,在这里编写需要获得的那些数据类型,具体写法还要依照mockjs 提供的示例写自己需要的数据
import Mock from 'mockjs' import url from 'url' /* mock.mock() 参数1:请求地址 选填 url 参数2: 请求类型 选填 type 参数3:数据模板 | 函数 */ var data = Mock.mock({ "data|100":[ //意思是data数组中有100条数据 { //这个对象是用来写数据模板的 "id|+1":0, //初始值是0每次id都+1 "goodsName":"@ctitle(3, 5)", //看官网,这个名字是3-5之间的 "goodsPrice|+1":100, //这个类似上面的id一个,只是初始值是从100开始的 "address":"@county(true)", //这个是地址,@county(true) 对象的属性值都是mock.mock()提供的方法,直接拿过来用就可以了 "tel":/^1(3|5|7|8|9)\d{9}$/, //正则写的电话后面1开头,正则不懂自己去学!!!!!!!!!!!很重要 "goodsImg":"@image('200x100', '#894FC4', '#FFF', 'alley')", // 图片 "date":'@date("yyyy-MM-dd M:dd:d")', //时间 "email":"@email()", //邮箱 "name":"@ctitle(10, 30)", //10-30 "text":"@cparagraph(1, 3)", //备注用 "img":"@dataImage('200x100', 'Hello')", //图片200*100 "datetime":'@datetime("yyyy-MM-dd A HH:mm:ss")', //"1974-01-08 PM 23:54:57" "string":'@string("lower", 5)', //"string5" "array|1-10": [ { "name|+1": [ "Hello", "Mock.js", "!" ] } ],//数组中含有数组的 'dds':'caiyufu' } ], code:200, message:'请求数据成功' }) console.log(data,'ddw');//打印这Mock.mock() 赋值的内容,直接在终端运行就 可以了 // .........这个是通过get 拦截的AJAX Mock.mock(/\goods\/goodsList/,"get",function(options){ let {limit,page} = url.parse(options.url,true).query;// 解构赋值,结合上面看就懂了 // return data.data.slice(0,4);//获取0-4条的数据, return data.data.slice((page-1)*limit,(limit*page)-1) //data.data是上面的数据,这里获取的是 }) export default Mock.mock('/postdata1','post',{ success: true, message: '@cparagraph', // 属性 list 的值是一个数组,其中含有 1 到 5 个元素 'list|1-5': [{ // 属性 sid 是一个自增数,起始值为 1,每次增 1 'sid|+1': 1, // 属性 userId 是一个5位的随机码 'userId|5': '', }] })
3、把mock文件夹中的index文件引入到src中的入框文件vue式app.js react一般是index
import React from 'react'; import { render } from 'react-dom'; import { ConfigProvider } from 'antd'; import zh_CN from 'antd/lib/locale-provider/zh_CN'; import 'moment/locale/zh-cn'; import { Router, Route, Switch, Redirect } from "react-router-dom"; import { history } from '@/utils'; import Loader from './component/Loader'; import '@/resource/css/global.css'; import "./mock/index"; render( <ConfigProvider locale={zh_CN}> <Router history={history}> <Switch> <Route path="/" exact={true} render={() => <Redirect to="/login"/>} /> <Route path="/login" component={Loader(() => import('./page/login/Index'))} /> <Route path="/register" component={Loader(() => import('./page/register/Index'))} /> <Route path="/apps" component={Loader(() => import('./page/application/Index'))} /> <Route render={() => <div>404</div>}/> </Switch> </Router> </ConfigProvider> , document.getElementById('root'));
4、在需要引入的组件中,引入请求数据的axios,填写请求的数据
import axios from "axios"; //直接引用就行 componentDidMount() { axios.get("/goods/goodsList", { //这个是通过get发送的 params: { limit: 5, //一页有5条数据 page: 1 //第几页 } }).then((data) => { console.log(data); }); axios.post('/postdata1', { params: { name: 'jack' } }) .then((res)=>{ console.log(res.data) }) .catch((err)=>{ console.log(err) }) }
1、路在何方?
路在脚下
2、何去何从?
每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。
如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。