Vue 3 30天精进之旅：Day 14

在前面的学习中，我们已经掌握了Vue 3的基础知识，包括其核心概念、Vue Router、Vuex，以及异步操作等。今天是一个重要的里程碑：我们将把这些知识整合到一个实际的项目中。通过项目实践，你将能够深入理解所学知识，提升实际开发技能。

一、项目目标

今天我们将构建一个用户管理系统，具备以下功能：

用户注册和登录。
显示用户列表，包含用户信息。
增加、编辑和删除用户。
访问受保护的管理员页面。
使用Vue Router进行页面导航。
使用Vuex管理全局状态。

二、项目结构

在开始项目前，我们先确定项目结构。接下来是一个基本的文件结构示例：

txt

user-management-app/
├── src/
│   ├── assets/           // 存放静态资源
│   ├── components/       // 公共组件
│   ├── views/            // 页面视图组件
│   ├── store/            // Vuex store
│   ├── router/           // Vue Router
│   ├── App.vue           // 主应用组件
│   ├── main.js           // 应用入口文件
│   └── ...
├── public/               // 公共文件
└── package.json          // 项目配置文件

三、项目准备

1. 创建Vue项目

首先，使用Vue CLI创建一个新的Vue 3项目：

vue create user-management-app

选择适合本项目的配置，确保选中了Router和Vuex。

2. 安装Axios

我们将使用Axios来进行HTTP请求。在项目目录中，安装Axios：

npm install axios

四、实现功能

1. 设置Vue Router

在 src/router/index.js 中，根据我们的需求设置路由。

javascript

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import UserList from '../views/UserList.vue';
import Admin from '../views/Admin.vue';const routes = [{ path: '/', component: Home },{ path: '/login', component: Login },{ path: '/register', component: Register },{ path: '/users', component: UserList, meta: { requiresAuth: true } },{ path: '/admin', component: Admin, meta: { requiresAuth: true, roles: ['admin'] } },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

2. 设置Vuex Store

在 src/store/index.js 中，设置Vuex以管理用户状态。

javascript

import { createStore } from 'vuex';
import axios from 'axios';const store = createStore({state() {return {users: [],isAuthenticated: false,userRole: null,error: null,};},mutations: {setUsers(state, users) {state.users = users;},setAuthenticated(state, payload) {state.isAuthenticated = payload.isAuthenticated;state.userRole = payload.role;},setError(state, error) {state.error = error;},},actions: {async fetchUsers({ commit }) {try {const response = await axios.get('https://jsonplaceholder.typicode.com/users');commit('setUsers', response.data);} catch (error) {commit('setError', error.message);}},async login({ commit }, credentials) {// 模拟登录const fakeAuthResponse = { isAuthenticated: true, role: 'admin' }; // 假数据commit('setAuthenticated', fakeAuthResponse);},},
});export default store;

3. 创建视图组件

在 src/views 目录下创建以下组件：

Home.vue
Login.vue
Register.vue
UserList.vue
Admin.vue

示例：创建 `Login.vue`

vue

<template><div><h2>Login</h2><form @submit.prevent="handleLogin"><input v-model="email" placeholder="Email" required /><input v-model="password" type="password" placeholder="Password" required /><button type="submit">Login</button><p v-if="error">{{ error }}</p></form></div>
</template><script>
import { ref } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const email = ref('');const password = ref('');const error = ref('');const handleLogin = async () => {try {await store.dispatch('login', { email: email.value, password: password.value });// 跳转到用户列表页面} catch (e) {error.value = e.message;}};return { email, password, error, handleLogin };},
};
</script>

示例：创建 `UserList.vue`

vue

<template><div><h2>User List</h2><ul><li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li></ul><button @click="fetchUsers">Refresh User List</button></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const users = computed(() => store.state.users);const fetchUsers = () => {store.dispatch('fetchUsers');};return { users, fetchUsers };},mounted() {this.fetchUsers();},
};
</script>

4. 保护路由

使用路由守卫来保护路由，确保只有经过身份认证的用户能访问用户列表和管理员页面。在 src/router/index.js 中添加以下代码：

javascript

router.beforeEach((to, from, next) => {const isAuthenticated = store.state.isAuthenticated;if (to.meta.requiresAuth && !isAuthenticated) {next({ path: '/login' });} else {next();}
});

5. 用户注册功能（可选）

在 Register.vue 中实现用户注册的基本逻辑，模拟用户注册并更新状态。

vue

<template><div><h2>Register</h2><form @submit.prevent="handleRegister"><input v-model="email" placeholder="Email" required /><input v-model="password" type="password" placeholder="Password" required /><button type="submit">Register</button></form></div>
</template><script>
import { ref } from 'vue';export default {setup() {const email = ref('');const password = ref('');const handleRegister = () => {// 模拟注册逻辑console.log(`Registered with ${email.value} and ${password.value}`);};return { email, password, handleRegister };},
};
</script>

6. 管理员页面（Admin.vue）

vue

<template><div><h2>Admin Page</h2><p>This is a protected page only for admins.</p></div>
</template><script>
export default {mounted() {// 管理员页面逻辑},
};
</script>

五、运行项目

在项目目录中，通过以下命令启动你的Vue应用：

npm run serve

你的用户管理系统现在应该可以运行。你可以进行注册、登录、查看用户列表以及访问受保护的页面。

六、总结与反思

在今天的项目实践中，我们将前面所学的知识应用到一个具体的项目中，涉及路由配置、状态管理、异步请求等内容。通过实践，你可以体会到如何在实际开发中运用Vue的强大功能。

练习

用户编辑：实现一个功能，允许用户点击列表中的某个用户后编辑该用户的信息。
更新状态：在用户注册、登录后，将状态更新到Vuex并刷新用户列表。
添加样式：使用CSS或UI框架（如Bootstrap、Tailwind CSS）来美化项目。

通过这些练习，你将能进一步巩固所学知识，并提升你的开发技能。明天我们将深入探索 Vue 3的动画与过渡，持续提升我们的项目开发能力！