网站各个功能模块,开鲁吧,柚段子wordpress主题模板,广告设计有创意的名字官网网址#xff1a;Mock.js (mockjs.com) 当前端工程师需要独立于后端并行开发时#xff0c;后端接口还没有完成#xff0c;那么前端怎么获取数据#xff1f; 这时可以考虑前端搭建web server自己模拟假数据#xff0c;这里我们选第三方库mockjs用来生成随机数据#xf…官网网址Mock.js (mockjs.com) 当前端工程师需要独立于后端并行开发时后端接口还没有完成那么前端怎么获取数据 这时可以考虑前端搭建web server自己模拟假数据这里我们选第三方库mockjs用来生成随机数据拦截Ajax请求。 下面是mock的原理图 实战案例
先下载mockjs
npm install mockjs
再在src文件夹下面创建一个api文件夹并在main.js引入 Mock.mock({data|6: [ //生成6条数据 数组{shopId|1: 1,//生成商品id自增1shopMsg: ctitle(10), //生成商品信息长度为10个汉字shopName: cname,//生成商品名 都是中国人的名字shopTel: /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号shopAddress: county(true), //随机生成地址shopStar|1-5: ★, //随机生成1-5个星星salesVolume|30-1000: 30, //随机生成商品价格 在30-1000之间shopLogo: Image(100x40,#c33, #ffffff,小北鼻), //生成随机图片大小/背景色/字体颜色/文字信息food|2: [ //每个商品中再随机生成2个food{foodName: cname, //food的名字foodPic: Image(100x40,#c33, #ffffff,小可爱),//生成随机图片大小/背景色/字体颜色/文字信息foodPrice|1-100: 20,//生成1-100的随机数aname|2: [{aname: cname,aprice|30-60: 20}]}]}]})
下载axios并发请求
npm install axios
