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

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