好的，我了
解了你的要求。那么，我们可以按照以下步骤来实现这个功能：
1. 使用mock.js来模拟数据，并在Login组件中编写登录逻辑，将用户信息存储在localStorage中。
2. 在Home组件中，使用
vant组件实现页面效果，包括Header头部组件和用户管理组件，并使用守卫功能，确保用户已登录才能进入Home组件。
3. 在用户管理组件中，通过axios请求后端API，获取用户列表数据并渲染到页面上。
4. 在用户列表中，添加跳转链接，跳转到用户详情页面，并在Header头部组件中添加注销功能。
以下是一个简单的代码示例，供你参考：
```
// mock.js
import Mock from 'mockjs'
const users = Mock.mock({
'data|100': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 1,
'gender|1': ['男', '女'],
'phone': /^1[3456789]\d{9}$/,
'address': '@county(true)'
}]
})
Mock.mock('/api/users', 'get', () => {
return {
data: users.data
}
})
// Login组件
<template>
<van-form>
<van-field v-model="username" label="用户名" placeholder="请输入用户名" />
<van-field v-model="password" label="密码" type="password" placeholder="请输入密码" />
<van-button type="primary" @click="handleLogin">登录</van-button>
</van-form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 模拟登录逻辑
const userInfo = {
username: this.username,
password: this.password
}
localStorage.setItem('userInfo', JSON.stringify(userInfo))
this.$router.push('/home')
}
}
}
</script>
// Home组件
<template>
<div>
<Header @logout="handleLogout" />
<Users />
</div>
</template>
<script>
import Header from './Header.
vue'
import Users from './Users.
vue'
export default {
components: {
Header,
Users
},
mounted() {
// 守卫功能，确保用户已登录才能进入Home组件
const userInfo = localStorage.getItem('userInfo')
if (!userInfo) {
this.$router.push('/login')
}
},
methods: {
handleLogout() {
localStorage.removeItem('userInfo')
this.$router.push('/login')
}
}
}
</script>
// Users组件
<template>
<div>
<h
2>用户列表</h
2>
<van-table :columns="columns" :data="users" />
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
users: []
}
},
created() {
// 发送请求获取用户列表数据
axios.get('/api/users').then(res => {
this.users = res.data.data
})
},
computed: {
columns() {
return [
{ title: 'ID', key: 'id' },
{ title: '姓名', key: 'name' },
{ title: '年龄', key: 'age' },
{ title: '性别', key: 'gender' },
{ title: '电话', key: 'phone' },
{ title: '地址', key: 'address' },
{ title: '操作', key: 'action', render: (h, { row }) => {
return h('van-button', {
props: {
type: 'primary',
size: 'small'
},
attrs: {
to: `/user/${row.id}`
}
}, '详情')
}}
]
}
}
}
</script>
// Header组件
<template>
<van-nav-bar left-arrow title="首页" @click-left="handleBack">
<template v-slot:right>
<van-button type="primary" size="small" @click="handleLogout">注销</van-button>
</template>
</van-nav-bar>
</template>
<script>
export default {
methods: {
handleBack() {
this.$router.go(-1)
},
handleLogout() {
this.$emit('logout')
}
}
}
</script>
```
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
