目录
gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master
1.对于ListContainer组件与Floor组件数据服务器没有提供数据(接口),怎么办?
4.2准备JSON数据(在mock文件夹中创建相应的JSON文件)
4.4创建mockServe.js 开始mock(虚拟数据),通过mockjs模块实现
4.5mockServe.js文件在入口文件main.js中引入(至少需要执行一次,才能模拟数据)
gitee仓库地址:登录 - Gitee.com
https://gitee.com/CMD-UROOT/sph-project/commits/master
大家根据上传历史进行查找你需要的代码
开发listContainer|Floor组件业务？
接下来需要开发listContainer与Floor组件
场景:开发项目，产品经理画出原型，前端与后端人员需要介入（开发项目），
leader（老大）刚开完会，前端与后端负责哪些模块，后端人员（....开发服务器），
前端人员【项目起步、开发静态页面、查分静态组件】，回首一看后端‘哥哥’，接口没有写好，
像这种情况，前端人员可以mock一些数据【前端程序员自己模拟的一些假的接口】，当工作中项目上线时，需要把mock数据变为后台哥哥给的接口数据替换。
1.对于ListContainer组件与Floor组件数据服务器没有提供数据(接口),怎么办?
解决方法:mock数据
2.mock数据是什么?
mock数据(模拟):如果你想mock数据,需要用到一个插件mock.js
mock的发送的数据,只会在前台,发不到服务端,只会在自己本地项目中自己玩玩
mock的文档:https://github.com/nuysoft/Mock/wiki/Getting-Started
前端常用的库可以搜这个网址https://docschina.org/
3.安装mockjs
npm install mockjs//如果输入这一行没安上,再输入下面那行
npm install --save mockjspackage.json中可以看到mockjs已经安装上了
4.mockjs使用的步骤
4.1在项目当中的src文件夹当中创建一个mock文件夹
4.2准备JSON数据(在mock文件夹中创建相应的JSON文件)
JSON数据一定要格式化一下,别留有空格(有空格跑不起来)
创建两个文件,banner.json和floor.json,然后放入对应的数据
4.3把mock数据需要的图片放置到public文件夹当中
public文件夹在打包的时候,会把相应的资源原封不动打包到dist文件夹中
在public文件下创一个images文件夹,里面放图片
4.4创建mockServe.js 开始mock(虚拟数据),通过mockjs模块实现
mockServe.js中的代码:
//先引入mockjs模块
import Mock from 'mockjs'
//把JSON数据格式引入进来[JSON数据格式我们根本没有对外暴露,但是可以引入]
//webpack默认对外暴露的:图片、JSON数据格式
import banner from './banner.json'
import floor from './floor.json'
//mock数据:第一个参数请求地址 第二个参数:请求数据 Mock.mock Mock是一个对象,mock是一个方法
Mock.mock("/mock/banner",{code:200,data:banner})//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor}) //模拟首页底下楼层的数据4.5mockServe.js文件在入口文件main.js中引入(至少需要执行一次,才能模拟数据)
//引入MockServe.js
import '@/mock/mockServe'