Mock 数据设置指南.md 8.59 KB

Raw Blame History Permalink



Mock 数据测试指南


概述

已为以下 5 个页面创建完整的 Mock 数据支持:


页面
API
Mock 函数
总页数
每页数量


周热门资料
weekHotAPI
mockWeekHotAPI
5 页
20 条


资料列表
fileListAPI
mockFileListAPI
8 页
20 条


产品中心
listAPI
mockProductListAPI
10 页
10 条


搜索页
searchAPI
mockSearchAPI
5 页
20 条


消息列表
myListAPI
mockMessageListAPI
8 页
10 条


快速启用 Mock 数据


方法 1: 修改页面代码开关

在每个页面的 <script setup> 部分添加/修改:

// ⚠️ MOCK 数据开关
const USE_MOCK_DATA = true  // ✅ 使用 Mock 数据
// const USE_MOCK_DATA = false  // ❌ 使用真实 API


方法 2: 在 API 调用处添加条件判断

// 导入 mock 函数
import { mockWeekHotAPI, mockFileListAPI, mockProductListAPI, mockSearchAPI, mockMessageListAPI } from '@/utils/mockData'

// 在 API 调用处
const res = USE_MOCK_DATA
  ? await mockWeekHotAPI(params)
  : await weekHotAPI(params)


各页面 Mock 数据详情


1. 周热门资料页 (week-hot-material/index.vue)

文件位置: src/pages/week-hot-material/index.vue:76

Mock 数据特性:


✅ 20 种资料名称模板(财富管理、保险、投资等)
✅ 10 种文件类型(PDF、Word、Excel、PPT等)
✅ 随机学习人数(100-5000人)
✅ 随机学习百分比(0-100%)
✅ 30%概率已收藏


已启用: ✅ 已添加 USE_MOCK_DATA 开关


2. 资料列表页 (material-list/index.vue)

文件位置: 需要添加到 src/pages/material-list/index.vue

Mock 数据特性:


✅ 20 种资料名称模板
✅ 支持分类过滤(cid)
✅ 支持关键词搜索(keyword)
✅ 包含分类信息(cate)


需要添加:

// 导入
import { mockFileListAPI } from '@/utils/mockData'

// 添加开关(在 script setup 顶部)
const USE_MOCK_DATA = true

// 修改 fetchFileList 函数(约第 176 行)
const res = USE_MOCK_DATA
  ? await mockFileListAPI(params)
  : await fileListAPI(params)


3. 产品中心页 (product-center/index.vue)

文件位置: 需要添加到 src/pages/product-center/index.vue

Mock 数据特性:


✅ 20 种产品名称(人寿险、健康险、意外险等)
✅ 4 种产品分类(人寿保险、健康保险、意外保险、财产保险)
✅ 4 种标签(热销、新品、推荐、限时)
✅ 支持分类过滤(cid)
✅ 支持关键词搜索(keyword)


需要添加:

// 导入
import { mockProductListAPI } from '@/utils/mockData'

// 添加开关(在 script setup 顶部)
const USE_MOCK_DATA = true

// 修改 fetchProducts 函数(约第 196 行)
const res = USE_MOCK_DATA
  ? await mockProductListAPI(params)
  : await listAPI(params)


4. 搜索页 (search/index.vue)

文件位置: 需要添加到 src/pages/search/index.vue

Mock 数据特性:


✅ 同时支持产品和资料搜索
✅ 根据关键词过滤数据
✅ 返回匹配的产品和资料列表


需要添加:

// 导入
import { mockSearchAPI } from '@/utils/mockData'

// 添加开关(在 script setup 顶部)
const USE_MOCK_DATA = true

// 修改 fetchSearchResults 函数
const res = USE_MOCK_DATA
  ? await mockSearchAPI(params)
  : await searchAPI(params)


5. 消息列表页 (message/index.vue)

文件位置: 需要添加到 src/pages/message/index.vue

Mock 数据特性:


✅ 15 种消息标题模板
✅ 随机创建时间(最近30天内)
✅ 50%概率已读
✅ 两种消息类型(通知、系统)


需要添加:

// 导入
import { mockMessageListAPI } from '@/utils/mockData'

// 添加开关(在 script setup 顶部)
const USE_MOCK_DATA = true

// 修改 fetchMessageList 函数(约第 67 行)
const res = USE_MOCK_DATA
  ? await mockMessageListAPI(params)
  : await myListAPI(params)


统一 Mock API 调用器

除了单独导入各个 mock 函数,也可以使用统一的调用器:

