一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
日常的开发中，前端的页面已经写完后端的接口还没有写好，这种是经常出现的问题，所以Mock数据，是前端开发工程师必不可少技能，这篇文章让你学会在Vue或者React中使用Mock数据
1、下包mockjs和axios
yarn add mockjs -D
yarn add axios
2、新建Mock/index.js,如果模块多需要分模块，最后在index.js中导入即可
//index.js中的代码
import Mock from 'mockjs'
const data=Mock.mock('/mock/userInfo',{
'code':0,
'userInfo|5':[{ //声生成数组里五个对象，对象的字段如下
'id':'@id', //ID为mock里的随机id
'userName':'@cname', //名字为随机中文名
'age|18-45':1, //年龄是18到45之间的随机数
'gender|1':['男','女'], //性别是数组里的随机一项
'addr':'@city(true)', //城市是mock里的随机城市
}],
'message':'获取成功'
})
export default data
使用mock的一些小技巧
//使用:'date':Mock.Random.time( format? )就可以
1. Random.boolean() 随机布尔值
2. Random.natural( min?, max? ) 随机自然数 min-max之间
3. Random.integer( min?, max? ) 随机整数min-max之间
4. Random.float() 随机浮点数
5. Random.character( pool? ) 随机字母 pool对应有（lower[小写]/upper[大写]/number[数字]/symbol[符号]）
6. Random.string( pool?, min?, max? ) 随机字符串
7. Random.range(start?, stop, step?) 随机范围数字组成的数组
8. Random.date( format? ) 随机日期
9. Random.time( format? ) 随机时间
10. Random.datetime( format? ) 随机日期+时间
11. Random.now( unit?, format? ) 当前时间
12. Random.image( size?, background?, foreground?, format?, text? ) 图片占位
13. Random.dataImage( size?, text? ) 生成base64格式图片
14. Random.color() 随机颜色
15. Random.rgb() 随机rgb颜色
16. Random.rgba() rgba颜色值
17. Random.paragraph( min?, max? ) 段落
18. Random.sentence()
19. Random.word( min?, max? )
20. Random.title( min?, max? )
21. Random.cparagraph( min?, max? ) 中文段落
22. Random.csentence( min?, max? ) 中文句子
23. Random.cword( pool?, min?, max? ) 汉字
24. Random.ctitle( min?, max? ） 标题
25. Random.first() 姓
26. Random.last() 名
27. Random.name( middle? ) 姓名
28. Random.cfirst() 中文姓
29. Random.clast() 中文名
30. Random.cname() 中文姓名
31. Random.url() 随机URL
32. Random.domain() 随机域名
33. Random.protocol()
34. Random.email() 邮箱
35. Random.region()
36. Random.province() 省
37. Random.city( prefix? ) 市 （prefix是否带前缀省，值为boolean）
38. Random.county( prefix? ) 区县 (prefix是否带缀省，市)
39. Random.increment( step? ) 递增
3、axios的二次封装
mock要用得到axios发请求，所以我们可以对axios进行二次封装，顺便设置根地址
// 封装axios
import axios from 'axios'
const instance = axios.create({
baseURL: '/mock', //设置跟地址
timeout: 5000 //设置过期时间
})
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
config.headers.Authorization ='q8Jp1HkbtAjAlvO8Qj23jELYnyaWEp5v'
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default instance
4、在组件中导入mock.js和axios就可以使用了
import { useEffect, useState } from 'react'
import './App.css'
import request from './axios'
import './mock'
function App () {
const [user,setUser] = useState([])
useEffect(()=>{
request.get('/userInfo',{dateType:'json'}).then((res)=>{
setUser(res.data.userInfo)
})
},[])
return (
<div className='App'>
<ul>
{user.map(item=>(
<li key={item.id}>
<h3>姓名:{item.userName}===性别:{item.genter}===年龄:{item.age}===籍贯:{item.addr}</h3>
</li>
))}
</ul>
</div>
)
}
export default App
这样我们mock的数据就渲染到页面上了
