当前位置：首页 > article >正文

Vue 3 30天精进之旅：Day 14 - 项目实践

article 2025/2/5 5:41:01

在前面的学习中，我们已经掌握了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>