---

MyBlog Frontend (博客前端项目)

一个基于 Vue.js 开发的个人博客前端项目。项目实现了博客的核心功能，包括文章浏览、详情阅读、评论互动、用户认证（登录/注册）以及文章发布等功能。既支持对接真实后端 API，也内置了 Mock 数据用于独立开发测试。

功能特性

• 用户系统

• 用户登录 (Login.vue) 与 注册 (Register.vue)

• 基于 Token 的身份认证与状态管理 (stores/auth.js)

• 博客浏览

• 博客列表/目录展示 (BlogCatalogue.vue)

• 侧边栏标签导航 (TagSideBar.vue)

• 文章详情页阅读 (BlogDetail.vue)

• 内容创作

• 文章撰写与编辑表单 (BlogForm.vue)

• 互动

• 评论区功能 (CommentSection.vue)

• 架构

• 封装统一的 Axios 请求拦截与响应处理

• 支持 Mock.js 模拟数据，方便前后端分离开发

目录结构说明

src
├── components/          # 公共 UI 组件
│   ├── BlogCard.vue     # 博客卡片组件（用于列表展示）
│   ├── CommentSection.vue # 评论区组件
│   ├── FooterBar.vue    # 底部栏
│   ├── NavigationBar.vue # 顶部导航栏
│   └── TagSideBar.vue   # 侧边栏（标签/分类）
│
├── layout/              # 布局文件
│   └── ContentLayout.vue # 通用内容布局容器
│
├── mock/                # 数据模拟
│   └── mock.js          # Mock 规则定义
│
├── pages/               # 页面视图 (路由组件)
│   ├── About.vue        # 关于页面
│   ├── BlogCatalogue.vue # 博客目录/首页
│   ├── BlogDetail.vue   # 博客详情页
│   ├── BlogForm.vue     # 写博客/编辑页面
│   ├── Login.vue        # 登录页
│   └── Register.vue     # 注册页
│
├── router/              # 路由配置
│   └── index.js         # 路由定义与守卫
│
├── services/            # API 服务
│   ├── api.js           # 接口统一管理
│   └── axios.js         # Axios 封装 (拦截器等)
│
├── stores/              # 全局状态管理
│   └── auth.js          # 用户认证状态 (User/Token)
│
├── App.vue              # 根组件
└── main.js              # 入口文件

部署

1. 环境准备

确保本地环境已安装 Node.js (推荐 v16+)。

2. 安装依赖

npm install
# 或者
yarn install

3. 开发模式运行

启动本地开发服务器，支持热重载：

npm run dev
# 或者
npm run serve

访问地址通常为: http://localhost:8080 或 http://localhost:5173 (取决于你是用 Vite 还是 Webpack/Vue-CLI)。

4. 构建生产版本

npm run build

接口配置

关于 Mock 数据

项目默认包含 mock/mock.js。如果在开发阶段没有后端服务，就在 main.js 中引入该文件以拦截请求并返回模拟数据。