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为例)


mock结构


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)

    }

}


util.js

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))

    })

}


index.js

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

{

    "ret":true,

    "data|1-10":[{

        "userid": "@id()",

        "username": "@cname()",

        "date": "@date()",

        "avatar": "@image('200x200','red','#fff','avatar')",

        "description": "@paragraph()",

        "ip": "@ip()",

        "email": "@email()"

    }]

}


index.json

6、 修改 webpack 配置。

在路径build/webpack.dev.conf.js文件中的devServer属性中新添加一个before钩子函数,用来监听来自web的http请求。


webpack配置

7、完成以上步骤以后,启动应用npm run dev,地址中输入相应请求地址,即可以请求成功啦。


启动



地址中访问接口

通过地址栏get访问接口可以看到,浏览器返回了一组json数据,mock按照我们之前定义的json格式随机生成了两组数据。

针对post方法,类似,直接在mock的index.js文件中添加方法即可。如:



三、最后

本文只是进行了mockjs的简单功能做了demo。mock的用法很多,具体还需要详细在官方文件详细的学习。

一定要坚持将官方文档进行阅读理解,这样才能更好的掌握mockjs,才能灵活的进行运用!

推荐阅读更多精彩内容