vue json解析_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器

在以前的文档中，我们构建了vue项目的整体架构，详见vue入门：vue项目架构设计起步，现在我们主要对其中的mock server 进行完善。

一、概述

前后端分离的项目优点之一就是可以前后端并行开发，互不影响。那么在后端接口没有完成之前，我们怎么进行前端项目的测试呢，这就需要我们自己构建一个前端测试服务，自己模拟假数据，以便于我们的前端开发工作。

这里我主要是应用mockjs做的mock server，并在vue2.0项目中进行使用。

mockjs可用来生成随机数据，并拦截 Ajax 请求，返回模拟的响应数据。

mockjs数据类型丰富，支持多种数据类型，如文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

mockjs增加了前端单元测试的真实性，用法简单。

mockjs的功能强大，语法也很多，具体可以查看mockjs官方文档

二、使用

1、在vue项目中安装依赖

npm install mockjs --save-dev

2、建立项目文件结构

根目录下建立mock文件夹，然后分别构建util.js 、index.js 、json文件(以index.json为例)

3、util.js文件，主要是用来进行json数据读取方法的封装。内容如下：

// 引入外部资源

const fs = require('fs')

const path = require('path')

module.exports = {

// 用于被index.js进行调用

getJsonFile (filePath) {

// 读取指定的json文件

const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')

// 解析并返回

console.log(json)

return JSON.parse(json)

}

}

4、index.js文件，主要是用来定义各个接口方法。内容如下：

const Mock = require('mockjs')

const util = require('./util')

module.exports = function(app) {

// 监听请求

app.get('/api/index', (rep, res) => {

// 响应时，返回 mock data的json数据

const articleList = util.getJsonFile('./index.json')

// 将json传入 Mock.mock 方法中，生成的数据返回给浏览器

res.json(Mock.mock(articleList))

})

}

5、index.json文件，主要是用来构建自己的模拟数据。如：

{

"ret":true,

"data|1-10":[{

"userid": "@id()