Nine, Blog Site API Call Example - Sowei Technology Anqi CMS

Let's analyze the pages of the blog site first, and then decompose the interfaces required 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- Show the latest articles, popular articles, recommended articles, etc.
Category Page- Show articles list by category
Tab page- Show articles list by tag
Article detail page- Show 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 the required API interfaces for each page

9.2.1 Home page

The home page is the most important page of the blog, usually containing a variety of content displays.

Main interface call:

Get article list(/api/archive/list)
```
{
 "limit": 10,
 "page": 1,
 "order": "created_time desc"
}
```
- Purpose: Get the latest article list
- Parameters: limit (number of items per page), page (page number), order (sort method)
Get recommended articles(/api/archive/list)
```
{
 "flag": "c",  // 推荐文章
 "limit": 5
}
```
- Purpose: Get the list of recommended articles
- Parameters: flag(recommendation identifier), limit(number)
Get popular articles(/api/archive/list)
```
{
 "order": "views desc",
 "limit": 5
}
```
- Purpose: Get the articles with the highest click-through rate
- Parameters: order(By view count sorting), limit(Quantity)
Get category list(/api/category/list)
```
{
 "limit": 10
}
```
- Purpose: Get all categories for navigation menu
Get tag list(/api/tag/list)
```
{
 "type": "list",
 "limit": 20
}
```
- Purpose: Get hot tags for tag cloud
Get System Settings(/api/setting/system)
- Purpose: Get the title, description, keywords and other basic information of the website
Get Home Page Settings(/api/setting/index)
- Purpose: Get the specific configuration information of the homepage
Get navigation list(/api/nav/list)
- Purpose: Get the website navigation menu
Get Banner list(/api/banner/list)
- Purpose: Get the homepage carousel image

9.2.2 Category page

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

Main interface call:

Get category details(/api/category/detail)
```
{
 "id": 1
}
```
- Purpose: Get the current category information
- Parameter: id (category ID) or filename (category alias)
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
- Parameters: categoryId (Category ID), limit (Number of items per page), page (Page number)
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)
Get System Settings(/api/setting/system)
- Purpose: Get basic website information
Get category list(/api/category/list)
- Purpose: Get all categories, used for sidebar navigation

9.2.3 Tag Page

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

Main interface call:

Get tag details(/api/tag/detail)
```
{
 "id": 1
}
```
- Purpose: Get the current tag information
- Parameters: id (tag ID) or name (tag name)
Get article list under tag(/api/tag/data/list)
```
{
 "id": 1,
 "limit": 10,
 "page": 1
}
```
- Purpose: Get the article list under the tag
- Parameters: tagId(Tag ID), limit(Quantity per page), page(Page number)
Get tag list(/api/tag/list)
```
{
 "type": "list",
 "limit": 20
}
```
- Purpose: Get popular tags for related tag recommendations
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 call:

Get article details(/api/archive/detail)
```
{
 "id": 1
}
```
- Purpose: Get article detailed content
- Parameter: id (article ID) or filename (article alias)
Get article parameters(/api/archive/params)
```
{
 "id": 1,
 "sorted": true
}
```
- Purpose: Get custom article parameters
- Parameter: id(article ID), sorted(return format)
Get previous document(/api/archive/prev)
```
{
 "id": 1
}
```
- Purpose: Get the previous article information
Get next document(/api/archive/next)
```
{
 "id": 1
}
```
- Purpose: Get the next article information
Get related articles(/api/archive/list)
```
{
 "type": "related",
 "limit": 5,
 "id": 1
}
```
- Purpose: Get other articles in the same category
- Parameters: type="related" (type of related documents), limit (quantity), id (current article)
Get Comment List(/api/comment/list)
```
{
 "archive_id": 1,
 "limit": 10,
 "page": 1
}
```
- Purpose: Retrieve article comment list
- Parameters: archive_id (article ID), limit (number of items per page), page (page number)
Check collection status(/api/favorite/check)
```
{
 "archive_id": 1
}
```
- Purpose: Check if the current user has favorited this article
- Authentication required
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 call:

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)
Get hot search(/api/archive/list)
```
{
 "order": "views desc",
 "limit": 10
}
```
- Purpose: Get popular search content
Get search suggestions(/api/archive/list)
```
{
 "q": "关键词前缀",
 "limit": 5
}
```
- Purpose: Get search suggestions
Get System Settings(/api/setting/system)
- Purpose: Get basic website information

9.2.6 About the page

Single-page content display.

Main interface call:

Get page details(/api/page/detail)
```
{
 "id": 1
}
```
- Purpose: Get single page content
- Parameter: id (page ID) or filename (page alias)
Get System Settings(/api/setting/system)
- Purpose: Get basic website information

9.2.7 User-related pages

9.2.7.1 Login Page

Main interface call:

User Login(/api/login)
```
{
 "user_name": "用户名",
 "password": "密码"
}
```
- Purpose: User Login Authentication
- Parameters: user_name (username), password (password), email (email), phone (phone number)

9.2.7.2 Registration Page

Main interface call:

User Registration(/api/register)
```
{
 "user_name": "用户名",
 "password": "密码",
 "email": "邮箱",
 "captcha": "验证码"
}
```
- Purpose: New User Registration
- Parameters: user_name (Username), password (Password), email (Email), captcha (Captcha)
Get verification code(/api/captcha)
- Use: Get image verification code
Send email verification(/api/verify/email)
```
{
 "email": "邮箱地址"
}
```
- Use: Send email verification code

9.2.7.3 Personal Center Page

Main interface call:

Get user details(/api/user/detail)
- Use: Get current user details
- Authentication required
Get user favorite list(/api/favorite/list)
```
{
 "limit": 10,
 "page": 1
}
```
- Purpose: Retrieve the list of articles favorited by the user
- Authentication required
Retrieve the list of comments made by the user(/api/comment/list)
```
{
 "user_id": 1,
 "limit": 10,
 "page": 1
}
```
- Purpose: Retrieve the comments posted by the user
- Authentication required
Update user information(/api/user/update)
```
{
 "nickname": "昵称",
 "email": "邮箱"
}
```
- Purpose: Update user information
- Authentication required
Update user avatar(/api/user/avatar)
- Purpose: Update user avatar
- Authentication required

9.3 Page Loading Process Example

For example, with the article detail page, explain the complete API call process:

9.3.1 Page Initialization

Get article details
Increase article views (via subsequent requests or server-side processing)
Get article parameters

9.3.2 Sidebar content loading

Get previous/next article
Get related article recommendations
Get the list of popular articles

9.3.3 Load the comment area

Get Comment List
If the user is logged in, get the user's collection status for the current article

9.3.4 Interactive function

Post Comment (requires authentication)
Favorite/Unfavorite (requires authentication)
Like Comment (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 needs to call multiple API interfaces to build various pages, developers can choose the appropriate interface combination according to actual needs to realize rich blog functions.