Vue CLI全栈开发实战：从零构建用户管理系统

Vue CLI全栈开发实战：从零构建用户管理系统

在当今的Web开发领域，Vue.js以其简洁的API和强大的功能赢得了广大开发者的青睐。然而，一个完整的Web应用不仅仅需要前端界面，还需要后端服务、数据库支持以及用户认证等全栈功能。本文将介绍如何使用Vue CLI快速搭建一个包含前端路由、状态管理、后端API、数据库操作和权限控制的全栈应用。

项目概述

本项目将实现一个简单的用户管理系统，包含以下功能：

1. 用户注册和登录
2. 管理员和普通用户的权限区分
3. 后台管理页面，允许管理员查看和管理用户列表

技术栈

• 前端：Vue CLI + Vue Router + Pinia
• 后端：Node.js + Express
• 数据库：MySQL
• ORM：Sequelize
• 认证：JWT
• 密码加密：bcrypt

前端开发

项目初始化

使用Vue CLI创建项目：

npm create vue@latest

选择Vue 3版本，并安装Vue Router和Pinia：

npm install vue-router pinia axios

路由配置

在router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Admin from '../views/Admin.vue'

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/admin', component: Admin, meta: { requiresAuth: true, requiresAdmin: true } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from) => {
  const isAuthenticated = localStorage.getItem('token')
  const isAdmin = localStorage.getItem('role') === 'admin'
  
  if (to.meta.requiresAuth && !isAuthenticated) return '/login'
  if (to.meta.requiresAdmin && !isAdmin) return '/login'
})

export default router

状态管理

使用Pinia进行状态管理：

// store/index.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: localStorage.getItem('token') || '',
    role: localStorage.getItem('role') || ''
  }),
  actions: {
    setToken(token) {
      this.token = token
      localStorage.setItem('token', token)
    },
    setRole(role) {
      this.role = role
      localStorage.setItem('role', role)
    }
  }
})

后端开发

环境搭建

安装必要的依赖：

npm install express sequelize mysql2 bcryptjs jsonwebtoken

数据库连接

在server.js中配置数据库连接：

const express = require('express')
const { Sequelize } = require('sequelize')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')

const app = express()
app.use(express.json())

const sequelize = new Sequelize('your_db', 'user', 'password', {
  host: 'localhost',
  dialect: 'mysql'
})

用户模型

定义用户模型：

const User = sequelize.define('User', {
  username: { type: Sequelize.STRING, unique: true },
  password: Sequelize.STRING,
  role: { type: Sequelize.ENUM('admin', 'user'), defaultValue: 'user' }
})

初始化管理员

确保数据库中存在管理员账户：

async function initializeAdmin() {
  const admin = await User.findOne({ where: { username: 'admin' } })
  if (!admin) {
    const hashedPassword = await bcrypt.hash('admin123', 10)
    await User.create({ username: 'admin', password: hashedPassword, role: 'admin' })
  }
}

API路由

实现注册和登录接口：

app.post('/api/register', async (req, res) => {
  try {
    const hashedPassword = await bcrypt.hash(req.body.password, 10)
    const user = await User.create({
      username: req.body.username,
      password: hashedPassword
    })
    res.status(201).json(user)
  } catch (error) {
    res.status(400).json({ error: 'Registration failed' })
  }
})

app.post('/api/login', async (req, res) => {
  const user = await User.findOne({ where: { username: req.body.username } })
  if (user && await bcrypt.compare(req.body.password, user.password)) {
    const token = jwt.sign(
      { id: user.id, role: user.role },
      'your_secret_key',
      { expiresIn: '1h' }
    )
    res.json({ token, role: user.role })
  } else {
    res.status(401).json({ error: 'Invalid credentials' })
  }
})

权限控制

JWT认证

在前端，使用JWT进行身份验证：

// api.js
import axios from 'axios'
import { useUserStore } from '@/store'

const api = axios.create({
  baseURL: 'http://localhost:3000/api'
})

api.interceptors.request.use(config => {
  const store = useUserStore()
  if (store.token) {
    config.headers.Authorization = `Bearer ${store.token}`
  }
  return config
})

export default api

路由守卫

在前端路由中添加权限验证：

router.beforeEach((to, from) => {
  const store = useUserStore()
  const isAuthenticated = store.token
  const isAdmin = store.role === 'admin'
  
  if (to.meta.requiresAuth && !isAuthenticated) return '/login'
  if (to.meta.requiresAdmin && !isAdmin) return '/login'
})

部署和测试

测试步骤

1. 注册普通用户
2. 使用admin/admin123登录管理员账户
3. 验证不同角色的页面访问权限
4. 测试用户管理功能（编辑/删除）

部署注意事项

• 配置环境变量（数据库密码、JWT密钥等）
• 添加错误处理机制
• 配置HTTPS（生产环境必备）
• 优化数据库连接池配置

通过以上步骤，我们完成了一个基于Vue CLI的全栈应用开发。这个项目不仅展示了前端路由和状态管理的实现，还深入介绍了后端API开发、数据库设计和权限控制等关键环节。希望这个实践案例能为你的Vue全栈开发提供有价值的参考。