九、博客站点API调用示例

我们先分析一下博客站点有哪些页面，再拆解每一个页面所需要的接口。

9.1 博客站点页面结构分析

典型的博客站点通常包含以下页面：

9.1.1 主要页面类型

  • 首页 - 展示最新文章、热门文章、推荐文章等
  • 分类页 - 按分类展示文章列表
  • 标签页 - 按标签展示文章列表
  • 文章详情页 - 展示单篇文章的详细内容
  • 归档页 - 按时间归档展示文章
  • 搜索页 - 搜索结果页面
  • 关于页面 - 单页面内容
  • 用户相关页面 - 登录、注册、个人中心等

9.2 各页面所需API接口详解

9.2.1 首页

首页是博客最重要的页面，通常包含多种内容展示。

主要接口调用：

  1. 获取文章列表 (/api/archive/list)

    {
 "limit": 10,
 "page": 1,
 "order": "created_time desc"
}
    • 用途：获取最新文章列表
    • 参数：limit(每页数量)、page(页码)、order(排序方式)

  2. 获取推荐文章 (/api/archive/list)

    {
 "flag": "c",  // 推荐文章
 "limit": 5
}
    • 用途：获取推荐文章列表
    • 参数：flag(推荐标识)、limit(数量)

  3. 获取热门文章 (/api/archive/list)

    {
 "order": "views desc",
 "limit": 5
}
    • 用途：获取点击量最高的文章
    • 参数：order(按浏览量排序)、limit(数量)

  4. 获取分类列表 (/api/category/list)

    {
 "limit": 10
}
    • 用途：获取所有分类，用于导航菜单

  5. 获取标签列表 (/api/tag/list)

    {
 "type": "list",
 "limit": 20
}
    • 用途：获取热门标签，用于标签云

  6. 获取系统设置 (/api/setting/system)

    • 用途：获取网站标题、描述、关键词等基础信息

  7. 获取首页设置 (/api/setting/index)

    • 用途：获取首页特定配置信息

  8. 获取导航列表 (/api/nav/list)

    • 用途：获取网站导航菜单

  9. 获取Banner列表 (/api/banner/list)

    • 用途：获取首页轮播图

9.2.2 分类页面

分类页面展示特定分类下的文章列表。

主要接口调用：

  1. 获取分类详情 (/api/category/detail)

    {
 "id": 1
}
    • 用途：获取当前分类信息
    • 参数：id(分类ID) 或 filename(分类别名)

  2. 获取分类下文章列表 (/api/archive/list)

    {
 "categoryId": 1,
 "limit": 10,
 "page": 1
}
    • 用途：获取该分类下的文章列表
    • 参数：categoryId(分类ID)、limit(每页数量)、page(页码)

  3. 获取子分类列表 (/api/category/list)

    {
 "parentId": 1,
 "limit": 10
}
    • 用途：获取当前分类的子分类
    • 参数：parentId(父分类ID)

  4. 获取系统设置 (/api/setting/system)

    • 用途：获取网站基础信息

  5. 获取分类列表 (/api/category/list)

    • 用途：获取所有分类，用于侧边栏导航

9.2.3 标签页面

标签页面展示特定标签下的文章列表。

主要接口调用：

  1. 获取标签详情 (/api/tag/detail)

    {
 "id": 1
}
    • 用途：获取当前标签信息
    • 参数：id(标签ID) 或 name(标签名称)

  2. 获取标签下文章列表 (/api/tag/data/list)

    {
 "id": 1,
 "limit": 10,
 "page": 1
}
    • 用途：获取该标签下的文章列表
    • 参数：tagId(标签ID)、limit(每页数量)、page(页码)

  3. 获取标签列表 (/api/tag/list)

    {
 "type": "list",
 "limit": 20
}
    • 用途：获取热门标签，用于相关标签推荐

  4. 获取系统设置 (/api/setting/system)

    • 用途：获取网站基础信息

9.2.4 文章详情页面

文章详情页面展示单篇文章的完整内容。

主要接口调用：

  1. 获取文章详情 (/api/archive/detail)

    {
 "id": 1
}
    • 用途：获取文章详细内容
    • 参数：id(文章ID) 或 filename(文章别名)

  2. 获取文章参数 (/api/archive/params)

    {
 "id": 1,
 "sorted": true
}
    • 用途：获取文章自定义参数
    • 参数：id(文章ID)、sorted(返回格式)

  3. 获取上一篇文档 (/api/archive/prev)

    {
 "id": 1
}
    • 用途：获取上一篇文章信息

  4. 获取下一篇文档 (/api/archive/next)

    {
 "id": 1
}
    • 用途：获取下一篇文章信息

  5. 获取相关文章 (/api/archive/list)

    {
 "type": "related",
 "limit": 5,
 "id": 1
}
    • 用途：获取同分类的其他文章
    • 参数：type=“related”(相关文档类型)、limit(数量)、id(当前文章)

  6. 获取评论列表 (/api/comment/list)

    {
 "archive_id": 1,
 "limit": 10,
 "page": 1
}
    • 用途：获取文章评论列表
    • 参数：archive_id(文章ID)、limit(每页数量)、page(页码)

  7. 检查收藏状态 (/api/favorite/check)

    {
 "archive_id": 1
}
    • 用途：检查当前用户是否收藏了该文章
    • 需要认证

  8. 获取系统设置 (/api/setting/system)

    • 用途：获取网站基础信息

