本篇内容主要讲解“Mock.js在Vue项目中如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Mock.js在Vue项目中如何使用”吧!
安装：
npm install mockjs
导入：
var Mock = require('mockjs')导入：
var data = Mock.mock({....})数据模板中的每个属性由 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
// ！！！导入mockjs
const 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 }
// 随机生成一个id
var data4 = Mock.mock('@id')
//450000198502099849
//640000201404227659
// 随机生成一个中文名称
var data5 = Mock.mock('@cname()')
//唐刚
//姜霞
//范磊
console.log(data)占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中
@占位符 @占位符(参数 [, 参数])
@id() : 得到随机的id
@cname(): 随机生成中文名字
@date(‘yyyy-MM-dd’): 随机生成日期
@paragraph(): 描述
@email(): 邮箱地址
demo
// ！！！导入mockjs
const Mock = require('mockjs')
// 随机生成一个id
var data4 = Mock.mock('@id')
//450000198502099849
//640000201404227659
// 随机生成一个中文名称
var data5 = Mock.mock('@cname()')
//唐刚
//姜霞
//范磊
console.log(data)Mock.mock({
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
description: "@paragraph()",//描述
email: "@email()", //email
'age|18-38': 0
})我们新建一个 userInfo.js
// ！！！导入mockjs
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
})
/**
{
id: '140000198202057935',
username: '蔡秀英',
date: '1989-05-22',
description: 'Dyskicwleb weqosmtu pkqjpcl jtdlcmu rmrurqzw dqsqu lhfbkbg zlcwcczyl pig nivxsa fknxxfv wqqdr acyl. Mpdqrkal fkysogt chie bqmwqbx cbncedxa lzwtv kpecxzs kscg jkutrm rjzbsp loixqslowr twdxdagm lici. Icsmti cmfmby amr enswma bwre nqmywt ikr nsguv siwsbd bsejuotzf xgorcicfjq kwksvnr gfc ttgutrb xmhiwtyo. Kvrhy vhejf iix cgpjhk adehu twa mucee muign bxiaxmxamt ucpuvvg tclw crr uyafxorjs qdyu uunk vjic evmbimfsxz. Wnrxxnkxwn vvwl ahatqd kqoju qdgixcl lmywjtbc ghvexo wjdecdpelz remhft ykjxftxshc jvtjvv grcgxl jnjzfbnq igzpxmy fqpmn.',
email: 'q.njvudb@hqijwlrsev.om',
age: 20
}
*/
console.log(data)步骤：
定义接口路由，在接口中并返回mock模拟的数据
在vue.config.js中配置devServer，在before属性中引入接口路由函数
使用axios调用该接口，获取数据
这里就相当于你在写服务器端的代码
我们在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
module.exports = {
devServer: {
// devServer在发送请求时，会先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等
before: require('./mock/index.js')
}
}这里我们直接在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数据。
新建.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项目中如何使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
