文章管理系统 - 前端

一个简单的博客网站前端，支持文章发布、阅读和管理功能。需要配合后端API使用。

项目结构

test-site/
├── scripts/                   # JavaScript文件
│   ├── articles.js           # 首页文章列表
│   ├── blog.js              # 博客详情页
│   ├── write.js             # 文章编写页
│   └── main.js              # 通用脚本
├── styles/                   # CSS样式
├── images/                   # 图片资源
├── index.html               # 首页
├── blog.html               # 博客详情页
└── write.html              # 文章编写页

功能特性

• ✍️ Markdown编辑器: 支持实时预览的Markdown写作
• 📱 响应式设计: 适配桌面和移动设备
• 🔍 文章管理: 创建、阅读、浏览文章
• 🌐 API集成: 通过RESTful API与后端通信
• � 静态部署: 可部署到任何静态托管服务

快速开始

1. 准备后端API

确保后端API服务正在运行在 http://localhost:8000

后端项目请参考 backend/README.md 或独立的后端仓库

2. 访问前端

直接用浏览器打开HTML文件：

• 首页: index.html - 查看文章列表
• 写作页: write.html - 创建新文章
• 阅读页: blog.html?id=1 - 阅读特定文章

3. 配置API地址

如需修改后端API地址，请编辑以下文件中的API URL：

• scripts/articles.js
• scripts/blog.js
• scripts/write.js
• scripts/config.js

API接口

获取所有文章

GET /api/articles

创建文章

POST /api/articles
Content-Type: application/json

{
  "content": "# 文章标题\n\n文章内容...",
  "author": "作者名称"
}

获取单篇文章

GET /api/articles/{id}

使用说明

写作文章

1. 访问 write.html
2. 在左侧编辑器中用Markdown语法编写文章
3. 右侧会实时预览渲染效果
4. 第一行会自动提取为文章标题
5. 点击"发布文章"按钮保存并跳转到文章详情页
6. 支持图片上传到图床：

• 点击“添加图片”按钮选择图片，自动上传到后端（后端再转存到 PicGo）并将外链以 Markdown 插入
• 可直接在编辑区粘贴或拖拽图片，效果同上
• 可上传封面图（页面顶部上传按钮），封面不会插入正文，只在发布确认时预览

阅读文章

1. 在 index.html 首页查看所有文章列表
2. 点击任意文章进入详情页阅读
3. 文章支持Markdown格式的富文本显示

技术栈

• HTML5/CSS3: 页面结构和样式
• JavaScript ES6+: 交互逻辑
• Marked.js: Markdown解析
• Font Awesome: 图标库
• Fetch API: HTTP请求处理

开发计划

• 用户认证系统
• 文章编辑功能
• 文章删除功能
• 文章分类和标签
• 搜索功能
• 评论系统
• 数据库支持（PostgreSQL/MySQL）

注意事项

1. 确保后端API服务正常运行再访问前端页面
2. 默认API地址为 http://localhost:8000，可在JavaScript文件中修改
   • 推荐通过 scripts/config.js 设置：
     • window.API_BASE = 'http://localhost:8000'
     • 可选 window.PICGO_API_KEY = 'chv_xxx'（一般不建议前端暴露）
3. 支持现代浏览器（需要支持ES6+和Fetch API）
4. 可部署到任何静态网站托管服务（Netlify, Vercel, GitHub Pages等）

故障排除

跨域问题

如果遇到CORS错误，确保：

• 后端API服务正常运行
• 后端已配置CORS支持
• 浏览器支持fetch API

API连接失败

检查以下项目：

1. 后端服务是否在 http://localhost:8000 运行
2. 网络连接是否正常
3. 浏览器控制台是否有错误信息

静态文件部署

部署到静态托管时，需要：

1. 修改JavaScript中的API地址为生产环境地址
2. 确保后端API支持跨域访问
3. 配置正确的路由规则（如需要）