Nine, Example of Blog Site API Calls

Let's analyze what pages the blog site has, and then decompose the interfaces needed for each page.

9.1 Blog Site Page Structure Analysis

Typical blog sites usually contain the following pages:

9.1.1 Main Page Types

  • Home Page- Display the latest articles, popular articles, recommended articles, etc.
  • Category Page- Display the list of articles by category
  • Tab Page- Display the list of articles by tag
  • Article details page- Display the detailed content of a single article
  • Archive page- Display articles by time archive
  • Search page- Search results page
  • About page- Single page content
  • User-related pages- Login, registration, personal center, etc.

9.2 Detailed Description of APIs Required for Each Page

9.2.1 Home Page

The homepage is the most important page of the blog, usually containing various content displays.

Main interface calls:

  1. Get article list(/api/archive/list)

    {
 "limit": 10,
 "page": 1,
 "order": "created_time desc"
}
    • Purpose: Get the latest article list
    • Parameter: limit(per page number), page(page number), order(sort method)

  2. Get recommended articles(/api/archive/list)

    {
 "flag": "c",  // 推荐文章
 "limit": 5
}
    • Usage: Get the list of recommended articles
    • Parameters: flag(recommended tag), limit(amount)

  3. Get popular articles(/api/archive/list)

    {
 "order": "views desc",
 "limit": 5
}
    • Use: Get the articles with the highest number of clicks
    • Parameter: order(By view count sorting), limit(Quantity)

  4. Get category list(/api/category/list)

    {
 "limit": 10
}
    • Purpose: Get all categories for navigation menu

  5. Get tag list(/api/tag/list)

    {
 "type": "list",
 "limit": 20
}
    • Purpose: Get popular tags for tag cloud

  6. Get system settings(/api/setting/system)

    • Purpose: Get basic information such as website title, description, keywords, etc.

  7. Get home page settings(/api/setting/index)

    • Purpose: Retrieve specific configuration information on the homepage

  8. Retrieve navigation list(/api/nav/list)

    • Purpose: Retrieve website navigation menu

  9. Retrieve Banner list(/api/banner/list)

    • Purpose: Retrieve homepage carousel images

9.2.2 Category Page

Category page displays the list of articles under a specific category.

Main interface calls:

  1. Get category details(/api/category/detail)

    {
 "id": 1
}
    • Purpose: Get current category information
    • Parameter: id (category ID) or filename (category alias)

  2. Get the list of articles under the category(/api/archive/list)

    {
 "categoryId": 1,
 "limit": 10,
 "page": 1
}
    • Purpose: Get the list of articles under the category
    • Parameter: categoryId (category ID), limit (number of items per page), page (page number)

  3. Get the list of subcategories(/api/category/list)

    {
 "parentId": 1,
 "limit": 10
}
    • Purpose: Get the subcategories of the current category
    • Parameter: parentId (Parent Category ID)

  4. Get system settings(/api/setting/system)

    • Purpose: Get basic website information

  5. Get category list(/api/category/list)

    • Purpose: Get all categories, used for sidebar navigation

9.2.3 Tag Page

Display the list of articles under a specific tag on the tag page.

Main interface calls:

  1. Get tag details(/api/tag/detail)

    {
 "id": 1
}
    • Purpose: Get the current tag information
    • Parameters: id (tag ID) or name (tag name)

  2. Retrieve article list under the tag(/api/tag/data/list)

    {
 "id": 1,
 "limit": 10,
 "page": 1
}
    • Purpose: Retrieve article list under the tag
    • Parameters: tagId(tag ID), limit(number of articles per page), page(page number)

  3. Get tag list(/api/tag/list)

    {
 "type": "list",
 "limit": 20
}
    • Purpose: Obtain popular tags for related tag recommendations

  4. Get system settings(/api/setting/system)

    • Purpose: Get basic website information

9.2.4 Article Detail Page

The article detail page displays the complete content of a single article.

Main interface calls:

  1. Obtain article details(/api/archive/detail)

    {
 "id": 1
}
    • Use: Get detailed content of the article
    • Parameter: id (article ID) or filename (article alias)

  2. Get article parameters(/api/archive/params)

    {
 "id": 1,
 "sorted": true
}
    • Use: Get custom parameters of the article
    • Parameter: id(article ID), sorted(return format)

  3. Get the previous document(/api/archive/prev)

    {
 "id": 1
}
    • Purpose: Get information about the previous article

  4. Get the next document(/api/archive/next)

    {
 "id": 1
}
    • Purpose: Get information about the next article

  5. Get related articles(/api/archive/list)

    {
 "type": "related",
 "limit": 5,
 "id": 1
}
    • Purpose: Get other articles in the same category
    • Parameter: type=“related”(document type related), limit(数量), id(current article)

  6. Get comment list(/api/comment/list)

    {
 "archive_id": 1,
 "limit": 10,
 "page": 1
}
    • Purpose: Get article comment list
    • Parameters: archive_id(article ID), limit(number of comments per page), page(page number)

  7. Check favorite status(/api/favorite/check)

    {
 "archive_id": 1
}
    • Purpose: Check if the current user has favorited the article.
    • Authentication required.

  8. Get system settings(/api/setting/system)

    • Purpose: Get basic website information

