# blogNav

**Repository Path**: HhxtoN/blog-nav

## Basic Information

- **Project Name**: blogNav
- **Description**: BlogNav前端页面
前端UI通过AI优化ing
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-30
- **Last Updated**: 2026-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: scss, Vue, TypeScript, HTML

## README

# blog-nav

一个基于 Vue 3 + TypeScript + Vite 的博客前端项目，提供登录、博客列表、文章详情、富文本写作、评论、搜索和阅读历史等功能。

从接口命名和交互方式看，这个仓库是后端仓库 `blog-nav-go` 的配套前端。

## 特性

- Vue 3 + TypeScript + Vite
- 基于 Pinia 的用户与搜索结果状态管理
- 基于 Vue Router 的页面路由与登录守卫
- 基于 Axios 的统一请求封装
- 集成 Layui Vue 组件库
- 集成 WangEditor 富文本编辑器
- 支持文章发布、分类与标签
- 支持文章搜索、评论、点赞、阅读历史

## 技术栈

- Vue 3
- TypeScript
- Vite 5
- Vue Router 4
- Pinia
- Axios
- Layui Vue
- WangEditor
- Sass

## 项目定位

这个项目不是通用后台模板，而是一个偏内容创作和文章阅读场景的博客前端。  
整体功能链路比较完整：

- 登录 / 注册
- 文章列表浏览
- 分类筛选和搜索
- 文章详情查看
- 评论互动
- 富文本写作发布
- 阅读历史查看

## 页面结构

当前路由主要包括：

- `/login`：登录 / 注册页
- `/bloglist`：文章列表页
- `/editor`：文章编辑页
- `/page/:blogId`：文章详情页
- `/searchResult`：搜索结果页
- `/history`：阅读历史页

对应实现位于：

- `src/views/Login`
- `src/views/DocumentList`
- `src/views/DocumentEdit`
- `src/views/DocumentPage`
- `src/views/SearchResult`
- `src/views/DocumentHistory`

## 核心能力

### 1. 登录与路由守卫

项目通过 `localStorage` 保存 `token`，并在路由层做基础登录控制：

- 未登录访问非登录页时跳转 `/login`
- 已登录访问 `/login` 时跳回 `/bloglist`
- 访问根路径 `/` 时根据登录态自动重定向

相关文件：

- `src/router/index.ts`
- `src/store/user.ts`

### 2. 统一请求封装

项目提供了两套 Axios 实例：

- `src/api/request2.ts`
  - 默认 `content-type: application/json`
- `src/api/request3.ts`
  - 默认 `content-type: application/x-www-form-urlencoded`

两者都会：

- 自动带上本地 `token`
- 统一处理登录过期
- 统一处理错误提示

### 3. 文章列表与搜索

列表页支持：

- 获取文章列表
- 获取分类列表
- 按分类筛选

顶部 Header 支持三种搜索模式：

- 标题 / 正文搜索
- 标签搜索
- 分类搜索

搜索结果会写入 Pinia，再统一跳转到结果页展示。

相关文件：

- `src/views/DocumentList/DocumentList.vue`
- `src/components/Header/Header.vue`
- `src/store/result.ts`

### 4. 文章详情与互动

文章详情页支持：

- 获取文章详情
- 获取评论
- 发布评论
- 点赞文章
- 增加阅读历史
- 更新文章 UV

相关文件：

- `src/views/DocumentPage/DocumentPage.vue`
- `src/api/views/DocumentPage/index.ts`

### 5. 富文本写作

编辑页内置 WangEditor，用于发布博客内容，并支持：

- 标题输入
- 标签输入
- 分类选择
- 正文富文本编辑
- 发布后跳转文章详情页

相关文件：

- `src/views/DocumentEdit/DocumentEdit.vue`
- `src/components/WangMark.vue`

### 6. 阅读历史

历史页会按时间整理最近阅读过的文章，并以时间线方式展示。

相关文件：

- `src/views/DocumentHistory/DocumentHistory.vue`

## 项目结构

```text
.
├─ public
├─ src
│  ├─ api             # 请求封装与接口定义
│  ├─ assets          # 静态资源
│  ├─ components      # 公共组件（Header、Comment、WangMark）
│  ├─ plugins         # 插件封装
│  ├─ router          # 路由配置
│  ├─ store           # Pinia 状态管理
│  ├─ utils           # 工具方法、通知、常量
│  └─ views           # 页面级视图
├─ .env               # 本地开发环境变量
├─ vite.config.ts     # Vite 配置与代理
└─ package.json
```

## 环境变量

项目当前通过 `.env` 配置本地开发环境：

```env
VITE_API_URL=http://localhost:8080/
VITE_HOST=localhost
```

说明：

- `VITE_API_URL` 用于 Vite 代理后端服务
- `VITE_HOST` 用于本地 dev server 启动地址

## 快速开始

### 环境要求

- Node.js 18+
- npm 9+

### 1. 安装依赖

```bash
npm install
```

### 2. 配置环境变量

根据你的后端地址调整 `.env`：

```env
VITE_API_URL=http://localhost:8080/
VITE_HOST=localhost
```

如果后端是 `blog-nav-go`，默认本地端口 `8080` 可以直接联调。

### 3. 启动开发环境

```bash
npm run dev
```

### 4. 打包

```bash
npm run build
```

### 5. 本地预览

```bash
npm run preview
```

## 接口对接说明

前端所有请求默认走 `/api` 代理，因此开发时无需手动写完整后端地址。

当前已对接的主要接口包括：

- `/login/EmailLogin`
- `/login/EmailRegister`
- `/login/loginOut`
- `/user/getUserInfo`
- `/blog/list`
- `/blog/type/list`
- `/blog/type/listAll`
- `/blog/submit`
- `/blog/getBlogById`
- `/blog/searchByContent`
- `/blog/searchByTag`
- `/blog/searchByType`
- `/blog/support`
- `/comment/send`
- `/comment/get`
- `/blog/history/addHistory`
- `/blog/history/getUserHistory`
- `/blog/uv/updateUvByDocId`

从接口路径判断，前后端联调目标应为 `blog-nav-go` 项目。

## 当前设计亮点

- 页面覆盖博客前台的核心浏览与创作流程
- Header 集成搜索、导航、用户操作，交互链路完整
- 请求层统一封装了鉴权与异常提示
- 编辑页、详情页、历史页都做了相对完整的页面设计
- 搜索结果通过全局状态管理跨页面共享，交互直观

## 当前局限

### 1. 接口强依赖后端返回结构

前端对 `code/msg/data` 格式和部分旧接口命名耦合较强，后端协议变化时需要同步修改。

### 2. 局部代码仍偏宽松

部分页面仍大量使用 `any`，TypeScript 约束还不够完整，后续可以继续补 DTO 类型。

## 适用场景

- 个人博客前端
- 内容站 / 文章导航站前端
- Vue 3 + Vite + Pinia + Axios 的实战项目
- 与 `blog-nav-go` 配套的前端界面

## License

请以仓库实际 License 或平台仓库声明为准。