第一步:引入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()是把字符串转换成对象