Let's analyze the pages of the mall site first, and then decompose the interfaces required for each page.
10.1 Mall Site Page Structure Analysis
Typical mall sites usually include the following pages:
10.1.1 Main Page Types
- Home Page- Display the latest products, hot products, recommended products, promotional activities, etc.
- Product Category Page- Display product list by category
- Product Details Page- Display detailed information of a single product
- Shopping Cart Page- User's shopping cart page for selected items
- Order Confirmation Page- Page to confirm order information
- Order Payment Page- Payment completed page
- Personal center page- User personal information and order management
- Order details page- View detailed information of a single order
- My Order Page- User Order List
- Shipping Address Page- Manage User Shipping Addresses
- Product Search Page- Search Product Results Page
- Promotion Activities Page- Coupon, flash sale and other promotion activities pages
- User-related pages- Login, registration, personal center, etc.
10.2 Detailed Description of Required API Interfaces for Each Page
10.2.1 Home Page
The mall homepage is the most important page, usually containing a variety of content displays.
Main interface calls:
Get product list(
/api/archive/list){ "moduleId": 2, // 商品模块ID "limit": 10, "page": 1, "order": "created_time desc" }- Purpose: Get the latest product list
- Parameters: moduleId=2(Product module ID is 2), limit(Items per page), page(Page number), order(Order method)
Get Recommended Products(
/api/archive/list){ "moduleId": 2, // 商品模块ID "flag": "c", // 推荐商品 "limit": 5 }- Purpose: Get the list of recommended products
- Parameters: flag(recommended tag), limit(amount)
Get Hot Products(
/api/archive/list){ "moduleId": 2, // 商品模块ID "order": "views desc", "limit": 5 }- Purpose: Get the products with the highest click-through rate
- Parameter: order(By view count sorting), limit(Quantity)
Get product category list(
/api/category/list){ "moduleId": 2, // 商品模块ID "limit": 10 }- Use: Get all product categories for navigation menu
Get product tag list(
/api/tag/list){ "type": "list", "limit": 20 }- Purpose: Get popular tags for tag cloud
Get system settings(
/api/setting/system)- Use: Get mall title, description, keywords, etc. basic information
Get home page settings(
/api/setting/index)- Purpose: Retrieve specific configuration information on the homepage
Retrieve navigation list(
/api/nav/list)- Purpose: Retrieve website navigation menu
Retrieve Banner list(
/api/banner/list)- Purpose: Retrieve homepage carousel images
Get promotional activities information(
/api/setting/system)- Purpose: Get promotion activity configuration information
Get coupon list(
/api/coupon/codes){ "limit": 5 }- Purpose: Get available coupon list
10.2.2 Product Category Page
Product Category Page displays the product list under a specific category.
Main interface calls:
Get category details(
/api/category/detail){ "id": 1 }- Purpose: Get current category information
- Parameter: id (category ID) or filename (category alias)
Get product list under category(
/api/archive/list){ "moduleId": 2, // 商品模块ID "categoryId": 1, "limit": 10, "page": 1 }- Usage: Get product list under the category
- Parameter: 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 product category list(
/api/category/list)- Purpose: Get all categories, used for sidebar navigation
Get filtering conditions(
/api/archive/list){ "moduleId": 2, // 商品模块ID "categoryId": 1, "type": "filter" }- Usage: Get filtering conditions under the current category
10.2.3 Product details page
Product detail page displays complete information about a single product.
Main interface calls:
Get product details(
/api/archive/detail){ "id": 1 }- Purpose: Get detailed content of the product
- Parameter: id(Product ID) or filename(Product Alias)
Get product parameters(
/api/archive/params){ "id": 1, "sorted": true }- Purpose: Get product custom parameters
- Parameter: id(product ID), sorted(return format)
Get product SKU information(
/api/archive/sku){ "id": 1 }- Purpose: Get product SKU specification information
- Parameter: id(product ID)
Get the previous product(
/api/archive/prev){ "id": 1 }- Purpose: Get the information of the previous product
Get the next product(
/api/archive/next){ "id": 1 }- Purpose: Get the information of the next product
Get related products(
/api/archive/list){ "type": "related", "limit": 5, "id": 1 }- Purpose: Get other products in the same category
- Parameters: type="related" (type of related products), limit (quantity), id (current product)
Get product comment list(
/api/comment/list){ "archive_id": 1, "limit": 10, "page": 1 }- Purpose: Get product comment list
- Parameters: archive_id(Product ID), limit(Items per page), page(Page number)
Check favorite status(
/api/favorite/check){ "archive_id": 1 }- Use: Check if the current user has favorited the product
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
Get the number of items in the shopping cart(
/api/cart/list)- Use: Get the number of items in the current user's shopping cart
- Authentication required.
10.2.4 Shopping Cart Page
Display the user's selected products on the shopping cart page.
Main interface calls:
Get Shopping Cart List(
/api/cart/list)- Purpose: Get the current user's shopping cart product list.
- Authentication required.
Update Shopping Cart Product Quantity(
/api/cart/update){ "id": 1, "quantity": 2 }- Purpose: Update the quantity of a specific product in the shopping cart.
- Parameters: id(Cart item ID), quantity(Quantity)
- Authentication required.
Remove Product from Shopping Cart(
/api/cart/remove){ "id": 1 }- Purpose: Remove a product from the shopping cart
- Parameters: id(Cart item ID)
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
Get coupon list(
/api/coupon/codes)- Purpose: Get available coupon list
- Authentication required.
Order Confirmation Page
The Order Confirmation Page is used to confirm order information.
Main interface calls:
Get Shopping Cart List(
/api/cart/list)- Purpose: Get the current user's shopping cart product list.
- Authentication required.
Get Shipping Address List(
/api/order/addresses)- Purpose: Get the user's shipping address list
- Authentication required.
Get Default Shipping Address(
/api/order/address)- Purpose: Get the default delivery address of the user
- Authentication required.
Get Product Settlement Information(
/api/orders/checkout){ "cart_ids": [1, 2, 3] }- Purpose: Get the settlement information of the product (price, shipping cost, etc.)
- Parameter: cart_ids (list of shopping cart item IDs)
- Authentication required.
Get coupon list(
/api/coupon/codes)- Purpose: Get available coupon list
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
10.2.6 Payment Order Page
The Payment Order Page is used to complete the order payment.
Main interface calls:
Create Order(
/api/order/create){ "address_id": 1, "coupon_id": 2, "remark": "订单备注", "cart_ids": [1, 2, 3] }- Purpose: Create a new order
- Parameters: address_id (Shipping Address ID), coupon_id (Coupon ID), remark (Remark), cart_ids (Cart Item ID List)
- Authentication required.
Get Order Details(
/api/order/detail){ "order_id": "202211232209080046" }- Purpose: Get order details
- Parameter: order_id(Order ID)
- Authentication required.
Order Payment(
/api/order/payment){ "order_id": "202211232209080046", "pay_way": "alipay" }- Purpose: Initiate order payment
- Parameters: id(order ID), payment_method(payment method)
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
10.2.7 Personal Center Page
The personal center page displays the user's personal information and order management.
Main interface calls:
Get user details(
/api/user/detail)- Purpose: Get current user's detailed information
- Authentication required.
Retrieve the user's order list(
/api/orders){ "limit": 5, "page": 1 }- Purpose: Retrieve the user's order list
- Parameter: limit (number of items per page), page (page number)
- Authentication required.
Get user's favorite list(
/api/favorite/list){ "limit": 5, "page": 1 }- Usage: Get the list of products favorited by the user
- Parameter: limit (number of items per page), page (page number)
- Authentication required.
Get User Wish List(
/api/wishlist)- Usage: Get the user's wish list
- Authentication required.
Get the list of the user's shipping addresses(
/api/order/addresses)- Purpose: Get the list of user's shipping addresses
- Authentication required.
Get user's comment list(
/api/comment/list){ "user_id": 1, "limit": 5, "page": 1 }- Purpose: Get user's published comments
- Parameters: user_id (User ID), limit (number of items per page), page (page number)
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
10.2.8 Order Details Page
Order Details Page displays the detailed information of a single order.
Main interface calls:
Get Order Details(
/api/order/detail){ "order_id": "202211232209080046" }- Purpose: Get order detailed information
- Parameter: order_id(Order ID)
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
Get order rating(
/api/review/list){ "order_id": "202211232209080046" }- Purpose: Get product reviews of the order
- Parameter: order_id(Order ID)
- Authentication required.
10.2.9 My Order Page
My Order Page displays all the user's orders.
Main interface calls:
Retrieve the user's order list(
/api/orders){ "limit": 10, "page": 1, "status": "paid" }- Purpose: Retrieve the user's order list
- Parameters: limit(per page number), page(page number), status(order status)
- Authentication required.
Cancel Order(
/api/order/cancel){ "order_id": "202211232209080046" }- Purpose: Cancel order
- Parameter: order_id(Order ID)
- Authentication required.
Complete Order(
/api/order/finished){ "order_id": "202211232209080046" }- Purpose: Complete order
- Parameter: order_id(Order ID)
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
10.2.10 Receive Address Page
The Receive Address Page is used to manage the user's shipping address.
Main interface calls:
Get Shipping Address List(
/api/order/addresses)- Purpose: Get the list of user's shipping addresses
- Authentication required.
Save Receive Address(
/api/order/address){ "name": "收货人姓名", "phone": "收货人电话", "province": "省份", "city": "城市", "country": "区域", "address": "详细地址", "is_default": 1 }- Purpose: Save Receive Address
- Parameters: name (Name), phone (Phone), province (Province), city (City), country (Region), address (Detailed Address), is_default (Is Default)
- Authentication required.
Get system settings(
/api/setting/system)- Purpose: Get basic website information
10.2.11 Product Search Page
Product Search Page displays products related to search keywords.
Main interface calls:
Search Product List(
/api/archive/list){ "moduleId": 2, // 商品模块ID "q": "关键词", "limit": 10, "page": 1 }- Usage: Search for products containing keywords.
- Parameters: q(search keywords), limit(number of items per page), page(page number)
Get popular searches(
/api/archive/list){ "moduleId": 2, // 商品模块ID "order": "views desc", "limit": 10 }- Purpose: Get popular search content
Get search suggestions(
/api/archive/list){ "moduleId": 2, // 商品模块ID "q": "关键词前缀", "limit": 5 }- Purpose: Get search suggestions
Get system settings(
/api/setting/system)- Purpose: Get basic website information
10.2.12 Promotion Page
Promotion Page showcases coupons, flash sales, and other promotional activities.
Main interface calls:
Get coupon list(
/api/coupon/codes){ "limit": 10, "page": 1 }- Purpose: Get the list of coupons
- Parameter: limit (number of items per page), page (page number)
Get valid coupon list(
/api/coupon/valid)- Purpose: Get the current valid coupons list
Get coupon code(
/api/coupon/code){ "id": 1 }- Purpose: Obtain coupon codes
- Parameter: id (Coupon ID)
- Authentication required.
Obtain flash sale products(
/api/archive/list){ "moduleId": 2, // 商品模块ID "flag": "s", // 秒杀标识 "limit": 10, "page": 1 }- Purpose: Obtain list of flash sale products
Get system settings(
/api/setting/system)- Purpose: Get basic website information
User-related pages on 10.2.13
Login Page
Main interface calls:
- User Login(
/api/login){ "user_name": "用户名", "password": "密码" }- Purpose: User Authentication Login
- Parameter: user_name(User Name), password(Password), email(Email), phone(Phone Number)
Registration Page
Main interface calls:
User Registration(
/api/register){ "user_name": "用户名", "password": "密码", "email": "邮箱", "captcha_id": "验证码ID", "captcha": "验证码" }- Purpose: New User Registration
- Parameters: user_name (username), password (password), email (email), captcha (captcha)
Get captcha(
/api/captcha)- Purpose: Obtain graphic captcha
Send email verification(
/api/verify/email){ "email": "邮箱地址" }- Purpose: Send email verification code
Personal Center Page
Main interface calls:
Get user details(
/api/user/detail)- Purpose: Get current user's detailed information
- Authentication required.
Update User Information(
/api/user/update){ "real_name": "真实姓名", "email": "邮箱" }- Purpose: Update User Information
- Authentication required.
Update User Avatar(
/api/user/avatar)- Purpose: Update User Avatar
- Authentication required.
Update User Password(
/api/user/password){ "old_password": "旧密码", "password": "新密码" }- Purpose: Update user password
- Authentication required.
Reset User Password(
/api/user/password/reset){ "email": "邮箱", "password": "新密码", "token": "验证token", "code": "验证码" }- Purpose: Reset user password
10.3 Example of page loading process
Take the product detail page as an example to illustrate the complete API call process:
10.3.1 Page initialization
- Get product details
- Increase product browsing volume (through subsequent requests or server-side processing)
- Get product SKU information
Load sidebar content in 10.3.2
- Get previous/next product
- Get related product recommendations
- Get the list of popular products
Load the comment area 10.3.3
- Get product comment list
- Get the favorite status of the current product for the logged-in user
10.3.4 Shopping cart feature
- Get the number of items in the shopping cart (if the user is logged in)
- Add to cart (requires authentication)
10.3.5 Interaction Features
- Post a comment (requires authentication)
- Favorite/Unfavorite (requires authentication)
- Comment Like (requires authentication)
10.4 Common Page Combination Calls
10.4.1 Home + Category Page Combination
// 并行请求多个接口
Promise.all([
fetch('/api/archive/list', { params: { moduleId: 2, limit: 10, page: 1 } }),
fetch('/api/category/list', { params: { moduleId: 2, limit: 10 } }),
fetch('/api/tag/list', { params: { type: 'list', limit: 20 } }),
fetch('/api/setting/system'),
fetch('/api/coupon/codes', { params: { limit: 5 } })
]).then(responses => {
// 处理所有响应数据
const [products, categories, tags, settings, coupons] = responses;
// 渲染页面
});
10.4.2 Product Details Page Full Call
// 串行或并行调用多个接口
const productId = 1;
Promise.all([
fetch(`/api/archive/detail`, { params: { id: productId } }),
fetch(`/api/archive/params`, { params: { id: productId } }),
fetch(`/api/archive/sku`, { params: { id: productId } }),
fetch(`/api/archive/prev`, { params: { id: productId } }),
fetch(`/api/archive/next`, { params: { id: productId } }),
fetch(`/api/comment/list`, { params: { archive_id: productId, limit: 10 } }),
fetch(`/api/setting/system`)
]).then(responses => {
const [product, params, sku, prev, next, comments, settings] = responses;
// 组合数据并渲染页面
});
10.4.3 Order Confirmation Page Full Call
// 订单确认页面的API调用
const cartIds = [1, 2, 3];
Promise.all([
fetch('/api/cart/list'),
fetch('/api/order/addresses'),
fetch('/api/orders/checkout', { params: { cart_ids: cartIds } }),
fetch('/api/coupon/codes'),
fetch('/api/setting/system')
]).then(responses => {
const [cart, addresses, checkout, coupons, settings] = responses;
// 组合数据并渲染页面
});
It can be seen that a complete mall site needs to call multiple API interfaces to build various pages, and developers can choose the appropriate interface combinations according to actual needs to realize rich mall functions.
Concluding remarks
Through this guide, you can systematically understand and use AnQiCMS API, from basic concepts to advanced usage, gradually mastering the method of using the interface.Suggest studying step by step according to the guide and combining it with practical project practice.
