在react中使用mock模拟后端接口

第一步：引入mockjs

运行命令安装

cnpm i mockjs --save

第二步：建立mock文件

1.在src下新建mock文件夹，并在文件下新建js文件，在这个文件里进行接口模拟

2.在mockData.js中引入mockjs，并写模拟的返回数据，第一个参数是接口，第二个是请求类型，第三个是一个函数，接收请求参数并处理之后返回数据。

mockData.js

import Mock from 'mockjs';

let data_success =
    {
        status:'ok',//表示账号密码正确，登录成功
    };

let data_error =
    {
        status:'error',//表示账号密码错误，登录失败
    };

export default Mock.mock(
    '/api/login/account','post',
        (req)=>{
            console.log(req)
            let req_data=JSON.parse(req.body)
            if(req_data.username=="admin" && req_data.password=='123456'){
                return data_success;
            }
            return data_error;
        }
)

第三步：在index.js中引入mock数据

在index.js中引入就不需要每个要用mock数据的页面都去引入了，在index.js中引入一次就好

import './mock/mockData';

第四步，引入ajax或者axios进行接口请求

安装axios

cnpm i axios --save

安装jquery

cnpm i jquery --save

在页面中引入axios

import axios from 'axios';

在页面中引入ajax

import $ from 'jquery';

第五步：直接请求数据并进行数据处理

const handleOnClick = () =>{
        axios({
            url:'/api/login/account',
            data:{
                username:'admin',
                password:'123456',
            },
            method:'post'
        }).then((res)=>{
            console.log(res)
            if(res.data.status==='ok'){
                props.history.push('/index')
            }else if(res.data.status==='error'){
                alert("用户名密码错误")
            }
        })
    }

遇到的一个问题是通过data传过去的参数，之后在body里打印出来发现属性名加了双引号，从admin变成了"admin"，这个原理还没有搞清楚，但是暂时通过JSON.parse（）解决了，JSON.parse（）是把字符串转换成对象