vue如何mock数据以及如何正确安装JsonView

vue如何mock数据？

我们知道现在大部分业务都是前后端分离的，前端人员在没有真实数据之前就需要自己在本地模拟数据，校验业务流程，整理了下本人从新建vue项目到mock数据成功的整个流程：

1. 新建vue项目
   安装vue-cli：
   windows：npm install -g vue-cli
   mac：sudo npm install -g vue-cl
   初始化项目：vue init webpack demo (这个是项目名)
   初始化这里会自动下载node_modules：npm install
   运行项目：npm run dev；
   其中，初始化项目可以参考以下：
2. 在根目录下定义data.json文件，代码如下：

{
 "seller": {
   "name": "店铺名称1"
 },
 "goods": {
   "name": "商品名称1"
 },
 "ratings": {
   "name": "店铺名称1",
   "goodsname": "商品名称1",
   "text": "不错,非常赞,强烈推荐."
 }
}

3. 编辑项目 build 下的 webpack.dev.conf.js 文件，添加如下代码； 在定义devWebpackConfig前添加以下代码：

// 1-引入express组件，并初始化
const express = require('express')
const app = express()
const apiRoutes = express.Router()
// 添加data.json文件，并初始化对应数据
let appData = require('../data.json')
let seller = appData.seller
let goods = appData.goods
let ratings = appData.ratings
// 使用组件-apiRoutes，routes集合
app.use('api', apiRoutes)

在定义devServer中添加以下方法代码：

   // 2-在定义的express组件初始化之前，先初始化以下几个方法-errno，官方定义的正常返回成功的状态；data，对应的数据赋值
   before(app) {
     app.get('/api/seller', (req, res) => {
       res.json({
         errno: 0,
         data: seller
       })
     }),
     app.get('/api/goods', (req, res) => {
       res.json({
         errno: 0,
         data: goods
       })
     }),
     app.get('/api/ratings', (req, res) => {
       res.json({
         errno: 0,
         data: ratings
       })
     })
   }

3. 使用 npm run dev 指令重启该工程；
4. 谷歌浏览器访问地址： http://localhost:8080/api/goods等校验成功与否，成功如下：
   
   可以看到，这个是不带格式化的，数据如果一多就会显得非常不直观、不明了，所以推荐大家安装格式化转化的谷歌插件JsonView。

如何正确安装JsonView？

笔者在百度查找如何在谷歌浏览器安装Jsonview的时候就遇到一些坑，有一些文章会让你去关注它的公众号，然后下载的也是无效。点击谷歌应用商店的时候又一直加载不出来，不知道如何操作。后来找到几篇可以简便实现的文章，但是关于细节的操作又不够明细。综合整理如下：

1. 首先，git clone下载插件，地址：https://github.com/gildas-lormeau/JSONView-for-Chrome；
2. 解压文件到本地目录，例如我的是：D:\JSONView-for-Chrome-master\JSONView-for-Chrome-master\WebContent；
3. 打开谷歌浏览器 -> 更多工具 -> 扩展程序 -> 开发者模式 -> 加载已解压的扩展程序 -> 找到文件插件的WebContent文件夹（例如笔者的：D:\JSONView-for-Chrome-master\JSONView-for-Chrome-master\WebContent） -> 选择文件夹；
   完成
   
   格式化完效果如下：

小提醒：必须要先引入express组件，再实例化，不然会报错（很低级的错误，一般人应该不会犯）.

// 引入express组件
const express = require('express')
// 实例化
const app = express()

参考文章

链接: Vue笔记——项目中设置mock数据.
链接: jsonview插件安装.
链接: 菜鸟教程-Vue.js 教程.