目录

• 引言
• 一、Mock数据模拟的概述
• 1.1 为什么需要Mock数据模拟？
• 1.2 Mock数据模拟的优点和缺点
• 二、安装和配置Mock.js库
• 2.1 使用NPM安装Mock.js库
• 2.2 在Vue项目中配置Mock.js
• 三、编写Mock数据模拟文件
• 3.1 Mock.js的基本语法介绍
• 3.2 Mock.js中常见数据类型的使用方法
• 3.3 如何自定义Mock数据模板和规则
• 四、在Vue组件中使用Mock数据模拟
• 4.1 Vue组件中如何引入Mock.js库
• 五、Mock数据模拟的高级应用
• 5.1 如何为不同的URL请求返回不同的Mock数据
• 5.2 如何结合Axios进行网络请求的Mock数据模拟
• 六、常见问题及解决方案
• 6.1 如何调试Mock数据模拟
• 6.2 如何与后端联调时避免出现冲突
• 6.3 如何处理Mock数据模拟与真实数据的差异

npm install mockjs

import Mock from 'mockjs'
// 设置拦截Ajax请求的响应时间，模拟网络延迟
Mock.setup({
  timeout: '200-600'
})
// Mock数据示例
Mock.mock('/api/getList', {
  'list|10-20': [{
    'id|+1': 1,
    'title': '@ctitle(10, 20)',
    'image': '@image(\'200x100\', \'#50B347\', \'Hello\')',
    'datetime': '@datetime()',
    'author': '@cname()',
    'description': '@ctitle(30, 100)'
  }]
})
export default Mock

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Mock from './mock' // 引入mock数据
createApp(App).use(store).use(router).mount('#app')

const data = Mock.mock({
  'list|10-20': [{
    'id|+1': 1,
    'name': '@cname()',
    'age|18-30': 1,
    'email': /\w{5,10}@(qq|163)\.com/,
    'address': '@city(true)',
    'phone': /^1[3456789]\d{9}$/ 
  }]
})

// 生成指定范围内的整数
Mock.mock('@integer(1, 100)')
// 生成指定长度的字符串
Mock.mock('@string(5, 10)')
// 生成指定模式的正则表达式
Mock.mock(/[a-z][A-Z]\d/)
// 生成指定格式的日期时间
Mock.mock('@date(\'yyyy-MM-dd\')')
// 生成指定域名和协议的URL地址
Mock.mock('@url(\'http\', \'abc.com\')')

const data = Mock.mock({
  'list|10-20': [{
    'id|+1': 1,
    'name': function() {
      return this.id % 2 === 0 ? '@cname()' : '@name()'
    },
    'age': function() {
      return this.id % 2 === 0 ? '@integer(18, 30)' : '@integer(25, 40)'
    }
  }]
})

<template>
	<div>
		<ul>
			<li v-for="itemin list" :key="item.id">
				<h2>
					{{ item.title }}
				</h2>
				<p>
					{{ item.description }}
				</p>
			</li>
		</ul>
	</div>
</template>
<script>
	import Mock from '@/mock'
	export
default {
		name:
		'MockDemo',
		data() {
			return {
				list: []
			}
		},
		mounted() {
			// 使用Mock.js来模拟数据
			Mock.mock('/api/getList', {
				'list|10-20': [{
					'id|+1': 1,
					'title': '@ctitle(10, 20)',
					'description': '@ctitle(30, 100)'
				}]
			})
			// 在生命周期钩子中使用axios或者其他网络请求库发送Ajax请求，获取Mock数据
			this.$http.get('/api/getList').then(res = >{
				this.list = res.data.list
			})
		}
	}
</script>

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <h2>{{ item.title }}</h2>
        <p>{{ item.description }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { reactive, onMounted } from 'vue'
import Mock from '@/mock'
export default {
  name: 'MockDemo',
  setup() {
    const state = reactive({
      list: []
    })
    onMounted(() => {
      // 使用Mock.js来模拟数据
      Mock.mock('/api/getList', {
        'list|10-20': [{
          'id|+1': 1,
          'title': '@ctitle(10, 20)',
          'description': '@ctitle(30, 100)'
        }]
      })
      // 在生命周期钩子中使用axios或者其他网络请求库发送Ajax请求，获取Mock数据
      axios.get('/api/getList').then(res => {
        state.list = res.data.list
      })
    })
    return {
      ...state
    }
  }
}
</script>

Mock.mock(/\/api\/getList\?type=1/, {
  'list|10-20': [{
    'id|+1': 1,
    'title': '@ctitle(10, 20)',
    'description': '@ctitle(30, 100)'
  }]
})
Mock.mock(/\/api\/getList\?type=2/, {
  'list|5-10': [{
    'id|+1': 1,
    'name': '@cname()',
    'age': '@integer(18, 30)'
  }]
})

import axios from 'axios'import MockAdapter from 'mockjs'
const mock = new MockAdapter(axios)
// 模拟GET请求
mock.onGet('/api/getList').reply(200, {
	'list|10-20': [{
		'id|+1': 1,
		'title': '@ctitle(10, 20)',
		'description': '@ctitle(30, 100)'
	}]
})
// 模拟POST请求
mock.onPost('/api/addItem').reply(config = >{
	const {
		title,
		description
	} = JSON.parse(config.data) return [200, {
		code: 0,
		msg: '添加成功',
		data: {
			id: Mock.mock('@id'),
			title,
			description
		}
	}]
})

axios.get('http://localhost:8080/api/getList').then(res => {  console.log(res.data.list) })