import { mockAPI } from '@/utils/mockData'

// 使用示例
const res = await mockAPI('weekHotAPI', params)
const res = await mockAPI('fileListAPI', params)
const res = await mockAPI('listAPI', params)
const res = await mockAPI('searchAPI', params)
const res = await mockAPI('myListAPI', params)


测试流程


1. 确认 Mock 数据开关已开启

检查对应页面的 USE_MOCK_DATA = true


2. 启动开发服务器

pnpm dev:weapp


3. 测试分页加载


首次加载: 查看第 1 页数据是否正常显示

滚动加载: 向下滚动到底部

验证加载:


✅ 显示"加载中..."
✅ Console 输出: [Mock] xxxAPI - 第X页,共Y条

✅ 新数据追加到列表


测试数据耗尽: 继续滚动直到显示"没有更多了"


4. 查看 Console 日志

正常的日志输出:

[Mock] weekHotAPI - 第0页,共20条
[Mock] weekHotAPI - 第1页,共20条
[Mock] weekHotAPI - 第2页,共20条
...


5. 测试搜索/筛选功能(如适用)


资料列表: 切换分类、输入关键词

产品中心: 切换分类、输入关键词

搜索页: 输入关键词、切换产品/资料 Tab


Mock 数据字段说明


周热门资料 (weekHotAPI)

{
  meta_id: integer,        // 文件ID
  name: string,            // 文件名称
  src: string,             // 文件URL
  size: string,            // 文件大小(如 "2.5MB")
  read_people_count: integer,     // 学习人数
  read_people_percent: number,    // 学习百分比(0-100)
  is_favorite: string     // 收藏状态('1' 或 '0')
  extension: string        // 文件扩展名(如 'pdf')
}


资料列表 (fileListAPI)

{
  id: integer,
  meta_id: integer,
  name: string,            // 资料名称
  title: string,           // 资料标题
  fileName: string,        // 文件名
  desc: string,            // 描述
  size: string,            // 文件大小
  extension: string,       // 文件扩展名
  collected: boolean,      // 是否已收藏
  src: string,             // 文件URL
  downloadUrl: string,     // 下载URL
  post_date: string        // 发布时间
}


产品列表 (listAPI)

{
  id: integer,
  product_name: string,   // 产品名称
  name: string,            // 产品名称(别名)
  cover_image: string,     // 封面图URL
  recommend: string,       // 推荐标识('hot' 或 '')
  tags: Array<{           // 标签数组
    id: integer,
    name: string,          // 标签名称
    bg_color: string,      // 背景色
    text_color: string     // 文字颜色
  }>,
  description: string,     // 描述
  premium: number,         // 保费
  category_id: integer     // 分类ID
}


搜索 (searchAPI)

{
  code: 1,
  msg: 'success',
  data: {
    products: Array,      // 产品列表(同产品列表字段)
    files: Array           // 资料列表(同资料列表字段)
  }
}


消息列表 (myListAPI)

{
  id: integer,
  title: string,           // 消息标题
  intro: string,           // 简介
  content: string,         // 内容
  create_time: string,     // 创建时间(YYYY-MM-DD)
  is_read: integer,        // 是否已读(0 或 1)
  type: string             // 类型('notice' 或 'system')
}


切换回真实 API

测试完成后,记得修改开关:

const USE_MOCK_DATA = false  // 使用真实 API


常见问题


Q1: Mock 数据不生效?

检查:


确认 USE_MOCK_DATA = true

确认已正确导入 mock 函数
查看 console 是否有 [Mock] 日志
确认 API 调用处使用了条件判断


Q2: 数据格式不对?

检查:


查看 mock 数据字段是否与真实 API 一致
在浏览器 console 查看返回的数据结构
对照页面代码中的字段映射逻辑


Q3: 想修改每页数量?

修改:


在页面代码中修改 pageSize 或 limit 变量
Mock 数据会自动适应请求的数量


Q4: 想增加更多页数?

修改 src/utils/mockData.js:

// 修改 totalPages 值
const totalPages = 10  // 从 5 改为 10


完成清单

使用本指南后,请确认:


 周热门资料页已添加 Mock 数据 ✅

 资料列表页已添加 Mock 数据

 产品中心页已添加 Mock 数据

 搜索页已添加 Mock 数据

 消息列表页已添加 Mock 数据

 所有页面的滚动加载功能正常

 Console 日志正确输出

 测试完成后已切换回真实 API


最后更新: 2026-02-08
维护者: Claude Code