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

阶段性总结

news 2025/11/8 9:02:50

一、项目架构概览

前端请求 (Vue 3 + Element Plus)↓
页面路由 (Vue Router)↓
组件层 (Views + Components)↓
状态管理 (待引入 Pinia)↓
API调用层 (待实现 Axios)↓
后端接口 (Spring Boot 3 + MyBatis-Plus)

二、已完成功能模块

1. 基础框架架构

✅ 路由系统：完整的SPA路由配置，支持参数传递
✅ 布局组件：Header、Footer、Sidebar、Layout统一管理
✅ 响应式设计：桌面端与移动端自适应布局
✅ UI组件库：Element Plus深度集成，统一设计规范

2. 页面模块实现

认证模块

├── Login.vue           # 登录页面
│   ├── 表单验证
│   ├── 记住我功能
│   └── 路由跳转
└── Register.vue        # 注册页面├── 双重密码验证├── 条款同意校验└── 注册成功跳转

文章展示模块

├── ArticleList.vue     # 文章列表页
│   ├── 分页展示
│   ├── 分类/标签筛选
│   ├── 排序功能
│   └── URL状态同步
├── ArticleDetail.vue   # 文章详情页
│   ├── Markdown渲染
│   ├── 代码高亮
│   ├── 元数据展示
│   └── 加载状态管理
└── Home.vue           # 首页 (待实现)

通用组件

├── ArticleCard.vue     # 文章卡片组件
├── ArticleHeader.vue   # 文章头部组件
├── ArticleFooter.vue   # 文章底部组件
└── Layout.vue         # 整体布局组件

三、核心技术实现

1. 路由设计

// 路由配置结构
const routes = [{ path: '/', name: 'Home', component: Home },{ path: '/articles', name: 'ArticleList', component: ArticleList },{ path: '/article/:id', name: 'ArticleDetail', component: ArticleDetail },{ path: '/login', name: 'Login', component: Login },{ path: '/register', name: 'Register', component: Register }
]

2. 组件通信模式

// Props 传递
defineProps({ article: Object })// 事件发射
const emit = defineEmits(['update', 'delete'])// 路由参数
const route = useRoute()
const router = useRouter()

3. 状态管理策略

// 当前使用组件内状态
const articles = ref([])
const loading = ref(false)// 待引入 Pinia 进行全局状态管理

4. Markdown渲染系统

// 核心渲染流程
const compiledMarkdown = computed(() => {return renderMarkdown(article.value.content)
})// 代码高亮集成
marked.setOptions({highlight: (code, lang) => hljs.highlight(code, { language: lang }).value
})

四、数据流设计

文章列表页数据流

用户操作 (筛选/排序/分页)↓
更新URL查询参数↓
监听路由变化↓
重新加载数据↓
更新文章列表展示

文章详情页数据流

路由参数 (/article/:id)↓
加载文章数据↓
Markdown编译渲染↓
展示完整文章内容

五、UI/UX设计规范

1. 设计系统

主色调：#409EFF (Element Plus 蓝)
字体系统：系统字体栈，确保跨平台一致性
间距规范：基于8px网格系统
响应式断点：768px、992px、1200px

2. 交互模式

加载状态：骨架屏 + 加载指示器
错误处理：统一错误页面 + 重试机制
空状态：友好的空数据提示
过渡动画：页面切换和状态变化的平滑过渡

六、与后端API对接准备

1. 数据模型映射

// 前端Article模型
interface Article {id: numbertitle: stringcontent: stringsummary: stringpublishTime: stringviewCount: numbercategory: Categorytags: Tag[]author: User
}// 查询参数模型
interface ArticleQuery {keyword?: stringcategory?: stringtag?: stringpage?: numbersize?: numbersort?: string
}

2. API接口规划

// 与后端Controller对应
const api = {// 文章相关getArticles: (query: ArticleQuery) => axios.get('/api/articles', { params: query }),getArticle: (id: number) => axios.get(`/api/articles/${id}`),createArticle: (data: ArticleDTO) => axios.post('/api/articles', data),updateArticle: (id: number, data: ArticleDTO) => axios.put(`/api/articles/${id}`, data),deleteArticle: (id: number) => axios.delete(`/api/articles/${id}`),// 标签相关getTags: () => axios.get('/api/tags'),createTag: (data: Tag) => axios.post('/api/tags', data)
}