黑马头条vue2.0项目实战（五）——首页—频道编辑

目录

1. 使用页面弹出层

1.1 页面弹出层简单使用

1.2 创建频道编辑组件

1.3 页面布局

2. 展示我的频道

3. 展示推荐频道列表

3.1 获取所有频道

3.2 处理展示推荐频道

4. 添加频道

5. 编辑频道

5.1 处理编辑状态

5.2 切换频道

5.3 让激活频道高亮

5.4 删除频道

6. 频道数据持久化

6.1 业务分析

6.2 添加频道

6.3 删除频道

7. 正确的获取首页频道列表数据

---

1. 使用页面弹出层

1.1 页面弹出层简单使用

Vant 中内置了 Popup 弹出层 组件。

• 在 data 中添加一个数据用来控制弹层的显示和隐藏

• 在首页模板中的频道列表后面添加弹出层组件

1.2 创建频道编辑组件

① 创建 views/home/components/editChannel.vue 

② 在首页中加载注册

③ 在弹出层中使用频道编辑组件

1.3 页面布局

• 我的频道标题 cell 单元格组件

• 我的频道列表 Grid 宫格组件

• 频道推荐标题 cell 单元格组件
• 频道推荐列表 Grid 宫格组件

2. 展示我的频道

① 在父组件中把 channels 传递给频道编辑组件

② 在频道编辑组件中声明接收父组件的 myChannels 频道列表数据并遍历展示

3. 展示推荐频道列表

没有用来获取推荐频道的数据接口，但是我们有获取所有频道列表的数据接口。

所以：所有频道列表 - 我的频道 = 剩余推荐的频道。

实现过程所以一共分为两大步：

• 获取所有频道

• 基于所有频道和我的频道计算获取剩余的推荐频道

3.1 获取所有频道

① 封装数据接口

② 在编辑频道组件中请求获取所有频道数据

3.2 处理展示推荐频道

思路：所有频道 - 用户频道 = 推荐频道（computed 计算属性）

① 封装计算属性筛选数据

• filter 过滤数组，过滤出符合条件的数组
• 数组的 find 方法返回数组中第一个满足提供的测试函数的元素。如果没有找到符合条件的元素，返回 undefined。

② 模板绑定

4. 添加频道

思路：

• 给推荐频道列表中每一项注册点击事件

• 获取点击的频道项

• 将频道项添加到我的频道中

• 将当前点击的频道项从推荐频道中移除

  • 不需要删除，因为我们获取数据使用的是计算属性，当我频道发生改变，计算属性重新求值了

① 给推荐频道中的频道注册点击事件

② 在添加频道事件处理函数

• 属性 props 是只读的，myChannels 是由父组件 channels传递过来的。不可以直接 this.myChannels.push(channel) 不能直接修改子组件的属性。

• 子向父传值。

• 子组件的事情处理函数去触发 emit 父组件里的自定义事件。

• 将当前点击的频道项从推荐频道中移除？不需要删除，recomendChannels 是计算属性，当我频道发生改变，计算属性重新求值了。

5. 编辑频道

思路：

• 给我的频道中的频道项注册点击事件

• 在事件处理函数中

  • 如果是编辑状态，则执行删除频道操作

  • 如果是非编辑状态，则执行切换频道操作

5.1 处理编辑状态

① 在 data 中添加数据用来控制编辑状态的显示

② 在我的频道项中添加删除图标，定位到合适的位置

③ 处理点击编辑按钮

5.2 切换频道

功能需求：在非编辑器状态下切换频道。

① 给我的频道项注册点击事件

② 处理函数

③ 在父组件中监听处理自定义事件

5.3 让激活频道高亮

思路：

• 将首页中的激活的标签索引传递给频道编辑组件

• 在频道编辑组件中遍历我的频道列表的时候判断遍历项的索引是否等于激活的频道标签索引，如果一样则作用一个高亮的 CSS 类名

① 将首页组件中的 active 传递到频道编辑组件中

② 在频道编辑组件中声明 props 接收

③ 判断遍历项，如果 遍历项索引 === active，则给这个频道项设置高亮样式

• v-bind:class 语法的理解：

  • 动态一个对象，对象中的 key 表示要作用的 css 类名

  • 对象中的 value 要计算出布尔值

    • true 则表示作用该类名

    • false 则表示不作用该类名

5.4 删除频道

功能需求：在编辑状态下删除频道。

• 第一个频道 “推荐” 不允许删除。

• 如果删除的频道在激活的频道前面，那么删除该频道后，当前激活频道任然不变。也就是说点击的索引值小于激活的索引值。

• 分三种情况

  • 删除的元素在当前激活元素之后，直接删除

  • 删除的元素在当前激活元素之前，将激活的索引值 - 1

  • 删除当前激活的元素后，激活的元素应该是删除元素的后一个元素，这样用户体验会更加自然，因为删除操作通常会使当前视图移动到下一个可用的元素。

• 定义一个变量 isBeforeActiveIndex 表示要删除的索引是否在激活的索引前面

• myChannels 是从父组件传递过来的属性，是只读的，要删除必须通过子传父技术，在父组件中删除。

6. 频道数据持久化

6.1 业务分析

① 频道编辑这个功能，无论用户是否登录用户都可以使用。

不登录也能使用

• 数据存储在本地

• 不支持同步功能

登录也能使用

• 数据存储在线上后台服务器

• 更换不同的设备可以同步数据

6.2 添加频道

思路：

• 如果未登录，则存储到本地

• 如果已登录，则存储到线上

  • 找到数据接口

  • 封装请求方法

  • 请求调用

① 封装添加频道的请求方法

② 修改添加频道的处理逻辑

6.3 删除频道

思路：

• 如果未登录，则存储到本地

• 如果已登录，则存储到线上

  • 找到数据接口

  • 封装请求方法

  • 请求调用

① 封装删除用户频道请求方法

 

② 修改删除频道的处理逻辑

7. 正确的获取首页频道列表数据

• 加载用户频道数据
  • 登录，请求获取用户频道数据
  • 未登录，查看本地存储是否有用户频道数据，
    • 有直接使用
    • 没有获取默认的频道列表
• 获取登录用户的频道列表和获取默认推荐的频道列表是同一个数据接口。后端会根据接口中的 token 来判定返回数据。