---
url: https://www.lingpapl.cn/projects/article-admin.md
description: 基于 Vue3、TypeScript、Element Plus 和 Node.js 的文章内容管理系统项目复盘。
---

# 文章管理系统

![文章管理系统项目截图占位](/images/project-placeholder.svg)

## 项目概览

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

## 项目背景

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

## 技术栈

* 前端：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 状态如何统一处理。
* 内容发布流程中如何区分草稿、预览和正式发布。

## 后续优化

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