帮我写一个vue前端用户登录、用户管理用mockjs模拟数据的代码

以下是一个简单的示例，展示了如何使用Mock.js模拟数据来实现Vue前端用户登录和用户管理：

// 引入Mock.js
import Mock from 'mockjs'

// 模拟登录接口
Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  if (username === 'admin' && password === '123456') {
    return {
      code: 0,
      message: '登录成功',
      data: {
        token: Mock.Random.guid() // 模拟生成token
      }
    }
  } else {
    return {
      code: 1,
      message: '用户名或密码错误',
      data: null
    }
  }
})

// 模拟用户列表接口
Mock.mock('/api/users', 'get', {
  code: 0,
  message: '',
  'data|10': [{
    'id|+1': 1,
    name: '@cname',
    'age|18-60': 1,
    address: '@city',
    'sex|1': ['男', '女']
  }]
})

在Vue中使用以上代码时，需要在`main.js`中引入Mock.js并开启拦截：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入Mock.js
import './mock'

Vue.config.productionTip = false

// 开启Mock拦截
Mock.setup({
  timeout: '200-600'
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

之后，在Vue组件中就可以通过axios等HTTP库来请求Mock数据，例如：

import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('/api/users')
      .then(res => {
        this.users = res.data.data
      })
  }
}

以上代码中，组件发送GET请求到`/api/users`接口，Mock.js拦截该请求并返回模拟数据，最终组件中的`users`数组将被赋值为Mock数据中的用户列表。类似地，可以通过发送POST请求到`/api/login`接口来模拟用户登录。