9.2.5 搜索页面

搜索页面展示搜索关键词相关的文章。

主要接口调用：

  1. 搜索文章列表 (/api/archive/list)

    {
 "q": "关键词",
 "limit": 10,
 "page": 1
}
    • 用途：搜索包含关键词的文章
    • 参数：q(搜索关键词)、limit(每页数量)、page(页码)

  2. 获取热门搜索 (/api/archive/list)

    {
 "order": "views desc",
 "limit": 10
}
    • 用途：获取热门搜索内容

  3. 获取搜索建议 (/api/archive/list)

    {
 "q": "关键词前缀",
 "limit": 5
}
    • 用途：获取搜索建议

  4. 获取系统设置 (/api/setting/system)

    • 用途：获取网站基础信息

9.2.6 关于页面

单页面内容展示。

主要接口调用：

  1. 获取页面详情 (/api/page/detail)

    {
 "id": 1
}
    • 用途：获取单页面内容
    • 参数：id(页面ID) 或 filename(页面别名)

  2. 获取系统设置 (/api/setting/system)

    • 用途：获取网站基础信息

9.2.7 用户相关页面

9.2.7.1 登录页面

主要接口调用：

  1. 用户登录 (/api/login) 
    
{
 "user_name": "用户名",
 "password": "密码"
}
    • 用途：用户登录认证
    • 参数：user_name(用户名)、password(密码)、email(邮箱)、phone(手机号)
9.2.7.2 注册页面

主要接口调用：

  1. 用户注册 (/api/register)

    {
 "user_name": "用户名",
 "password": "密码",
 "email": "邮箱",
 "captcha": "验证码"
}
    • 用途：新用户注册
    • 参数：user_name(用户名)、password(密码)、email(邮箱)、captcha(验证码)

  2. 获取验证码 (/api/captcha)

    • 用途：获取图形验证码

  3. 发送邮箱验证 (/api/verify/email)

    {
 "email": "邮箱地址"
}
    • 用途：发送邮箱验证码
9.2.7.3 个人中心页面

主要接口调用：

  1. 获取用户详情 (/api/user/detail)

    • 用途：获取当前用户详细信息
    • 需要认证

  2. 获取用户收藏列表 (/api/favorite/list)

    {
 "limit": 10,
 "page": 1
}
    • 用途：获取用户收藏的文章列表
    • 需要认证

  3. 获取用户评论列表 (/api/comment/list)

    {
 "user_id": 1,
 "limit": 10,
 "page": 1
}
    • 用途：获取用户发表的评论
    • 需要认证

  4. 更新用户信息 (/api/user/update)

    {
 "nickname": "昵称",
 "email": "邮箱"
}
    • 用途：更新用户信息
    • 需要认证

  5. 更新用户头像 (/api/user/avatar)

    • 用途：更新用户头像
    • 需要认证

9.3 页面加载流程示例

以文章详情页为例，说明完整的API调用流程：

9.3.1 页面初始化

  1. 获取文章详情
  2. 增加文章浏览量（通过后续请求或服务端处理）
  3. 获取文章参数

9.3.2 侧边栏内容加载

  1. 获取上一篇/下一篇文章
  2. 获取相关文章推荐
  3. 获取热门文章列表

9.3.3 评论区域加载

  1. 获取评论列表
  2. 如果用户已登录，获取用户对当前文章的收藏状态

9.3.4 交互功能

  1. 发布评论（需要认证）
  2. 收藏/取消收藏（需要认证）
  3. 评论点赞（需要认证）

9.4 常见页面组合调用

9.4.1 首页 + 分类页组合

// 并行请求多个接口
Promise.all([
  fetch('/api/archive/list', { params: { limit: 10, page: 1 } }),
  fetch('/api/category/list', { params: { limit: 10 } }),
  fetch('/api/tag/list', { params: { type: 'list', limit: 20 } }),
  fetch('/api/setting/system')
]).then(responses => {
  // 处理所有响应数据
  const [articles, categories, tags, settings] = responses;
  // 渲染页面
});

9.4.2 文章详情页完整调用

// 串行或并行调用多个接口
const articleId = 1;
Promise.all([
  fetch(`/api/archive/detail`, { params: { id: articleId } }),
  fetch(`/api/archive/params`, { params: { id: articleId } }),
  fetch(`/api/archive/prev`, { params: { id: articleId } }),
  fetch(`/api/archive/next`, { params: { id: articleId } }),
  fetch(`/api/comment/list`, { params: { archive_id: articleId, limit: 10 } }),
  fetch(`/api/setting/system`)
]).then(responses => {
  const [article, params, prev, next, comments, settings] = responses;
  // 组合数据并渲染页面
});

可以看出一个完整的博客站点需要调用多个API接口来构建各个页面，开发者可以根据实际需求选择合适的接口组合，实现丰富的博客功能。

搜外科技安企CMS
隐私权 条款 粤ICP备2024356999号 © 2020-2025 深圳市搜外科技有限公司 All Rights Reserved, Created By 安企内容管理系统(AnqiCMS)