如果你正在学习 Vue3可能会遇到这样的困惑跟着教程写了不少组件但一到实际项目就不知道如何组织代码结构或者前端页面做得不错但后端接口一对接就各种报错。更让人头疼的是网上资料要么太简单TodoList 级别要么太复杂直接上微服务缺少一个能贯穿前后端的完整实战项目。这正是本文要解决的问题。我将带你从零搭建一个具备实际业务价值的后台管理系统覆盖 Vue3 全家桶、Node.js 后端服务和 MySQL 数据库的全栈技术栈。这个项目不是简单的增删改查演示而是包含了权限管理、动态路由、数据可视化等企业级功能帮你跨越从会写代码到能做项目的关键门槛。1. 为什么选择这个技术栈组合Vue3 Node.js MySQL 是目前中小型企业后台管理系统最主流的技术方案之一。Vue3 的 Composition API 让复杂组件的逻辑组织更清晰Node.js 的轻量级和高并发特性适合后台管理系统的 API 服务MySQL 则是经过时间检验的关系型数据库首选。但真正让这个组合有价值的是它们之间的协同效率。Vue3 的响应式系统与 Node.js 的异步特性天然契合前后端都使用 JavaScript/TypeScript 减少了上下文切换成本。更重要的是这种技术栈的学习路径平滑前端开发者可以逐步深入后端后端开发者也能快速上手前端。在实际项目中这种组合能够支撑日均数万用户的后台系统。比如我最近参与的一个电商管理平台就是用类似架构处理着每天 3 万 的订单数据运行稳定且开发效率很高。2. 项目整体架构设计在开始编码前我们先明确系统的整体架构。这个后台管理系统采用前后端分离模式前端使用 Vue3 负责页面渲染和用户交互后端使用 Node.js 提供 RESTful APIMySQL 作为数据持久化层。前端层 (Vue3) ├── 路由管理 (Vue Router) ├── 状态管理 (Pinia) ├── UI组件库 (Element Plus) └── 工具库 (Axios, Day.js等) 后端层 (Node.js Express) ├── 路由控制 ├── 中间件层 (认证、日志、错误处理) ├── 服务层 (业务逻辑) └── 数据访问层 (数据库操作) 数据层 (MySQL) ├── 用户表 ├── 权限表 ├── 业务数据表 └── 日志表这种分层架构的优势在于职责清晰、便于维护。前端专注用户体验后端专注业务逻辑和数据安全数据库则保证数据的完整性和一致性。3. 开发环境准备与工具配置3.1 前端开发环境首先确保你的系统已安装 Node.js建议版本 16和 npm。可以通过以下命令检查node --version npm --version如果遇到 PowerShell 执行策略限制如网络热词中提到的 npm.ps1 错误可以用管理员权限运行 PowerShell然后执行Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser接下来创建 Vue3 项目。推荐使用 Vite 作为构建工具它比传统的 Vue CLI 启动更快、配置更简单npm create vuelatest vue3-admin-project cd vue3-admin-project npm install项目创建过程中选择需要的功能TypeScript、Vue Router、Pinia、ESLint 等。这些是现代 Vue3 项目的标准配置。3.2 后端开发环境在后端目录中初始化 Node.js 项目mkdir server cd server npm init -y npm install express mysql2 cors dotenv bcryptjs jsonwebtoken npm install -D nodemon关键依赖说明express: Node.js Web 框架mysql2: MySQL 数据库驱动cors: 处理跨域请求dotenv: 环境变量管理bcryptjs: 密码加密jsonwebtoken: JWT 认证3.3 数据库环境MySQL 安装根据操作系统选择不同方式。Windows 推荐使用 MySQL InstallermacOS 可用 HomebrewLinux 用对应包管理器。安装完成后创建数据库CREATE DATABASE vue3_admin DEFAULT CHARACTER SET utf8mb4;建议使用 utf8mb4 字符集支持更完整的 Unicode 字符如表情符号。4. 前端核心功能实现4.1 项目结构设计良好的目录结构是项目可维护性的基础。推荐如下组织方式src/ ├── api/ # 接口请求封装 ├── components/ # 通用组件 ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── stores/ # 状态管理 ├── types/ # TypeScript 类型定义 ├── utils/ # 工具函数 ├── views/ # 页面组件 └── main.ts # 入口文件4.2 路由配置与权限控制使用 Vue Router 实现路由管理结合动态路由实现权限控制// router/index.ts import { createRouter, createWebHistory } from vue-router import { useUserStore } from /stores/user const router createRouter({ history: createWebHistory(), routes: [ { path: /login, component: () import(/views/Login.vue), meta: { requiresAuth: false } }, { path: /, component: () import(/layouts/MainLayout.vue), meta: { requiresAuth: true }, children: [ { path: dashboard, component: () import(/views/Dashboard.vue) }, // 动态路由将通过 addRoutes 方法添加 ] } ] }) // 路由守卫 router.beforeEach((to, from, next) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.token) { next(/login) } else { next() } }) export default router4.3 状态管理设计使用 Pinia 管理全局状态特别是用户信息和权限数据// stores/user.ts import { defineStore } from pinia interface UserInfo { id: number username: string role: string permissions: string[] } export const useUserStore defineStore(user, { state: (): { token: string; userInfo: UserInfo | null } ({ token: localStorage.getItem(token) || , userInfo: null }), actions: { setToken(token: string) { this.token token localStorage.setItem(token, token) }, async getUserInfo() { const { data } await api.getUserInfo() this.userInfo data }, logout() { this.token this.userInfo null localStorage.removeItem(token) } }, getters: { isLoggedIn: (state) !!state.token } })4.4 组件封装实践封装一个可复用的表格组件支持分页、排序和筛选!-- components/DataTable.vue -- template div classdata-table div classtable-header el-input v-modelsearchText placeholder搜索... stylewidth: 300px / el-button typeprimary click$emit(search, searchText)搜索/el-button /div el-table :datatableData v-loadingloading slot namecolumns/slot /el-table div classpagination el-pagination v-model:current-pagecurrentPage v-model:page-sizepageSize :totaltotal current-change$emit(page-change, $event) layouttotal, sizes, prev, pager, next, jumper :page-sizes[10, 20, 50, 100] / /div /div /template script setup langts interface Props { tableData: any[] loading: boolean total: number currentPage?: number pageSize?: number } const props withDefaults(definePropsProps(), { currentPage: 1, pageSize: 10 }) const searchText ref() defineEmits{ search: [text: string] pageChange: [page: number] }() /script5. 后端 API 开发5.1 服务器基础配置创建 Express 服务器配置中间件和基础路由// server/app.js const express require(express) const cors require(cors) require(dotenv).config() const app express() // 中间件配置 app.use(cors()) app.use(express.json()) app.use(express.urlencoded({ extended: true })) // 日志中间件 app.use((req, res, next) { console.log(${new Date().toISOString()} - ${req.method} ${req.path}) next() }) // 路由引入 app.use(/api/auth, require(./routes/auth)) app.use(/api/users, require(./routes/users)) app.use(/api/dashboard, require(./routes/dashboard)) // 错误处理中间件 app.use((err, req, res, next) { console.error(err.stack) res.status(500).json({ message: 服务器内部错误 }) }) const PORT process.env.PORT || 3000 app.listen(PORT, () { console.log(服务器运行在端口 ${PORT}) })5.2 数据库连接与模型定义使用 mysql2 创建数据库连接池提高性能// server/config/database.js const mysql require(mysql2/promise) const pool mysql.createPool({ host: process.env.DB_HOST || localhost, user: process.env.DB_USER || root, password: process.env.DB_PASSWORD || , database: process.env.DB_NAME || vue3_admin, waitForConnections: true, connectionLimit: 10, queueLimit: 0 }) module.exports pool定义用户模型封装数据库操作// server/models/User.js const pool require(../config/database) class User { // 根据用户名查找用户 static async findByUsername(username) { const [rows] await pool.execute( SELECT id, username, password, role FROM users WHERE username ?, [username] ) return rows[0] } // 创建新用户 static async create(userData) { const { username, password, role user } userData const [result] await pool.execute( INSERT INTO users (username, password, role) VALUES (?, ?, ?), [username, password, role] ) return result.insertId } // 获取用户列表带分页 static async getList(page 1, pageSize 10) { const offset (page - 1) * pageSize const [rows] await pool.execute( SELECT id, username, role, created_at FROM users LIMIT ? OFFSET ?, [pageSize, offset] ) const [countRows] await pool.execute(SELECT COUNT(*) as total FROM users) return { list: rows, total: countRows[0].total } } } module.exports User5.3 JWT 认证实现实现登录接口和 token 验证中间件// server/middleware/auth.js const jwt require(jsonwebtoken) const authenticateToken (req, res, next) { const authHeader req.headers[authorization] const token authHeader authHeader.split( )[1] // Bearer TOKEN if (!token) { return res.status(401).json({ message: 访问令牌缺失 }) } jwt.verify(token, process.env.JWT_SECRET, (err, user) { if (err) { return res.status(403).json({ message: 令牌无效 }) } req.user user next() }) } module.exports authenticateToken// server/routes/auth.js const express require(express) const bcrypt require(bcryptjs) const jwt require(jsonwebtoken) const User require(../models/User) const router express.Router() // 登录接口 router.post(/login, async (req, res) { try { const { username, password } req.body // 参数验证 if (!username || !password) { return res.status(400).json({ message: 用户名和密码不能为空 }) } // 查找用户 const user await User.findByUsername(username) if (!user) { return res.status(401).json({ message: 用户名或密码错误 }) } // 验证密码 const validPassword await bcrypt.compare(password, user.password) if (!validPassword) { return res.status(401).json({ message: 用户名或密码错误 }) } // 生成 token const token jwt.sign( { id: user.id, username: user.username, role: user.role }, process.env.JWT_SECRET, { expiresIn: 24h } ) res.json({ message: 登录成功, token, user: { id: user.id, username: user.username, role: user.role } }) } catch (error) { console.error(登录错误:, error) res.status(500).json({ message: 服务器内部错误 }) } }) module.exports router6. 数据库设计与优化6.1 核心表结构设计创建用户表、权限表和操作日志表-- 用户表 CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL, role ENUM(admin, user) DEFAULT user, status TINYINT DEFAULT 1 COMMENT 1-正常 0-禁用, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); -- 权限表 CREATE TABLE permissions ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 权限名称, code VARCHAR(100) NOT NULL COMMENT 权限代码, description TEXT COMMENT 权限描述 ); -- 用户权限关联表 CREATE TABLE user_permissions ( user_id INT, permission_id INT, PRIMARY KEY (user_id, permission_id), FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE, FOREIGN KEY (permission_id) REFERENCES permissions(id) ON DELETE CASCADE ); -- 操作日志表 CREATE TABLE operation_logs ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT, action VARCHAR(100) NOT NULL COMMENT 操作动作, resource VARCHAR(100) COMMENT 操作资源, details TEXT COMMENT 操作详情, ip_address VARCHAR(45) COMMENT IP地址, user_agent TEXT COMMENT 用户代理, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id) );6.2 索引优化建议为提高查询性能需要在常用查询字段上创建索引-- 用户名的查询频率很高需要索引 CREATE INDEX idx_users_username ON users(username); -- 按时间范围查询日志很常见 CREATE INDEX idx_logs_created_at ON operation_logs(created_at); CREATE INDEX idx_logs_user_action ON operation_logs(user_id, action); -- 权限查询优化 CREATE INDEX idx_permissions_code ON permissions(code);7. 前后端数据交互实战7.1 API 请求封装在前端封装统一的请求函数处理 token 自动添加和错误处理// utils/request.ts import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器自动添加 token request.interceptors.request.use( (config) { const userStore useUserStore() if (userStore.token) { config.headers.Authorization Bearer ${userStore.token} } return config }, (error) { return Promise.reject(error) } ) // 响应拦截器统一错误处理 request.interceptors.response.use( (response) { return response.data }, (error) { if (error.response?.status 401) { const userStore useUserStore() userStore.logout() window.location.href /login ElMessage.error(登录已过期请重新登录) } else { ElMessage.error(error.response?.data?.message || 网络错误) } return Promise.reject(error) } ) export default request7.2 业务 API 模块化按功能模块组织 API 接口// api/user.ts import request from /utils/request export const userApi { // 获取用户列表 getList(params: { page: number; pageSize: number; keyword?: string }) { return request.get(/api/users, { params }) }, // 创建用户 create(data: { username: string; password: string; role: string }) { return request.post(/api/users, data) }, // 更新用户 update(id: number, data: Partial{ username: string; role: string; status: number }) { return request.put(/api/users/${id}, data) }, // 删除用户 delete(id: number) { return request.delete(/api/users/${id}) } }8. 典型业务功能实现8.1 用户管理页面实现完整的用户 CRUD 功能!-- views/user/UserList.vue -- template div classuser-management div classheader h2用户管理/h2 el-button typeprimary clickshowCreateDialog true 新增用户 /el-button /div DataTable :tableDatauserList :loadingloading :totaltotal :current-pagecurrentPage :page-sizepageSize page-changehandlePageChange searchhandleSearch template #columns el-table-column propid labelID width80 / el-table-column propusername label用户名 / el-table-column proprole label角色 template #default{ row } el-tag :typerow.role admin ? danger : primary {{ row.role admin ? 管理员 : 普通用户 }} /el-tag /template /el-table-column el-table-column propcreated_at label创建时间 template #default{ row } {{ formatDate(row.created_at) }} /template /el-table-column el-table-column label操作 width200 template #default{ row } el-button sizesmall clickhandleEdit(row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(row) 删除 /el-button /template /el-table-column /template /DataTable !-- 新增/编辑对话框 -- UserDialog v-modelshowCreateDialog :usereditingUser successhandleDialogSuccess / /div /template script setup langts import { ref, onMounted } from vue import { ElMessage, ElMessageBox } from element-plus import DataTable from /components/DataTable.vue import UserDialog from ./components/UserDialog.vue import { userApi } from /api/user import { formatDate } from /utils/date interface User { id: number username: string role: string created_at: string } const userList refUser[]([]) const loading ref(false) const total ref(0) const currentPage ref(1) const pageSize ref(10) const searchKeyword ref() const showCreateDialog ref(false) const editingUser refUser | null(null) const loadUserList async () { loading.value true try { const params { page: currentPage.value, pageSize: pageSize.value, keyword: searchKeyword.value } const data await userApi.getList(params) userList.value data.list total.value data.total } catch (error) { ElMessage.error(获取用户列表失败) } finally { loading.value false } } const handleSearch (keyword: string) { searchKeyword.value keyword currentPage.value 1 loadUserList() } const handlePageChange (page: number) { currentPage.value page loadUserList() } const handleEdit (user: User) { editingUser.value user showCreateDialog.value true } const handleDelete async (user: User) { try { await ElMessageBox.confirm(确定删除用户 ${user.username} 吗, 提示) await userApi.delete(user.id) ElMessage.success(删除成功) loadUserList() } catch (error) { // 用户取消删除 } } const handleDialogSuccess () { showCreateDialog.value false editingUser.value null loadUserList() } onMounted(() { loadUserList() }) /script8.2 数据可视化仪表盘使用 ECharts 实现数据统计图表!-- views/Dashboard.vue -- template div classdashboard h2数据概览/h2 div classstat-cards el-row :gutter20 el-col :span6 el-card classstat-card div classstat-content div classstat-number{{ stats.userCount }}/div div classstat-label总用户数/div /div /el-card /el-col !-- 其他统计卡片 -- /el-row /div div classcharts el-row :gutter20 el-col :span12 el-card template #header span用户增长趋势/span /template div refuserChart styleheight: 300px;/div /el-card /el-col el-col :span12 el-card template #header span访问量统计/span /template div refvisitChart styleheight: 300px;/div /el-card /el-col /el-row /div /div /template script setup langts import { ref, onMounted, onUnmounted } from vue import * as echarts from echarts const userChart refHTMLElement() const visitChart refHTMLElement() let userChartInstance: echarts.ECharts | null null let visitChartInstance: echarts.ECharts | null null const stats ref({ userCount: 0, // 其他统计字段 }) const initCharts () { if (userChart.value) { userChartInstance echarts.init(userChart.value) userChartInstance.setOption({ title: { text: 用户增长趋势 }, tooltip: { trigger: axis }, xAxis: { type: category, data: [] }, yAxis: { type: value }, series: [{ type: line, data: [] }] }) } if (visitChart.value) { visitChartInstance echarts.init(visitChart.value) // 类似配置访问量图表 } } const resizeCharts () { userChartInstance?.resize() visitChartInstance?.resize() } onMounted(() { initCharts() window.addEventListener(resize, resizeCharts) }) onUnmounted(() { window.removeEventListener(resize, resizeCharts) userChartInstance?.dispose() visitChartInstance?.dispose() }) /script9. 项目部署与优化9.1 前端构建优化配置 Vite 构建选项优化产物体积// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import { visualizer } from rollup-plugin-visualizer export default defineConfig({ plugins: [vue(), visualizer()], build: { rollupOptions: { output: { manualChunks: { vue-vendor: [vue, vue-router, pinia], element-ui: [element-plus], echarts-vendor: [echarts] } } } }, server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } })9.2 生产环境部署使用 PM2 管理 Node.js 进程// ecosystem.config.js module.exports { apps: [{ name: vue3-admin-server, script: ./app.js, instances: max, exec_mode: cluster, env: { NODE_ENV: production, PORT: 3000 } }] }部署命令# 构建前端 npm run build # 启动后端服务 pm2 start ecosystem.config.js10. 常见问题与解决方案10.1 前端常见问题问题1Vue3 组件样式不生效原因Scoped CSS 选择器优先级问题解决使用:deep()穿透选择器或调整样式加载顺序问题2Element Plus 按需引入后图标显示异常原因图标组件未正确注册解决确保在 main.ts 中正确导入图标组件// main.ts import { ElButton, ElMessage } from element-plus const app createApp(App) app.use(ElButton) app.config.globalProperties.$message ElMessage10.2 后端常见问题问题1MySQL 连接超时原因数据库连接池配置不当或网络问题解决调整连接池参数增加超时时间// 数据库连接配置增加超时设置 const pool mysql.createPool({ // ...其他配置 connectTimeout: 60000, acquireTimeout: 60000, timeout: 60000 })问题2JWT Token 过期处理原因Token 过期后前端仍在使用解决实现自动刷新 token 机制或友好提示重新登录10.3 部署常见问题问题1跨域问题原因生产环境域名与开发环境不同解决正确配置 CORS 或使用 Nginx 反向代理问题2静态资源加载404原因路径配置错误或文件不存在解决检查构建路径和服务器静态文件配置这个全栈项目涵盖了现代 Web 开发的核心技术栈通过实际业务场景的演练能够帮你建立完整的前后端协同开发能力。建议在理解的基础上进行扩展比如添加更多业务模块、集成第三方服务或优化性能监控让项目更贴近真实生产环境的需求。
Vue3+Node.js+MySQL全栈后台管理系统实战教程
如果你正在学习 Vue3可能会遇到这样的困惑跟着教程写了不少组件但一到实际项目就不知道如何组织代码结构或者前端页面做得不错但后端接口一对接就各种报错。更让人头疼的是网上资料要么太简单TodoList 级别要么太复杂直接上微服务缺少一个能贯穿前后端的完整实战项目。这正是本文要解决的问题。我将带你从零搭建一个具备实际业务价值的后台管理系统覆盖 Vue3 全家桶、Node.js 后端服务和 MySQL 数据库的全栈技术栈。这个项目不是简单的增删改查演示而是包含了权限管理、动态路由、数据可视化等企业级功能帮你跨越从会写代码到能做项目的关键门槛。1. 为什么选择这个技术栈组合Vue3 Node.js MySQL 是目前中小型企业后台管理系统最主流的技术方案之一。Vue3 的 Composition API 让复杂组件的逻辑组织更清晰Node.js 的轻量级和高并发特性适合后台管理系统的 API 服务MySQL 则是经过时间检验的关系型数据库首选。但真正让这个组合有价值的是它们之间的协同效率。Vue3 的响应式系统与 Node.js 的异步特性天然契合前后端都使用 JavaScript/TypeScript 减少了上下文切换成本。更重要的是这种技术栈的学习路径平滑前端开发者可以逐步深入后端后端开发者也能快速上手前端。在实际项目中这种组合能够支撑日均数万用户的后台系统。比如我最近参与的一个电商管理平台就是用类似架构处理着每天 3 万 的订单数据运行稳定且开发效率很高。2. 项目整体架构设计在开始编码前我们先明确系统的整体架构。这个后台管理系统采用前后端分离模式前端使用 Vue3 负责页面渲染和用户交互后端使用 Node.js 提供 RESTful APIMySQL 作为数据持久化层。前端层 (Vue3) ├── 路由管理 (Vue Router) ├── 状态管理 (Pinia) ├── UI组件库 (Element Plus) └── 工具库 (Axios, Day.js等) 后端层 (Node.js Express) ├── 路由控制 ├── 中间件层 (认证、日志、错误处理) ├── 服务层 (业务逻辑) └── 数据访问层 (数据库操作) 数据层 (MySQL) ├── 用户表 ├── 权限表 ├── 业务数据表 └── 日志表这种分层架构的优势在于职责清晰、便于维护。前端专注用户体验后端专注业务逻辑和数据安全数据库则保证数据的完整性和一致性。3. 开发环境准备与工具配置3.1 前端开发环境首先确保你的系统已安装 Node.js建议版本 16和 npm。可以通过以下命令检查node --version npm --version如果遇到 PowerShell 执行策略限制如网络热词中提到的 npm.ps1 错误可以用管理员权限运行 PowerShell然后执行Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser接下来创建 Vue3 项目。推荐使用 Vite 作为构建工具它比传统的 Vue CLI 启动更快、配置更简单npm create vuelatest vue3-admin-project cd vue3-admin-project npm install项目创建过程中选择需要的功能TypeScript、Vue Router、Pinia、ESLint 等。这些是现代 Vue3 项目的标准配置。3.2 后端开发环境在后端目录中初始化 Node.js 项目mkdir server cd server npm init -y npm install express mysql2 cors dotenv bcryptjs jsonwebtoken npm install -D nodemon关键依赖说明express: Node.js Web 框架mysql2: MySQL 数据库驱动cors: 处理跨域请求dotenv: 环境变量管理bcryptjs: 密码加密jsonwebtoken: JWT 认证3.3 数据库环境MySQL 安装根据操作系统选择不同方式。Windows 推荐使用 MySQL InstallermacOS 可用 HomebrewLinux 用对应包管理器。安装完成后创建数据库CREATE DATABASE vue3_admin DEFAULT CHARACTER SET utf8mb4;建议使用 utf8mb4 字符集支持更完整的 Unicode 字符如表情符号。4. 前端核心功能实现4.1 项目结构设计良好的目录结构是项目可维护性的基础。推荐如下组织方式src/ ├── api/ # 接口请求封装 ├── components/ # 通用组件 ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── stores/ # 状态管理 ├── types/ # TypeScript 类型定义 ├── utils/ # 工具函数 ├── views/ # 页面组件 └── main.ts # 入口文件4.2 路由配置与权限控制使用 Vue Router 实现路由管理结合动态路由实现权限控制// router/index.ts import { createRouter, createWebHistory } from vue-router import { useUserStore } from /stores/user const router createRouter({ history: createWebHistory(), routes: [ { path: /login, component: () import(/views/Login.vue), meta: { requiresAuth: false } }, { path: /, component: () import(/layouts/MainLayout.vue), meta: { requiresAuth: true }, children: [ { path: dashboard, component: () import(/views/Dashboard.vue) }, // 动态路由将通过 addRoutes 方法添加 ] } ] }) // 路由守卫 router.beforeEach((to, from, next) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.token) { next(/login) } else { next() } }) export default router4.3 状态管理设计使用 Pinia 管理全局状态特别是用户信息和权限数据// stores/user.ts import { defineStore } from pinia interface UserInfo { id: number username: string role: string permissions: string[] } export const useUserStore defineStore(user, { state: (): { token: string; userInfo: UserInfo | null } ({ token: localStorage.getItem(token) || , userInfo: null }), actions: { setToken(token: string) { this.token token localStorage.setItem(token, token) }, async getUserInfo() { const { data } await api.getUserInfo() this.userInfo data }, logout() { this.token this.userInfo null localStorage.removeItem(token) } }, getters: { isLoggedIn: (state) !!state.token } })4.4 组件封装实践封装一个可复用的表格组件支持分页、排序和筛选!-- components/DataTable.vue -- template div classdata-table div classtable-header el-input v-modelsearchText placeholder搜索... stylewidth: 300px / el-button typeprimary click$emit(search, searchText)搜索/el-button /div el-table :datatableData v-loadingloading slot namecolumns/slot /el-table div classpagination el-pagination v-model:current-pagecurrentPage v-model:page-sizepageSize :totaltotal current-change$emit(page-change, $event) layouttotal, sizes, prev, pager, next, jumper :page-sizes[10, 20, 50, 100] / /div /div /template script setup langts interface Props { tableData: any[] loading: boolean total: number currentPage?: number pageSize?: number } const props withDefaults(definePropsProps(), { currentPage: 1, pageSize: 10 }) const searchText ref() defineEmits{ search: [text: string] pageChange: [page: number] }() /script5. 后端 API 开发5.1 服务器基础配置创建 Express 服务器配置中间件和基础路由// server/app.js const express require(express) const cors require(cors) require(dotenv).config() const app express() // 中间件配置 app.use(cors()) app.use(express.json()) app.use(express.urlencoded({ extended: true })) // 日志中间件 app.use((req, res, next) { console.log(${new Date().toISOString()} - ${req.method} ${req.path}) next() }) // 路由引入 app.use(/api/auth, require(./routes/auth)) app.use(/api/users, require(./routes/users)) app.use(/api/dashboard, require(./routes/dashboard)) // 错误处理中间件 app.use((err, req, res, next) { console.error(err.stack) res.status(500).json({ message: 服务器内部错误 }) }) const PORT process.env.PORT || 3000 app.listen(PORT, () { console.log(服务器运行在端口 ${PORT}) })5.2 数据库连接与模型定义使用 mysql2 创建数据库连接池提高性能// server/config/database.js const mysql require(mysql2/promise) const pool mysql.createPool({ host: process.env.DB_HOST || localhost, user: process.env.DB_USER || root, password: process.env.DB_PASSWORD || , database: process.env.DB_NAME || vue3_admin, waitForConnections: true, connectionLimit: 10, queueLimit: 0 }) module.exports pool定义用户模型封装数据库操作// server/models/User.js const pool require(../config/database) class User { // 根据用户名查找用户 static async findByUsername(username) { const [rows] await pool.execute( SELECT id, username, password, role FROM users WHERE username ?, [username] ) return rows[0] } // 创建新用户 static async create(userData) { const { username, password, role user } userData const [result] await pool.execute( INSERT INTO users (username, password, role) VALUES (?, ?, ?), [username, password, role] ) return result.insertId } // 获取用户列表带分页 static async getList(page 1, pageSize 10) { const offset (page - 1) * pageSize const [rows] await pool.execute( SELECT id, username, role, created_at FROM users LIMIT ? OFFSET ?, [pageSize, offset] ) const [countRows] await pool.execute(SELECT COUNT(*) as total FROM users) return { list: rows, total: countRows[0].total } } } module.exports User5.3 JWT 认证实现实现登录接口和 token 验证中间件// server/middleware/auth.js const jwt require(jsonwebtoken) const authenticateToken (req, res, next) { const authHeader req.headers[authorization] const token authHeader authHeader.split( )[1] // Bearer TOKEN if (!token) { return res.status(401).json({ message: 访问令牌缺失 }) } jwt.verify(token, process.env.JWT_SECRET, (err, user) { if (err) { return res.status(403).json({ message: 令牌无效 }) } req.user user next() }) } module.exports authenticateToken// server/routes/auth.js const express require(express) const bcrypt require(bcryptjs) const jwt require(jsonwebtoken) const User require(../models/User) const router express.Router() // 登录接口 router.post(/login, async (req, res) { try { const { username, password } req.body // 参数验证 if (!username || !password) { return res.status(400).json({ message: 用户名和密码不能为空 }) } // 查找用户 const user await User.findByUsername(username) if (!user) { return res.status(401).json({ message: 用户名或密码错误 }) } // 验证密码 const validPassword await bcrypt.compare(password, user.password) if (!validPassword) { return res.status(401).json({ message: 用户名或密码错误 }) } // 生成 token const token jwt.sign( { id: user.id, username: user.username, role: user.role }, process.env.JWT_SECRET, { expiresIn: 24h } ) res.json({ message: 登录成功, token, user: { id: user.id, username: user.username, role: user.role } }) } catch (error) { console.error(登录错误:, error) res.status(500).json({ message: 服务器内部错误 }) } }) module.exports router6. 数据库设计与优化6.1 核心表结构设计创建用户表、权限表和操作日志表-- 用户表 CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL, role ENUM(admin, user) DEFAULT user, status TINYINT DEFAULT 1 COMMENT 1-正常 0-禁用, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); -- 权限表 CREATE TABLE permissions ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 权限名称, code VARCHAR(100) NOT NULL COMMENT 权限代码, description TEXT COMMENT 权限描述 ); -- 用户权限关联表 CREATE TABLE user_permissions ( user_id INT, permission_id INT, PRIMARY KEY (user_id, permission_id), FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE, FOREIGN KEY (permission_id) REFERENCES permissions(id) ON DELETE CASCADE ); -- 操作日志表 CREATE TABLE operation_logs ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT, action VARCHAR(100) NOT NULL COMMENT 操作动作, resource VARCHAR(100) COMMENT 操作资源, details TEXT COMMENT 操作详情, ip_address VARCHAR(45) COMMENT IP地址, user_agent TEXT COMMENT 用户代理, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id) );6.2 索引优化建议为提高查询性能需要在常用查询字段上创建索引-- 用户名的查询频率很高需要索引 CREATE INDEX idx_users_username ON users(username); -- 按时间范围查询日志很常见 CREATE INDEX idx_logs_created_at ON operation_logs(created_at); CREATE INDEX idx_logs_user_action ON operation_logs(user_id, action); -- 权限查询优化 CREATE INDEX idx_permissions_code ON permissions(code);7. 前后端数据交互实战7.1 API 请求封装在前端封装统一的请求函数处理 token 自动添加和错误处理// utils/request.ts import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器自动添加 token request.interceptors.request.use( (config) { const userStore useUserStore() if (userStore.token) { config.headers.Authorization Bearer ${userStore.token} } return config }, (error) { return Promise.reject(error) } ) // 响应拦截器统一错误处理 request.interceptors.response.use( (response) { return response.data }, (error) { if (error.response?.status 401) { const userStore useUserStore() userStore.logout() window.location.href /login ElMessage.error(登录已过期请重新登录) } else { ElMessage.error(error.response?.data?.message || 网络错误) } return Promise.reject(error) } ) export default request7.2 业务 API 模块化按功能模块组织 API 接口// api/user.ts import request from /utils/request export const userApi { // 获取用户列表 getList(params: { page: number; pageSize: number; keyword?: string }) { return request.get(/api/users, { params }) }, // 创建用户 create(data: { username: string; password: string; role: string }) { return request.post(/api/users, data) }, // 更新用户 update(id: number, data: Partial{ username: string; role: string; status: number }) { return request.put(/api/users/${id}, data) }, // 删除用户 delete(id: number) { return request.delete(/api/users/${id}) } }8. 典型业务功能实现8.1 用户管理页面实现完整的用户 CRUD 功能!-- views/user/UserList.vue -- template div classuser-management div classheader h2用户管理/h2 el-button typeprimary clickshowCreateDialog true 新增用户 /el-button /div DataTable :tableDatauserList :loadingloading :totaltotal :current-pagecurrentPage :page-sizepageSize page-changehandlePageChange searchhandleSearch template #columns el-table-column propid labelID width80 / el-table-column propusername label用户名 / el-table-column proprole label角色 template #default{ row } el-tag :typerow.role admin ? danger : primary {{ row.role admin ? 管理员 : 普通用户 }} /el-tag /template /el-table-column el-table-column propcreated_at label创建时间 template #default{ row } {{ formatDate(row.created_at) }} /template /el-table-column el-table-column label操作 width200 template #default{ row } el-button sizesmall clickhandleEdit(row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(row) 删除 /el-button /template /el-table-column /template /DataTable !-- 新增/编辑对话框 -- UserDialog v-modelshowCreateDialog :usereditingUser successhandleDialogSuccess / /div /template script setup langts import { ref, onMounted } from vue import { ElMessage, ElMessageBox } from element-plus import DataTable from /components/DataTable.vue import UserDialog from ./components/UserDialog.vue import { userApi } from /api/user import { formatDate } from /utils/date interface User { id: number username: string role: string created_at: string } const userList refUser[]([]) const loading ref(false) const total ref(0) const currentPage ref(1) const pageSize ref(10) const searchKeyword ref() const showCreateDialog ref(false) const editingUser refUser | null(null) const loadUserList async () { loading.value true try { const params { page: currentPage.value, pageSize: pageSize.value, keyword: searchKeyword.value } const data await userApi.getList(params) userList.value data.list total.value data.total } catch (error) { ElMessage.error(获取用户列表失败) } finally { loading.value false } } const handleSearch (keyword: string) { searchKeyword.value keyword currentPage.value 1 loadUserList() } const handlePageChange (page: number) { currentPage.value page loadUserList() } const handleEdit (user: User) { editingUser.value user showCreateDialog.value true } const handleDelete async (user: User) { try { await ElMessageBox.confirm(确定删除用户 ${user.username} 吗, 提示) await userApi.delete(user.id) ElMessage.success(删除成功) loadUserList() } catch (error) { // 用户取消删除 } } const handleDialogSuccess () { showCreateDialog.value false editingUser.value null loadUserList() } onMounted(() { loadUserList() }) /script8.2 数据可视化仪表盘使用 ECharts 实现数据统计图表!-- views/Dashboard.vue -- template div classdashboard h2数据概览/h2 div classstat-cards el-row :gutter20 el-col :span6 el-card classstat-card div classstat-content div classstat-number{{ stats.userCount }}/div div classstat-label总用户数/div /div /el-card /el-col !-- 其他统计卡片 -- /el-row /div div classcharts el-row :gutter20 el-col :span12 el-card template #header span用户增长趋势/span /template div refuserChart styleheight: 300px;/div /el-card /el-col el-col :span12 el-card template #header span访问量统计/span /template div refvisitChart styleheight: 300px;/div /el-card /el-col /el-row /div /div /template script setup langts import { ref, onMounted, onUnmounted } from vue import * as echarts from echarts const userChart refHTMLElement() const visitChart refHTMLElement() let userChartInstance: echarts.ECharts | null null let visitChartInstance: echarts.ECharts | null null const stats ref({ userCount: 0, // 其他统计字段 }) const initCharts () { if (userChart.value) { userChartInstance echarts.init(userChart.value) userChartInstance.setOption({ title: { text: 用户增长趋势 }, tooltip: { trigger: axis }, xAxis: { type: category, data: [] }, yAxis: { type: value }, series: [{ type: line, data: [] }] }) } if (visitChart.value) { visitChartInstance echarts.init(visitChart.value) // 类似配置访问量图表 } } const resizeCharts () { userChartInstance?.resize() visitChartInstance?.resize() } onMounted(() { initCharts() window.addEventListener(resize, resizeCharts) }) onUnmounted(() { window.removeEventListener(resize, resizeCharts) userChartInstance?.dispose() visitChartInstance?.dispose() }) /script9. 项目部署与优化9.1 前端构建优化配置 Vite 构建选项优化产物体积// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import { visualizer } from rollup-plugin-visualizer export default defineConfig({ plugins: [vue(), visualizer()], build: { rollupOptions: { output: { manualChunks: { vue-vendor: [vue, vue-router, pinia], element-ui: [element-plus], echarts-vendor: [echarts] } } } }, server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } })9.2 生产环境部署使用 PM2 管理 Node.js 进程// ecosystem.config.js module.exports { apps: [{ name: vue3-admin-server, script: ./app.js, instances: max, exec_mode: cluster, env: { NODE_ENV: production, PORT: 3000 } }] }部署命令# 构建前端 npm run build # 启动后端服务 pm2 start ecosystem.config.js10. 常见问题与解决方案10.1 前端常见问题问题1Vue3 组件样式不生效原因Scoped CSS 选择器优先级问题解决使用:deep()穿透选择器或调整样式加载顺序问题2Element Plus 按需引入后图标显示异常原因图标组件未正确注册解决确保在 main.ts 中正确导入图标组件// main.ts import { ElButton, ElMessage } from element-plus const app createApp(App) app.use(ElButton) app.config.globalProperties.$message ElMessage10.2 后端常见问题问题1MySQL 连接超时原因数据库连接池配置不当或网络问题解决调整连接池参数增加超时时间// 数据库连接配置增加超时设置 const pool mysql.createPool({ // ...其他配置 connectTimeout: 60000, acquireTimeout: 60000, timeout: 60000 })问题2JWT Token 过期处理原因Token 过期后前端仍在使用解决实现自动刷新 token 机制或友好提示重新登录10.3 部署常见问题问题1跨域问题原因生产环境域名与开发环境不同解决正确配置 CORS 或使用 Nginx 反向代理问题2静态资源加载404原因路径配置错误或文件不存在解决检查构建路径和服务器静态文件配置这个全栈项目涵盖了现代 Web 开发的核心技术栈通过实际业务场景的演练能够帮你建立完整的前后端协同开发能力。建议在理解的基础上进行扩展比如添加更多业务模块、集成第三方服务或优化性能监控让项目更贴近真实生产环境的需求。
