• 什么是mockAPI? 在项目中我们经常会一些数据来模拟需求,这些数据通常被存储在state中,但是随着数据量的增多,我们需要...mockAPI文档中已经详细介绍了其使用方法,在这里我写一下我的使用步骤: 一、安装axios ...

    mockAPI

    在项目中我们经常会需要一些数据来模拟需求,这些数据通常被存储在state中,但是随着数据量的增多,我们需要数据库来存储这些数据。对于不会连接数据库(例如我这样的萌新),以及觉得连接数据库比较麻烦的人,可以使用工具来模拟数据来实现需求。
    下面我会主要介绍mockAPI工具来模拟数据。

    mockAPI文档中已经详细介绍了其使用方法,在这里我写一下我的使用步骤:

    一、安装axios

    npm install axios
    

    axios可以请求和响应数据,请求有GET请求和POST请求和多并发请求。axios还有拦截功能,在请求或响应被then或catch拦截前处理他们。
    想要了解更多可以看axios中文文档

    二、打开项目

    import React,{Component} from 'react';
    import axios from 'axios';
    import { Layout, Table, Breadcrumb, Button } from 'antd';
    class BusTimeDay extends Component {
        constructor(props) {
            super(props);
            this.state = {
            columns: [{
                    title: '名称',
                    dataIndex: 'name',
                    key: 'name',
                    render: text => <a>{text}</a>
                },{
                    title: '编号',
                    dataIndex: 'num',
                    key: 'num'
                },{
                    title: '珠江时间',
                    dataIndex: 'zjTime',
                    key: 'zjTime'
                },{
                    title: '酒店时间',
                    dataIndex: 'jdTime',
                    key: 'jdTime'
                }]
            }
        }
    
        render() {
            const {
                dataSource,
                columns
            } = this.state;
            return(
                <div className='bus-time-day'>
                    <Layout>
                        <Breadcrumb>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>BusTime</Breadcrumb.Item>
                            <Breadcrumb.Item>Day</Breadcrumb.Item>
                        </Breadcrumb>
                        <Table 
    	                    dataSource={dataSource} 
    	                    columns={columns}
                        ></Table>
                    </Layout>
                </div>
            )
        }
    }
    export default BusTimeDay;
    

    我写了一个简单的班车时间组件,包括班车的名称、编号、班车在珠江的出发时间以及班车到达酒店的时间。此时还没有传入数据。
    无数据项目截图
    三、打开mockAPI模拟数据
    1.在New project中创建项目,Project name是大的项目名(这里我设了我的名字拼音),API prefix中可以设置API前缀。
    项目
    2.New resourse中新建资源
    资源
    项目名称我用的dataSource,我项目里引用的就是这个数据,这样在使用的时候更方便。再说一下数据的创建,左边是我项目中Table里的需要的数据,右边是这些数据对应的数据类型。
    dataSource
    创建后我们可以看到项目名称dataSource。
    数据Data,可以拉动改变模拟数据的组数,0-50。
    详情Edit,可以修改项目名称和数据及数据类型。
    Delete删除。
    3.点击项目名称,跳转到详情页api地址
    api
    4.复制地址,并在项目中添加如下代码:

        componentDidMount() {
            const _this = this;
            axios.get('http://5d674a716847d40014f65eda.mockapi.io/api/dataSourceDay')
            .then(function(response) {
                _this.setState({
                    dataSource: response.data,
                    isLoaded: true
                });
            });
            .catch(function(error) {
                _this.setState({
                    isLoaded: false,
                    error: error
                });
            });
        }
    

    我使用的是get请求,then是请求成功,response接收数据,response.data就获取了到我们获取的几组dataSource数据。catch捕获异常。

    四、运行结果:
    运行结果

    展开全文
  • 提供了以下mock接口的demo,更多源码请下载附件信息 const compuser_data = '/api/compuser/data'; const compuser_findById = '/api/compuser/findById'; const compuser_save = '/api/compuser/save'; const ...
  • 首先使用npm安装mockjs, npm install mockjs 然后在api文件夹中创建index.ts文件,数据随便填,可以参考mock.js,内容如下: 其中index.ts配置 var Mock = require('mockjs'); var data = Mock.mock('/data',{...

    最近在项目中需要数据测试,为了方便,直接引入mockjs。

    首先使用npm安装mockjs,

    npm install mockjs

    然后在api文件夹中创建index.ts文件,数据随便填,可以参考mock.js,内容如下:

    其中index.ts配置

    var Mock = require('mockjs');
    var data = Mock.mock('/data',{
        'list|8': [{
            'name': 'city',
            'number|1-100': 100
        }]
    });

    其中组件中引入index.ts配置:

    import React from 'react';
    import './style.scss';
    import '../../api/index';
    import axios from 'axios';
    
    interface INavBrandState{
        flag:boolean;
        navList: [];
    }
    
    export class NavBrand extends React.Component<INavBrandState>{
        constructor(props){
            super(props);
            this.state= {
                flag: true,
                navList: [],
            }
        }
        componentDidMount(){
            axios.get('/data',{dataType:'json'}).then( (res:any) => {
                console.log(res.data.list)
                this.setState({
                    navList: res.data.list
                })
            })
        }
        public render(){
            return (
                <div>
                    125356373
                </div>
            );
        }
    }
    
    export default NavBrand;

    注:在npm install mockjs 中引入文件出错,引入有问题时,尝试以下安装

    npm install @types/mockjs

     

    展开全文
  • 在开发项目时,前端需要和后端对接数据,但有时后端并没有写好数据,前端还需要继续往下开发,这时候就需要mock数据了。 如何mock数据? 如下代码,在input获得焦点时调用getList()方法。 const mapDispathToProps =...

    前言

    在开发项目时,前端需要和后端对接数据,但有时后端并没有写好数据,前端还需要继续往下开发,这时候就需要mock数据了。

    如何mock数据?

    如下代码,在input获得焦点时调用getList()方法。

    const mapDispathToProps = (dispatch) => {
        return {
            handleInputFocus() {
                dispatch(actionCreators.getList())
            }
        }
    }
    
    

    getList()方法是通过Ajax获取数据,此时后端并没有写好,所以自己mock一个数据。

    export const getList = () => {
        return (dispatch) => {
            axios.get('/api/headerList.json').then((res) => {
                const data = res.data;
                console.log(data)
            }).catch(() => {
                console.log('error')
            })
        }
    }
    

    axios.get('/api/headerList.json')这句代码,计算机会首先去src目录下寻找/api/headerList.json,没有找到然后去public目录下找,此时我们在public目录下建立/api/headerList.json文件,文件如下:

    {
        "success":true,
        "data":["微信","支付宝","蚂蚁金服","被骗","借呗","诈骗","盗窃","pandas","TensorFlow","PyTorch","Caffe","scikit-learn","Python","Keras","pyecharts","ggplot","Matplotlib","Gensim","Bokeh","Theano","Scrapy","SciPy","Plotly","NumPy","XGBoost","是","他","有","光大永明","我","要","人","Android","女","大","不","着","男","它","二","于","中","java","把","上","这","下","的","了","来"]
    }
    

    此时返回的数据就是以上数据,通过console.log(res.data)打印数据如下图:
    在这里插入图片描述

    这样mock数据就成功了。

    展开全文
  • react集成mock

    2020-06-05 14:18:47
    前后端分离已经是软件开发的主流,在开发的过程中,会有很多前端兄弟在想后台大佬接口写好没啊,...我们可以使用Mock来造假数据,这样我们就可以直接脱离后台来写代码了,下面就简单描述一下在react中如何使用mock 1. 安装Mo
    前后端分离已经是软件开发的主流,在开发的过程中,会有很多前端兄弟在想后台大佬接口写好没啊,我要调接口了,这里有时候是会影响到我们的开发效率的,当然有的同志会提出可以自己写本地JSON文件,自己伪造假数据,说实话这个方法确实可以解决问题,但是还是有弊端的,第一数据比较多的时候,一般大家都不乐意去写了,第二后台写好之后,还是要去改代码的,这个就更不舒服了!本文就是解决这个痛点的!我们可以使用Mock来造假数据,这样我们就可以直接脱离后台来写代码了,下面就简单描述一下在react中如何使用mock
    1. 安装Mock和axios

    这一步之间默认已经创建好了react项目

    npm install mockjs
    npm install axios
    
    2. 封装axios
    import axios from 'axios'
    class Http {
        static get(api, param) {
            return new Promise((res, rej) => {
                axios.get(api, param).then(result => {
                    res(result);
                });
            })
        }
        static post(api, params) {
            return new Promise((res, rej) => {
                axios.post(api, params).then(result => {
                    res(result);
                })
            });
        }
        static delete(api, params) {
            return new Promise((res, rej) => {
                axios.delete(api, params).then(result => {
                    res(result);
                });
            })
        }
        static put(api, param) {
            return new Promise((res, rej) => {
                axios.put(api, param).then(
                    (result) => {
                        res(result);
                    }
                )
            })
        }
    }
    export default Http
    
    3. 写一个Mock的接口
    import Mock from 'mockjs'
    export const data = Mock.mock("/mock", {
        "userData|400": [{
            "id|+1": 0,
            "name": "@cname",
            "age|10-20": 25,
            "sex|1": ["男", "女"],
            "job|1": ["java", "javascript", "python", "php"]
        }]
    });
    
    4. 导入index.js
    import "../src/assets/mock/userData
    
    5. 发送一个请求
     Http.get("/mock", { name: "zs" }).then((re) => {
          console.log(re);
        });
    
    6. 完成

    这样就可以直接造出跟后台一样格式的数据,并且通过请求获取它,做到真正的前后端分离,关于mock语法的问题,我目前也是用得着的时候去查一下,具体可以去官网详细查询!

    展开全文
  • 在create-react-app之后会自动生成一个public文件夹,这个文件夹地址是可以直接使用的 将mock文件夹创建在public文件夹下 在mock文件夹下创建orders.json文件 orders.json [ { "id": 1, "shop": "创意菜", ...
    1. create-react-app之后会自动生成一个public文件夹,这个文件夹地址是可以直接使用的
    2. mock文件夹创建在public文件夹下
    3. 在mock文件夹下创建orders.json文件
      orders.json
    [
      {
        "id": 1,
        "shop": "创意菜",
        "picture": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg",
        "product": "百香果(冷饮)1扎",
        "price": 19.9,
        "ifCommented": true
      },
      {
        "id": 2,
        "shop": "舌尖美味",
        "picture": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3092870924,3996642384&fm=26&gp=0.jpg",
        "product": "烧仙草(热饮)1杯",
        "price": 29.9,
        "ifCommented": false
      },
      {
        "id": 3,
        "shop": "正一品",
        "picture": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1405792724,2993817143&fm=26&gp=0.jpg",
        "product": "红豆奶茶(热饮)1杯",
        "price": 9.9,
        "ifCommented": false
      },
      {
        "id": 4,
        "shop": "冰感触觉",
        "picture": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3203140906,2015178347&fm=26&gp=0.jpg",
        "product": "奶盖(冷饮)1杯",
        "price": 19.9,
        "ifCommented": false
      }
    ]
    

    orderList.js

    import React,{Component} from 'react';
    import OrderItem from '../OrderItem';
    
    class OrderList extends Component{
        constructor(props){
            super(props);
            this.state = {
                data:[]
            };
        }
    
        componentDidMount(){
            fetch('./mock/orders.json').then(res => {
                if(res.ok){
                    res.json().then(data => {
                        this.setState({
                            data
                        })
                    })
                }
            })
        }
        render(){
            return(
                <div>
                    {
                        this.state.data.map(item => {
                            return <OrderItem key={item.id} data={item} />
                        })
                    }
                </div>
            );
        }
    }
    export default OrderList;
    

    orderItem.js

    import React,{Component} from 'react';
    import './index.css'
    class OrderItem extends Component{
        render(){
            const {shop, product, price, picture, ifCommented} = this.props.data;
            return(
                <div className='orderItem'>
                    <div className='orderItem_picContainer'>
                        <img className='orderItem_pic' src={picture} alt=""/>
                    </div>
                    <div className='orderItem_content'>
                        <div className='orderItem_product'>{product}</div>
                        <div className='orderItem_shop'>{shop}</div>
                        <div className='orderItem_detail'>
                            <div className='orderItem_price'>{price}</div>
                            <div>
                                {ifCommented ? (
                                    <button className='orderItem_btn orderItem_btn_grey'>已评价</button>
    
                                ):(
                                    <button className='orderItem_btn orderItem_btn_red'>评价</button>
                                )}
    
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
    export default OrderItem;
    

    app.js

    import React from 'react';
    import logo from '../../logo.svg';
    import './index.css';
    import OrderList from '../OrderList'
    import Header from'../Header'
    
    function App() {
      return (
        <div className="app">
            <Header/>
          <OrderList/>
        </div>
      );
    }
    
    export default App;
    
    

    index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    **import App from './components/App';**
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();
    
    

    header.js

    import React ,{Component} from 'react';
    import './index.css'
    
    class Header extends Component{
        render() {
            return (
                <header className='header'>
                    我的订单
                </header>
            )
        }
    }
    
    export default Header;
    

    app.css

    .App {
      text-align: center;
    }
    
    .App-logo {
      animation: App-logo-spin infinite 20s linear;
      height: 40vmin;
      pointer-events: none;
    }
    
    .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: calc(10px + 2vmin);
      color: white;
    }
    
    .App-link {
      color: #61dafb;
    }
    
    @keyframes App-logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    

    header.css

    .header{
        background-color: #e9203d;
        color:white;
        padding: 15px 10px;
        text-align: center;
        font-size: 16px;
        line-height: 1;
    }
    

    orderItem.css

    .orderItem_picContainer{
        display: inline-block;
        width:100px;
        height:100px;
        border:1px solid #eee;
        float: left;
        margin:6px;
        box-sizing: border-box;
    }
    .orderItem_pic{
        width:100px;
        height:100px;
    }
    .orderItem_content{
        display: inline-block;
        float: left;
        width:62%;
        margin-left: 10px;
    }
    .orderItem_product{
        margin-top: 30px;
        font-size:1.2rem;
        font-weight:700;
    }
    .orderItem_shop{
        margin:5px auto;
        font-size:0.8rem;
        color:grey;
    }
    .orderItem_detail{
        height:30px;
        line-height:30px;
    }
    .orderItem_price{
        font-size:0.8rem;
        color:#777;
        vertical-align: 1px;
        margin-left: 10px;
        display: inline-block;
        float: left;
    }
    .orderItem_price::before{
        content: '\00A5';
        margin-right: 1px;
    }
    .orderItem_btn{
        display:inline-block;
        float:right;
        width:60px;
        height:30px;
        border:0;
        color: white;
        outline: none;
    
    }
    .orderItem_btn_red{
        background:red;
    }
    .orderItem_btn_grey{
        background:grey;
    }
    

    目录结构如图所示:
    在这里插入图片描述
    错了,再来
    目录结构
    实现效果如图所示:
    实现效果

    展开全文
  • // 使用 Mock var Mock = require('mockjs') var data = Mock.mock("/mock",{ //"/mock"是通过ajax获取数据时填写的地址,可以随意写。但要和ajax请求时填写的地址一致。 "userinfo|4":[{ ...
  • 引子 每个改进都是为了解决问题。 现在我在开发中碰到了问题,我先描述下问题: 我们现在做前后端完全分离的应用,前端写前端的,后端写后端的,他们通过API接口连接。 前端同学心理路程:“后端同学接口写的好慢,...
  • react使用Mock.js

    2020-06-12 21:36:15
    react使用Mock.js为啥使用Mock.js话不多说,上操作 为啥使用Mock.js 作为一名前端开发人员,当需要请求数据,没有接口,自己又不想写的时候,使用Mock.js自动生成就OK了。 话不多说,上操作 cnpm i -D mock.js...
  • 本项目是在初学React.js之后实现的简单留言板的新增和展示(Mock.js实现伪数据交互),功能比较简单,200行关键代码且超多注释,不过相对也更适合React初学者查看。 提供了git地址,下载后无需开启服务,浏览器打开/...
  • react练习 Mock数据

    2019-03-30 14:14:28
    在前端项目中。自己模拟接口 测试前后端分离。 第一种方式:使用node的服务器模块 安装 npm install serve -g,一定要安装在全局 方便使用命令 在存放数据的文件夹下打开 命令终端 ...在react中配置服务器...
  • 我们需要使用json-server创建一个json的服务器,相当于后端,当我们前端使用axios请求数据时,返回接口文档中对应的字段 安装模块 npm i axios -S npm i json-server -g 首先在react-app/src下创建mock文件夹 -src ...
  • 如何在react项目中使用axios和mock数据 你好!我们在react项目中需要经常使用axios请求mock模拟数据,本文将简单粗暴介绍如何使用axios请求mock数据。各位看官您往下看。 一、下载 我们需要使用axios和mock模拟数据...
  • 转载 React16 Jest单元测试 之 Mock Functions(Mocking Modules 和 Mock Implementations) 项目初始化【这里使用之前的项目,节省时间】 项目初始化地址 https://github.com/durban89/webp...
  • 1、安装 npm install mockjs -D ...2、配置mock (1)数据文件:data.js import Mock, {Random}from 'mockjs' let data=[] for(let i=0;i<Math.random()*10;i++){ let item= { title:Random.cparagraph...
  • 下面是mock里面定义的menu.js 使用方法
  • 第一步:新建一个json文件 第二步:下载安装Charles 下载地址:https://www.charlesproxy.com/,选择相应的版本... 安装完成后。... Local path指向自己新建的json文件,然后在react里面 axios.get('/api/todolist') ...
  • 使用create-react-app 脚手架创建的项目,并没有集成mock数据的功能,我们在进行前端开发的时候,如果后端服务器暂时没有开发完成,我们就需要使用mock来模拟后端数据,以保证开发的进度. 由于脚手架项目是使用webpack...
  • Reactmock使用

    2020-04-01 16:12:27
    //1.安装mockjs yarn add mocker-api mockjs --dev //2.项目根目录下创建mock/...const Mock = require('mockjs'); const delay = require('mocker-api/utils/delay') const request = { 'GET /api/user': { ...
  • https://www.easy-mock.com模拟假数据,是mock。js的一个平台。 对于我们前后端分离开发非常有用。
1 2 3 4 5 ... 20
收藏数 5,744
精华内容 2,297