9.2.5 Search Page.

The search page displays articles related to the search keywords.

Main interface calls:

  1. Search article list.(/api/archive/list)

    {
 "q": "关键词",
 "limit": 10,
 "page": 1
}
    • Purpose: Search articles containing keywords
    • Parameters: q(search keywords), limit(number of items per page), page(page number)

  2. Get popular searches(/api/archive/list)

    {
 "order": "views desc",
 "limit": 10
}
    • Purpose: Get popular search content

  3. Get search suggestions(/api/archive/list)

    {
 "q": "关键词前缀",
 "limit": 5
}
    • Purpose: Get search suggestions

  4. Get system settings(/api/setting/system)

    • Purpose: Get basic website information

9.2.6 About Page

Single page content display.

Main interface calls:

  1. Get page details(/api/page/detail)

    {
 "id": 1
}
    • Purpose: Get the content of a single page
    • Parameters: id (page ID) or filename (page alias)

  2. Get system settings(/api/setting/system)

    • Purpose: Get basic website information

9.2.7 User-related pages

Login Page 9.2.7.1

Main interface calls:

  1. User Login(/api/login)
    
{
 "user_name": "用户名",
 "password": "密码"
}
    • Purpose: User Authentication Login
    • Parameter: user_name(User Name), password(Password), email(Email), phone(Phone Number)
9.2.7.2 Registration Page

Main interface calls:

  1. User Registration(/api/register)

    {
 "user_name": "用户名",
 "password": "密码",
 "email": "邮箱",
 "captcha": "验证码"
}
    • Purpose: New User Registration
    • Parameters: user_name (username), password (password), email (email), captcha (captcha)

  2. Get captcha(/api/captcha)

    • Purpose: Obtain graphic captcha

  3. Send email verification(/api/verify/email)

    {
 "email": "邮箱地址"
}
    • Purpose: Send email verification code
9.2.7.3 Personal Center Page

Main interface calls:

  1. Get user details(/api/user/detail)

    • Purpose: Get current user's detailed information
    • Authentication required.

  2. Get user's favorite list(/api/favorite/list)

    {
 "limit": 10,
 "page": 1
}
    • Purpose: Get user's favorite articles list
    • Authentication required.

  3. Get user's comment list(/api/comment/list)

    {
 "user_id": 1,
 "limit": 10,
 "page": 1
}
    • Purpose: Get user's published comments
    • Authentication required.

  4. Update User Information(/api/user/update)

    {
 "nickname": "昵称",
 "email": "邮箱"
}
    • Purpose: Update User Information
    • Authentication required.

  5. Update User Avatar(/api/user/avatar)

    • Purpose: Update User Avatar
    • Authentication required.

9.3 Example of Page Loading Process

For example, take the article detail page to illustrate the complete API call process:

9.3.1 Page Initialization

  1. Obtain article details
  2. Increase article views (via subsequent requests or server-side processing)
  3. Get article parameters

9.3.2 Sidebar content loading

  1. Get previous/next article
  2. Get recommended related articles
  3. Get popular article list

9.3.3 Comment area loading

  1. Get comment list
  2. If the user is logged in, get the user's favorite status for the current article

9.3.4 Interactive features

  1. Post a comment (requires authentication)
  2. Favorite/Unfavorite (requires authentication)
  3. Comment Like (requires authentication)

9.4 Common Page Combination Calls

9.4.1 Home + Category Page Combination

// 并行请求多个接口
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 Full Call of Article Detail Page

// 串行或并行调用多个接口
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;
  // 组合数据并渲染页面
});

It can be seen that a complete blog site requires calling multiple API interfaces to build various pages, and developers can choose the appropriate interface combinations based on actual needs to realize rich blog features.

Search Outside Technology Security CMS
Privacy Terms 粤ICP备2024356999号 © 2020-2025 Shenzhen Souwai Technology Co., Ltd. All Rights Reserved, Created ByAnqi Content Management System (AnqiCMS)