Mock.js在Vue项目中的使用小结

npm install mockjs

var Mock = require('mockjs')

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

'name|rule': value

// ！！！导入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)

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

// ！！！导入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
})

// ！！！导入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)

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

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

<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 = true

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