国内建网站知名企业网络营销的真实案例分析

1 分页功能实现

• 为什么很多项目采用分页功能，比如电商平台同时展示的数据有很多（1万+），采用分页功能。
• ElementUI是有相应的分页组件，使用起来超级简单，但是咱们前台项目目前不用【掌握自定义分页功能】。

2 分页器的展示需要哪些数据（条件）？

1. 需要知道当前是第几个：pageNo字段代表当前页数。
2. 需要知道每一个需要展示多少条数据：pageSize字段代表。
3. 需要知道整个分页器一共有多少条数据：total字段进行代表【获取另外一种信息】。
4. 需要知道分页器连续页面个数：5|7【奇数】，因为奇数对称（好看）。

• 总结：对于分页器而言，自定义的前提是需要知道四个前提条件：

  • pageNo：当前第几个。
  • pageSize：每一页展示多少条数据。
  • total：整个分页一共要展示多少条数据。
  • continues：分页连续的页码个数。

• 举例子：每一页3条数据，一共90条数据【一共是30页】。

• 举例子：每一页3条数据，一共91条数据【一共是31页】。

3 自定义分页器

• 在开发的时候先传递自己假的数据进行调试，调试成功以后再用服务器数据。

4 分页器存在问题

• 对于分页器而言，很重要的一个地方即为【算出：连续页面起始数字和结束数字】：pageNo - 2, pageNo, pageNo + 2。

• 当前是第8页（当前页永远在中间）
  6 7 8 9 10
  当前是第15页
  13 14 15 16 17
  当前是第20页
  18 19 20 21 22
  当前是第8页，连续页码5页
  6 7 8 9 10
  当前是第8页，连续页码7页
  5 6 7 8 9 10 11

• 前提：分页器数字没有0，也没有负数

• 当前页第1页
  1 2 3 4 5 【-1 0 1 2 3（错误）】
  当前页第2页
  1 2 3 4 5 【0 1 2 3 4（错误）】
  当前页第31页
  27 28 29 30 31 【29 30 31 32 33（错误）】
  当前页第30页
  27 28 29 30 31 【28 29 30 31 32（错误）】

5 分页器动态展示

• 分页器动态展示：分为上中下【中间部分】。
• v-for：数组|数字|字符串|对象。

6 开发某一个商品的详情页面

1. 静态组件（详情页的组件：还没有注册为路由组件）。
   • 当点击商品图片的时候，跳转到详情页面，在路由跳转的时候需要带上产品的ID给详情页面。
   • 滚动行为。
2. API：请求接口。
3. vuex：获取产品详情信息。
   • vuex还需要再新增一个模块detail。
   • 需要回到大仓库中进行合并。