GoBlog 简易前端项目 (GoBlog_web)

这是一个基于纯 HTML、JavaScript 构建的轻量级博客前端项目。本项目严格遵循“无冗余 CSS 装饰”的设计原则，使用原生 HTML 语义化标签构建响应式页面结构，并通过原生 Fetch API 实现与后端的接口交互。

目录结构

d:\开源项目\GoBlog\GoBlog_web\
├── js/                     # 公共脚本目录
│   └── api.js              # Fetch 请求封装及 Token 状态管理
├── user/                   # 用户相关页面
│   ├── login.html          # 登录与注册页面
│   └── dashboard.html      # 用户个人控制台（资料修改、文章管理）
├── index.html              # 网站首页（文章列表、轮播图、友链展示）
├── article_detail.html     # 文章详情页（阅读文章、评论、点赞）
├── admin_dashboard.html    # 管理员控制台（站点配置、轮播图管理、用户角色管理）
├── ai_chat.html            # AI 助手对话页面
├── user_info.html          # 他人用户主页
├── package.json            # 依赖配置 (开发环境使用 vite 启动)
└── README.md               # 项目说明文档

技术选型与规范

1. 零框架，纯原生: 不使用任何前端框架 (如 React/Vue) 和 CSS 库 (如 Tailwind/Bootstrap)。完全依赖浏览器默认样式及语义化标签 (<article>, <section>, <details>, <fieldset>) 实现界面布局。
2. 异步通信: 使用 async/await 和原生 fetch 处理所有的 API 请求。
3. 状态管理: 使用 localStorage 缓存鉴权 Token 和 RefreshToken。接口封装 api.js 统一拦截 401/403 状态并自动重定向至登录页。
4. 注释规范: 代码中所有核心功能函数均严格按照以下规范进行注释：

   // 函数名 简短描述函数作用
   // 参数: 参数名 - 参数说明（简洁）
   // 返回: 返回值 - 返回值说明（简洁）  
   // 说明: 关键逻辑点，用逗号分隔多个要点

核心功能说明

1. 用户认证模块

• 文件: user/login.html
• 特性: 支持用户名/邮箱双方式登录，并集成了图形验证码。注册流程强制邮箱验证码校验。成功登录后在本地缓存鉴权凭证。

2. 首页展示模块

• 文件: index.html
• 特性: 展示轮播图、动态拉取站点配置信息。支持分页加载最新文章，以及按照关键词检索文章。底部展示友情链接与推荐。

3. 文章阅读与互动模块

• 文件: article_detail.html
• 特性: 渲染 Markdown 转换后的文章内容，实现 30 秒自动发送浏览打点。提供一键点赞、发表多级评论（含回复）功能。

4. 个人控制台

• 文件: user/dashboard.html
• 特性: 修改个人资料（昵称、简介、头像链接）。集成 Markdown/富文本提交入口以快速发布文章，并提供个人已发布文章的列表管理与删除功能。

5. 后台管理模块

• 文件: admin_dashboard.html
• 特性: （仅限管理员权限）允许修改站点基础信息（如标题、备案号），实现轮播图的增删查改（CRUD），并能够强制更改其他用户的权限角色（如提升为管理员或封禁）。

6. AI 助手

• 文件: ai_chat.html
• 特性: 基于 /api/chat 接口，实现与后端 AI 模块的流式对话。支持上下文维持（记录当前页面生命周期内的问答）。

启动与部署

方式一: Node.js (Vite) 启动

在项目根目录安装依赖并使用 vite 快速启动本地服务器环境：

npm install
npm run dev

方式二: Nginx / Caddy 静态部署

由于本项目是纯静态文件，您可以直接将根目录配置为静态资源服务的根目录：

server {
    listen 80;
    server_name yourdomain.com;
    
    root /path/to/GoBlog_web;
    index index.html;

    # 配置反向代理，解决跨域问题
    location /api/ {
        proxy_pass http://localhost:8080/api/;
    }
}

注意事项

• 跨域问题: 如果后端和前端不在同一个端口运行，请确保后端已开启 CORS，或通过前端的反向代理（如 Vite 的 proxy 配置或 Nginx）进行请求转发。目前所有的接口均统一请求 /api 路径。
• UI展示: 界面未采用任何美化设计，所有元素均以最原始的面貌呈现，注重功能性与可访问性。