Mock.js在Vue项目中如何使用

本篇内容主要讲解“Mock.js在Vue项目中如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Mock.js在Vue项目中如何使用”吧!

Mock.js 初体验

安装：

npm install mockjs

导入：

var Mock = require('mockjs')

导入：

var data = Mock.mock({....})

1.数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名(name)、生成规则(rule)、属性值(value)：

'name|rule': value

属性值是字符串 String

‘name|min-max’: string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

‘name|count’: string
通过重复 string 生成一个字符串，重复次数等于 count。

属性值是数字 Number

‘name|min-max’: string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。‘name|count’: string
通过重复 string 生成一个字符串，重复次数等于 count。‘name|min-max’: number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

demo

我们在根目录下新建一个mock的文件夹，并且在该文件夹下新建一个 test.js 文件，用来存放我们要生成的mock数据

注意，首先需要导入mock

// ！！！导入mockjsconst Mock = require('mockjs')// 调用Mock的方法，生成模拟的数据// 生成一个用户名，*出现1-10次,是随机的var data1 = Mock.mock({ 'username|1-10': '*' })//{ username: '****' }//{ username: '*********' }// 生成一个用户名，*出现5次var data2 = Mock.mock({ 'username|5': '*' })//{ username: '*****' }// 生成一个年龄，年龄18-40岁中间var data3 = Mock.mock({ 'age|18-40': 0 })//{ age: 25 }// { age: 28 }// 随机生成一个idvar data4 = Mock.mock('@id')//450000198502099849//640000201404227659// 随机生成一个中文名称var data5 = Mock.mock('@cname()')//唐刚//姜霞//范磊console.log(data)

2.数据占位符定义规范

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中

@占位符@占位符(参数 [, 参数])

@id() : 得到随机的id

@cname(): 随机生成中文名字

@date(‘yyyy-MM-dd’): 随机生成日期

@paragraph(): 描述

@email(): 邮箱地址

demo

// ！！！导入mockjsconst Mock = require('mockjs')// 随机生成一个idvar data4 = Mock.mock('@id')//450000198502099849//640000201404227659// 随机生成一个中文名称var data5 = Mock.mock('@cname()')//唐刚//姜霞//范磊console.log(data)

3.一个实际开发中会用到的案例：生成个人信息

Mock.mock({id: "@id()",//得到随机的id,对象username: "@cname()",//随机生成中文名字date: "@date()",//随机生成日期description: "@paragraph()",//描述email: "@email()", //email'age|18-38': 0})

我们新建一个 userInfo.js

// ！！！导入mockjsconst Mock = require('mockjs')// 随机生成一个对象var data = Mock.mock({  id: '@id()',  username: '@cname()',  date: '@date(yyyy-MM-dd)',  description: '@paragraph()',  email: '@email()',  'age|18-40': 0})console.log(data)

Mock.js在Vue中的使用

步骤：

• 定义接口路由，在接口中并返回mock模拟的数据

• 在vue.config.js中配置devServer，在before属性中引入接口路由函数

• 使用axios调用该接口，获取数据

1.定义接口路由，在接口中并返回mock模拟的数据

这里就相当于你在写服务器端的代码

我们在mock文件夹下新建一个index.js文件，在这个文件中定义接口

const Mock = require('mockjs')// 随机生成一个对象var data = Mock.mock({  id: '@id()',  username: '@cname()',  date: '@date(yyyy-MM-dd)',  description: '@paragraph()',  email: '@email()',  'age|18-40': 0 })// console.log(data)module.exports = function (app) {  if (process.env.MOCK == 'true') {//判断是否使用mock    // node中的express框架    // 参数1： 接口地址；参数2：服务器处理函数    app.use('/api/userinfo', (req, res) => {      // 将模拟的数据转成json格式返回给浏览器      res.json(data)    })  }}

在上面的代码中，我们定义的接口为：/api/userinfo

2.在vue.config.js中配置devServer，在before属性中引入接口路由函数

module.exports = {  devServer: {    // devServer在发送请求时，会先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等    before: require('./mock/index.js')  }}

3.使用axios调用该接口，获取数据

这里我们直接在APP.vue中使用axios

<template>  <div>Hello</div></template><script>import axios from 'axios'export default {  created() {    axios.get('/api/userinfo').then(result=>{      console.log(result);      console.log(result.data);//其实 result.data 才是我们定义的数据，它会自动在外面包一层，我们可以打印出来进行对比     })  }}</script>

如何控制Mock接口的开关？

我们只是希望在开发环境下使用mock数据。

新建.env.development，定义环境变量

# 控制是否需要使用mock模拟的数据MOCK = true

定义接口路由前，判断当前MOCK环境变量是否为true

module.exports = function (app) {    if (process.env.MOCK == 'true') {        app.use('/api/userinfo', (req, res) => {            res.json(obj)        })    }}

到此，相信大家对“Mock.js在Vue项目中如何使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！