数据分页

1. 前端如何实现数据分页？在本项目中分页的典型用法是什么？

答案：
前端分页通常有两种方式：前端分页（一次性获取全部数据后在前端切分）和后端分页（每次只请求一页数据）。本项目如 ProductList.vue、NewsList.vue 等页面采用后端分页，即通过接口传递 page 和 pageSize 参数，后端返回对应页的数据和总条数，前端根据这些数据渲染分页组件（如 Element Plus 的 Pagination），实现高效分页展示。

---

2. 分页请求的参数和响应结构一般包括哪些？本项目是如何设计的？

答案：
分页请求参数通常包括：

• page（当前页码）
• pageSize（每页条数）
• 可能还有筛选、排序参数

响应结构一般包括：

• data（当前页数据列表）
• total（总数据条数）

本项目的 API（如 src/api/product.ts）请求示例：

get('/api/products', { params: { page: 1, pageSize: 10 } })

响应示例：

{
  "data": [ ... ],
  "total": 100
}

前端根据 total 和 pageSize 计算总页数，渲染分页控件。

---

3. 如何在 Vue 组件中实现分页逻辑？请结合项目代码说明。

答案：
以 ProductList.vue 为例，分页逻辑通常包括：

• 定义 currentPage、pageSize、total、tableData 等响应式变量
• 监听分页组件的页码变化，触发数据请求
• 请求接口时带上分页参数，更新数据和总数

代码片段：

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  @current-change="handlePageChange"
/>

<script setup>
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref([])

const fetchData = async () => {
  const res = await getProducts({ page: currentPage.value, pageSize: pageSize.value })
  tableData.value = res.data
  total.value = res.total
}
const handlePageChange = (page) => {
  currentPage.value = page
  fetchData()
}
onMounted(fetchData)
</script>

---

4. 前后端分页时如何保证数据一致性和性能？本项目有哪些优化措施？

答案：
后端分页能有效减少前端内存压力和网络传输量，适合大数据量场景。本项目通过接口只返回当前页数据，避免一次性加载全部数据。
优化措施包括：

• 分页参数校验，防止恶意请求
• 支持条件筛选、排序，提升用户体验
• 前端分页组件与接口解耦，便于复用
• 可结合防抖、节流优化频繁翻页请求

---

5. 分页组件如何与表格、搜索等功能联动？本项目是如何实现的？

答案：
分页通常与表格、搜索、筛选等功能联动。例如在 ProductList.vue，用户切换页码、修改每页条数、输入搜索条件时，都会重新请求数据并刷新表格。
实现方式：

• 将分页参数、搜索条件统一管理（如用 ref 或 Pinia store）
• 任何参数变化都触发 fetchData 方法
• 保证分页、搜索、排序参数一同传递给后端

代码示例：

const fetchData = async () => {
  const res = await getProducts({
    page: currentPage.value,
    pageSize: pageSize.value,
    keyword: searchKeyword.value
  })
  // ...更新数据
}

这样保证了分页与其他功能的联动和数据一致性。