当前位置: 首页 > news >正文

黑马头条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 来判定返回数据。

相关文章:

黑马头条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.…...

Java:基础语法

基础语法 1. 基本结构类和方法 2. 变量和数据类型基本数据类型引用数据类型 3. 操作符算术操作符比较操作符逻辑操作符 4. 控制结构条件语句循环语句 5. 数组6. 方法7. 面向对象编程类和对象继承多态 8. 异常处理9. 常用类库 1. 基本结构 类和方法 Java程序的基本单位是类&am…...

安装bedtools详细步骤和详细介绍bedtools用法

安装bedtools详细步骤和详细介绍bedtools用法 一、安装bedtools详细步骤下载解压安装编译依赖编译设置环境变量激活环境变量执行命令查看版本二、详细介绍bedtools用法使用bedtools示例用法bedtools intersectbedtools bamtobedbedtools window一、安装bedtools详细步骤 下载 …...

21 - grace数据处理 - 补充 - 泄露误差改正 - Slepian局部谱分析法(一) - slepian分析法理论理解

21 - grace数据处理 - 泄露误差改正 - Slepian局部谱分析法 - slepian分析法理论理解 0 引言1 slepian谱分析法1.1 slepian谱分析法AI解释1.2 基于slepian谱分析法的GRACE数据处理应用2 slepian谱分析法关键过程实现2.1 求解正定特征方程2.2 计算slepian基函数2.3 计算Shannon数…...

WLAN国家码与信道顺从表

国家码和信道顺从表及信道功率限制 不同的国家和地区规定了在本国或本地区可以使用的信道、射频信号在信道中的最大发射功率。工作在不同信道的射频信号,信号强度可能会有差别。国家码和信道顺从表、各信道的功率限制值、信道编号和频率对照关系请参见国家码和信道…...

行为型设计模式1:状态/策略/命令

行为型设计模式:状态/策略/命令 (qq.com)...

【知识专栏丨python数分实战】天猫订单数据分析及可视化|taobao天猫订单接口

今天这篇文章将给大家介绍天猫订单数据分析及可视化案例。 import pandas as pdimport numpy as npfrom pyecharts.charts import Pie,Bar,Line,Map,Map3D,Funnelfrom pyecharts import options as optsimport matplotlib.pyplot as pltimport warningsimport seaborn as snsfr…...

[kimi笔记]为什么csc.exe不可以双击运行

csc.exe 是 C# 编译器的可执行文件,它是 .NET Framework 的一部分,用于编译 C# 源代码文件( .cs 文件)生成可执行文件( .exe 文件)或其他类型的程序集。 csc.exe 不能通过双击运行的原因有以下几点&…...

护眼大路灯哪个牌子好?2024学生护眼大路灯推荐

护眼大路灯哪个牌子好?护眼大路灯不仅能够提供日常的光线照明,还模拟了太阳光光线,使在室内用眼学习也能够有着自然光般的舒适感,但现在市场上有许多对产品质量把控不过关、光线效果欠佳、存有安全隐患的劣质护眼大路灯产品&#…...

Vue项目中手搓滑动校验模块-demo

实现代码 SliderCheck.vue <template><div class"drag" ref"dragDiv"><div class"drag_bg" ref"dragBg"></div><div class"drag_text" ref"dragText">{{ confirmWords }}</di…...

Socket如何实现客户端和服务器间的通信

Socket 是实现网络通信的一种机制&#xff0c;它允许在不同主机之间的进程通过网络进行数据交换。下面我将简要介绍如何使用 Socket 实现客户端和服务器间的通信。 客户端-服务器通信步骤&#xff1a; 服务器端&#xff1a; 创建服务器端 Socket&#xff1a; 服务器端通过创…...

基于Spring boot + Vue的校园论坛

作者的B站地址&#xff1a;程序员云翼的个人空间-程序员云翼个人主页-哔哩哔哩视频 csdn地址&#xff1a;程序员云翼-CSDN博客 1.项目技术栈&#xff1a; 前后端分离的项目 后端&#xff1a;Springboot MybatisPlus 前端&#xff1a;Vue ElementUI 数据库&#xff1a; …...

RabbitMQ高级特性 - 生产者消息确认机制

文章目录 生产者消息确认机制概述confirm 代码实现return 代码实现 生产者消息确认机制 概述 为了保证信息 从生产者 发送到 队列&#xff0c;因此引入了生产者的消息确认机制. RabbitMQ 提供了两种解决方案&#xff1a; 通过事务机制实现.通过发送确认机制&#xff08;confi…...

webpack的loader机制

webpack的loader机制 loader本质上就是导出函数的JavaScript模块。导出的函数&#xff0c;可以用来实现内容的转换。 /* * param{string|Buffer} content 源文件的内容 * param{object} [map] SourceMap数据 * param{any} [meta] meta数据&#xff0c;可以是任何数据 * */ fu…...

(STM32笔记)十一、通过EXTI外部中断实现 按键控制LED

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 十一、通过EXTI外部中断实现 按键控制LED 十一、通过EXTI外部中断实现 按键控制LED1、按键模块按键原理图按键程序思路 2、中…...

假如家里太大了,wifi连不上了怎么办

最近有个土豪朋友抱怨&#xff0c;他家里太大了&#xff0c;一个路由器的Wi-Fi信号根本无法覆盖他们家的每个房间&#xff0c;都没办法上网看奥运会比赛了。&#xff08;还好我是穷人&#xff0c;就没有这种烦恼T_T&#xff09;。 然后我问他为何不用一个路由器作主路由器&…...

elementPlus 设置el-input文本域固定高度和禁止下拉

elementPlus 设置el-input文本域固定高度和禁止下拉 话不多说直接上代码 // resize"none" 禁止下拉<el-inputv-model"textarea"style"width: 240px"type"textarea"resize"none"placeholder"请输入"/>// 设…...

(转)领导人必过的三道关

为什么企业领导人享受优厚的待遇&#xff0c;为什么董事会对企业领导人千挑万选?因为企业生命如此脆弱&#xff0c;据美国《财 富》杂志报道&#xff0c;世界500强企业平均寿命40年&#xff0c;世界1000强企业平均寿命30年&#xff0c;一般跨国公司平均寿命10年。而就是这脆弱…...

速盾:cdn可以定时刷新缓存吗?

CDN&#xff08;Content Delivery Network&#xff09;是一种通过在全球各地分布的服务器上缓存和传送网站内容的技术&#xff0c;以提高用户访问速度和降低服务器负载。CDN的缓存机制可以减少用户对源服务器的请求次数&#xff0c;从而提高网站的响应速度和性能。但是&#xf…...

代码随想录算法训练营第二十九天| 62.不同路径、63. 不同路径 II

写代码的第二十九天 继续动归&#xff01;&#xff01;&#xff01; 62.不同路径 思路 解决问题1&#xff1a;dp[i][j]的的含义是什么&#xff1f;本题给的是一个二维的表&#xff0c;判断从左上角走到右下角有多少种路径&#xff0c;所以dp应该是二维数组&#xff0c;dp[i]…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...