文章管理系统

项目概览

• 项目类型：后台内容管理系统
• 核心方向：文章发布、权限菜单、通用列表、表单编辑
• 负责角色：前端开发 / 前后端协作
• 当前状态：内容可继续按真实项目细节补充

项目背景

文章管理系统是一个面向内容维护场景的后台管理项目，主要支持文章发布、分类管理、标签管理、草稿保存、权限控制和数据统计。项目重点在于后台表单体验、列表筛选、富文本编辑和权限菜单的工程化组织。

技术栈

• 前端：Vue 3、TypeScript、Vite、Element Plus
• 状态管理：Pinia、pinia-plugin-persistedstate
• 路由权限：Vue Router、动态路由、权限守卫
• 请求层：Axios、统一错误处理、Token 刷新
• 后端：Node.js、Express、MySQL

我的职责

• 搭建后台管理基础框架，包括登录、布局、侧边栏、面包屑和标签页导航。
• 负责文章模块开发，包括文章列表、筛选查询、新增编辑、草稿保存和发布状态切换。
• 封装通用表格和搜索表单，减少多个管理页面中的重复代码。
• 设计前端权限控制逻辑，根据用户角色动态生成菜单和路由。
• 封装请求层，统一处理 Token、接口错误、Loading 状态和登录失效跳转。

核心功能

• 登录鉴权：支持登录态维护、Token 处理和失效跳转。
• 文章管理：支持文章列表、筛选、新增、编辑、草稿和发布状态。
• 分类标签：支持内容分类、标签维护和列表操作。
• 权限菜单：根据角色动态生成菜单和可访问路由。

技术亮点

动态权限菜单

登录后根据用户角色获取菜单权限，前端将菜单数据转换为路由配置，并通过路由守卫控制页面访问，避免未授权用户直接访问管理页面。

文章编辑体验

文章编辑页拆分为基础信息、正文内容、SEO 信息和发布设置，支持草稿保存和发布校验，降低内容误发布的风险。

通用管理页面抽象

将后台常见的搜索、表格、分页和操作按钮抽成统一模式，让分类、标签、文章等模块可以复用同一套列表交互。

难点与解决方案

难点	解决方案
后台页面重复表格逻辑多	抽离搜索表单、表格列配置和分页状态
权限菜单和路由需要同步	使用后端菜单数据生成前端动态路由
Token 失效影响用户操作	请求拦截器统一处理登录态和错误提示
文章编辑字段多、校验复杂	拆分表单区域，按发布状态做分层校验

项目截图

后续替换为真实页面截图，建议包含登录页、文章列表页、文章编辑页和权限菜单页。

面试可讲点

• 后台管理系统如何设计权限菜单和动态路由。
• 通用表格组件应该抽象到什么程度，如何避免过度封装。
• Token 失效、接口错误和 Loading 状态如何统一处理。
• 内容发布流程中如何区分草稿、预览和正式发布。

后续优化

• 补充真实后台页面截图。
• 增加权限路由生成流程图。
• 补充通用表格组件的配置示例。