Versionmockjs: 1.0.1-beta3
mock 生成随机数组, 数组内数据部分随机
let arr = Mock.mock({ 'array|4-111': [{ 'uid': '@natural(1, 100)', 'username': '@word', 'avatar': Random.image('200x200', '#ecc247', '#fff', 'png', 'A'), 'email': 'admin@sg-ai.com', 'permission': '@natural(1, 5)' }] })
生成数组结果
{ "array": [{ "uid": 60, "username": "ksepels", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 1 }, { "uid": 28, "username": "dqwsni", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 3 }, { "uid": 48, "username": "ongutpmtb", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 4 }, { "uid": 63, "username": "ekpgvg", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 3 }, { "uid": 6, "username": "hprlhn", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 4 }, { "uid": 11, "username": "hdoocljebn", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 1 }, { "uid": 34, "username": "ftk", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 4 }, { "uid": 19, "username": "tkkpi", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 3 }, { "uid": 92, "username": "ricibvek", "avatar": "http://dummyimage.com/200x200/ecc247/fff.png&text=A", "email": "admin@sg-ai.com", "permission": 4 }] }
mock.js
import Mock from 'mockjs' const Random = Mock.Random let arr = Mock.mock({ 'array|4-111': [{ 'uid': '@natural(1, 100)', 'username': '@word', 'avatar': Random.image('200x200', '#ecc247', '#fff', 'png', 'A'), 'email': 'admin@sg-ai.com', 'permission': '@natural(1, 5)' }] }) // get users Mock.mock('/api/v1/admin/users', 'get', (option) => { return { status: true, data: { users: arr.array } } }) // delete users Mock.mock('/api/v1/admin/users', 'delete', (option) => { console.log('delete user ', option) let i = arr.array.filter((item, index) => { if (item.username === option) { return index } }) console.log('arr: ', arr.array.length) arr.array.splice(i, 1) console.log('arr2: ', arr.array.length) return { status: true } })
在 Vue 项目中使用
Install
进入项目目录使用 npm 安装
npm install mockjs -D
安装好以后在 package.json 中可以看到相关依赖
"devDependencies": { ... "mockjs": "^1.0.1-beta3", ...
使用
在 src 文件夹下创建名为 mock.js 文件, 根据接口文档编写数据接口以及配置数据, mock.js 中代码如下
import Mock from 'mockjs' const Random = Mock.Random console.log(Random) // Login Mock.mock('/api/login', 'post', (option) => { let { username, password } = JSON.parse(option.body) console.log(username, password) return (username === 'admin' && password === '123456') })
在 main.js 引入 mock.js
import Vue from 'vue' import App from './App.vue' import './mock.js' new Vue({ render: h => h(App) }).$mount('#app')
在 Vue 组件中, 如 Login.vue 中请求数据
<script> export default { methods: { login () { this.axios.post('/api/login', { username: this.username, password: this.password }).then((res) => { console.log(res.data) if (res.data) { this.$router.push('home') } else { this.text = '登录失败! ' this.snackbar = true } }) } } } </script>
在登录页面上操作, 如果输入用户名: admin 和密码: 123456 登录成功, 输入其他登录失败, 则说明 mock 配置成功.
