在我们实际开发中,前端大部分时候都是需要等待后端的数据接口,所以会自己mock 数据也是非常必要的。
所谓的mock数据,就是在本地建立一个自己数据库,然后访问这些模拟数据,使得开发过程中可以看到与调用真是的数据一样的效果。使用mock,就可以提高整个项目的开发效率(不需要停下项目的开发等待后端的数据接口)。当开发完成后我们也只需要将模拟的地址localhost:8888,改成真实的地址就可以了。
mock数据需要的json-server
使用mock数据需要开启一个服务来作为数据服务器,我们这儿使用的是json-server。
1 2 3 |
|
新建mock数据
在项目的根目录新建一个mock目录,用来存放我们需要使用的数据。我的项目中主要使用了三个数据:goods.js、rating.js、seller.js,还需要一个mock.js作为数据的出口文件(这个文件自定义,名字可以随便)。
在数据文件goods.js、rating.js、seller.js里面添加数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
出口文件mock.js的代码:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
webpack.config.js的配置:(这儿只是mock数据的配置,完整项目还是需要配完整的,要看完整的可以看前面写文章)
1 2 3 4 5 6 7 8 9 10 11 |
|
rest:自定义的,只是用来访问数据的参数,由于mvvm框架是遵循RESTFUL模式的,所以这儿用的rest。
访问地址时url: /rest/list 就相当于 localhost:8888/list
axios.get('/res/list') = axios.get('locahost:8888/list')
开启mock数据服务
开发服务后,就可以在浏览器里面访问数据了
1 2 3 4 |
|