频道面板模块
01 - 打开频道操作面板
面板可以使用 vant 中的组件:弹出层popup
属性: v-model 控制面板的显示和隐藏的
特点:
v-model:设置为 true,面板就开启
点击黑色遮罩层区域,面板就关闭
步骤:
- a. 在页面上添加一个频道操作面板:默认隐藏
- b. 给操作面板按钮添加一个点击事件:将面板显示出来
02- 将频道操作面板封装为组件
1.0 由于频道操作是在 home 中完成了,home 中的逻辑已经足够多了,如果我们再将频道操作的逻辑也放到 home 中。将 来 home 页面的维护和更新会非常的麻烦。
2.0 在后面操作的过程中我们应该将频道操作面板单独封装为一个组件
步骤:
- a. 在 index 目录下创建一个文件夹: com
- b. 在 com 文件夹下创建一个组件:channel.vue
- 用来处理频道操作面板中的所有的逻辑
- c. 这个组件在 index/index.vue 中使用
- 显示:点击频道操作面板的按钮
- 隐藏:点击面板上方的黑色的遮罩层
这里会通过父子组件的传值来控制频道面板的显示与隐藏,会涉及到一个单向数据流的问题,其实这个问题就是说,如果你在父组件把值传给子组件,这个值只能在父组件修改,不能在子组件修改的,如果在子组件中修改的话会报错
这个概念叫做单向数据流, 如果遇到这个问题可以用其他的方式比如v-model的原理或者this.$parent这种方式
03 - 完成结构与样式
利用vant中Grid 宫格组件grid
在黑马头条中所有的频道数据是固定的: 例如:有 56 个我的频道:就是用户会从这 56 个频道中选择一些自己喜欢的频道成为我的频道:
选择 5 个: css, javascript, 前端, C++, python
频道推荐:就是 56 个频道中除去已经被选择成为我的频道的 5 条数据后剩下的数据
总共有: 51 个
- 我的频道
- 标题区域
- 频道列表区域
- 给每个元素添加一个叉叉
- 频道推荐
- 标题区域
- 频道列表区域
04 - 渲染 我的频道 数据
前提:
什么是我的频道:
就是首页中频道区域中显示的内容
步骤:
-
a. 得到我的频道数据
-
打开频道面板时,应该从 index/index.vue 中将当前页面上的频道数据传给 channel 组件
-
index.vue 与 channel 组件是父子关系
-
数据要从 index.vue 传入到 channel 中
-
可以使用 props:
-
父传: 给子组件添加一个自定义属性:
<son :data="data" ></son>
-
子接:在子组件中通过 props 来接收:
export default { props: [‘data’] }
-
-
-
在 channel 组件中接收数据
-
-
b. 将频道数据进行渲染就可以 了
05 - 渲染 频道推荐 数据
强调:什么是频道推荐
在黑马头条中有固定的频道数据,所谓的频道推荐指的就是所有频道数据中,除掉 我的频道数据的这部分数据
步骤:
- a. 在打开页面时,请求服务器得到所有的频道数据
- 请求服务器接口:全部频道列表
- b. 将所有的频道数据保存起来
- c. 从所有频道数据中将我的频道数据删除,得到一个新的数组就是频道推荐数据
- 定义一个推荐频道的计算属性:在计算属性中将所有频道数据中的我的频道删除
- d. 将频道推荐数据进行渲染
06 - 计算属性的缓存问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
姓:<input type="text" v-model="firname"> 名:
<input type="text" v-model="lastname">
</div>
<!-- 需求:将姓名结合到一起并且输入 -->
<!-- 如果直接使用下面的方式去得到姓名:firname + lastname 这段代码要执行很多次,没有意义 -->
<!-- 不建议直接使用 {{}} 相加,可以使用计算属性来完成 -->
<div>
姓名: {{ fullname }}
</div>
<div>
姓名: {{ fullname }}
</div>
<div>
姓名: {{ fullname }}
</div>
<div>
姓名: {{ fullname }}
</div>
<div>
姓名: {{ fullname }}
</div>
<!-- <div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div>
<div>
姓名:{{ firname + lastname }}
</div> -->
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
firname: '张', // 姓
lastname: '三' // 名
},
computed: {
// fullname 后面对应的这个函数:
// 1.0 只会在第一次使用 fullname 时执行一次
// 2.0 执行之后会将得到的结果进行缓存,下一次再用到 fullname,直接从缓存中取(不会再执行函数)
// 3.0 当计算属性的依赖项发生改变时,会再次执行一次函数,并且会将得到的结果再次进行缓存
fullname: function () {
console.log('fullname')
// 姓 + 名
return this.firname + this.lastname
}
}
})
</script>
</html>
注意点:
- 1.0 计算属性在第一次使用时会执行一次后的函数
- 2.0
会将函数执行的结果进行缓存,再使用这个计算属性直接从缓存中取
- 3.0
一旦计算属性中的依赖项发生改变,函数需要再次执行一次,会再将执行的结果再次进行缓存
- 4.0 计算属性的缓存依赖项指的是:在计算属性中用到的 data 中的数据
07 - 从一个数组中删除另一个数组中的所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
// 数组1:所有的频道数组
var allChannel = [
{ id: 0, name: 'C++' },
{ id: 1, name: 'java' },
{ id: 2, name: 'javascript' },
{ id: 3, name: 'go' },
{ id: 4, name: 'css' },
{ id: 5, name: 'vue' },
{ id: 6, name: 'jquery' },
]
// 数组2:我的频道数据
var myChannel = [
{ id: 0, name: 'C++' },
{ id: 1, name: 'java' },
{ id: 3, name: 'go' }
]
// 任务:从数组1中删除所有数组2中的元素
// 快速删除的方式:涉及到两个方法: map filter
// 1.0 得到我的频道数据中所有元素的 id 集合
var ids = myChannel.map(item => {
return item.id
})
console.log(ids) // [0, 1, 3]
// 2.0 遍历所遥频道数数组:判断当前频道数据在 id 集合中是否存在,
// 如果不存在,就直接返回,如果存在就不理会
var channel = allChannel.filter(item => {
return !ids.includes(item.id)
})
console.log(channel)
</script>
</html>
注意点:
- 必须熟练使用:
map & filter & includes
08 - 添加频道
步骤:
-
a. 给频道推荐下的每个频道数据添加一个点击事件
-
b. 得到被点击的元素,直接将元素添加到我的频道数据中
-
c. 将修改后的频道数据进行保存
- 判断:用户是否登录:
- 未登录:
- 应该将操作后的频道数据保存到本地的:localstorage 中
- 已登录:
- 应该将操作后的频道数据保存到服务器中
- 请求服务器的接口:(批量修改用户频道列表(重置式))
- 应该将操作后的频道数据保存到服务器中
- 未登录:
- 判断:用户是否登录:
-
接收返回数据
注意点: -
只要修改了我的频道,推荐会自动修改:
- 推荐频道中有一个依赖项叫做我的频道
- 一旦我的频道发生改变,推荐频道会再次重新生成
-
提交到服务器接口的数据格式为
{ channels: [ { id: 0, seq: 1 }, // id 频道的 id, seq 频道的顺序(seq 是从 1 开始的) { id: 1, seq: 2 } // 注意点:seq = 1 的位置永远是给推荐留着的 ] }
09 - 删除频道
步骤:
- a. 给叉叉添加一个点击事件:
- 将当前点击的频道数据从我的频道中删除
- 将修改后的频道数据保存起来
- 判断用户是否登录:
- 未登录:
- 将修改后的数据保存到 localstorage 中
- 已登录:
- 直接将数据提交到服务器
- 直接将数据提交到服务器
- 未登录:
- 判断用户是否登录:
注意点:
- 有个 bug:
- 添加完频道之后,关闭频道操作面板,直接跳转到新增的频道中去无法获取文章数据
动态给添加的频道加这些属性
- 添加完频道之后,关闭频道操作面板,直接跳转到新增的频道中去无法获取文章数据
10 - 高亮选中频道
步骤:
- 1.0 在频道操作面板中添加字体变红的样式
- 2.0 将首页中选中的频道的下标传入到频道面板中
- 3.0 在频道面板中接收属性
- 4.0 根据接收到的属性设置选中的颜色
- 5.0 给频道面板中的频道选项添加点击事件:
- 要将 active 改为当前点击的频道的下标
这里有衍生出一个知识点.sync:
v-model原理:传入的键:value , 修改的事件名 input -->
为了能够让数据与组件进行双向绑定:不使用 v-model 的情况下进行双向绑定,可以使用一个关键字 .sync
.sync 与 v-model 的作用是一样的,也可以用来进行双向绑定
.sync 在传入时 键:为 任意的(xxx) 修改的事件名 update:xxx
11-解决 bug
bug1:
- 表现:点击叉叉,会先删除当前点击的频道; 还会将选中的频道切换到这个下标中
- 原因:事件冒泡
- 解决方案:阻止冒泡
bug2:
- 表现:新增频道之后,马上切换到这个频道下面会报错
- 原因:因为新增的频道中只两个属性(id, name),而在页面上渲染时,除要这两个属性之外,还需要四个额外属性
- articleList
- isLoading
- loading
- finished
- 解决方案:添加频道时,给频道添加这些额外属性
bug3:
- 表现:在频道子组件如果要×掉的频道在所在频道的前面,一点×,那个所在频道就会往前跳一个,不是之前所在的那个频道
- 原因:因为×掉了,后面的index往前面替补,那当前所在的active就往前一个了
- 解决方案:
详细代码:index主页的子组件com文件夹下的channel.vue:
<template>
<div>
<!-- <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">我是内容</van-popup> -->
<!-- <van-popup :value="show" @input="v=>show=v" position="bottom" :style="{ height: '30%' }">我是内容</van-popup> -->
<!-- 弹出层 -->
<van-popup :value="show" @input="myinput" position="bottom" :style="{ height: '80%' }">
<!-- 我的频道 -->
<van-cell title="我的频道">
<template #default>
<van-button plain v-if="isShow===false" @click="isShow=true" round size="mini" type="danger">编辑</van-button>
<van-button plain v-else @click="isShow=false" round size="mini" type="danger">完成</van-button>
</template>
</van-cell>
<van-grid>
<van-grid-item class="itemF" @click="changeChannel(index)" v-for="(item, index) in channelList" :key="index">
<template #text>
<span class="word" :class="{active:active===index}">{{item.name}}<van-icon @click.stop="delChannel(item,index)" v-show="isShow && index!==0" class="iconx" name="clear" /></span>
</template>
</van-grid-item>
</van-grid>
<!-- 频道推荐 -->
<van-cell title="频道推荐" />
<van-grid>
<van-grid-item @click="addChannel(item)" v-for="(item, index) in newChannel" :key="index" :text="item.name" />
</van-grid>
</van-popup>
</div>
</template>
<script>
// 导入发送得到全部频道列表,添加用户频道的网络请求
import { apiGetAllChannel, apiUpdateChannel } from '@/api/channel'
import { setLocal } from '@/utils/mylocal'
export default {
// show:控制面板的显示与隐藏
// channelList: 频道列表
// active : 当前所在频道的下标
props: ['show', 'channelList', 'active'],
data () {
return {
// 控制叉叉显示隐藏
isShow: false,
// 全部频道
allChannel: []
}
},
mounted () {
this.getAllChannel()
},
computed: {
newChannel () {
// 第一步得到我的频道数据中所有元素id的集合
const ids = this.channelList.map((item) => {
return item.id
})
// 第二步得到我的频道不在全部频道中的那些频道
const newArr = this.allChannel.filter((item) => {
return !ids.includes(item.id)
})
return newArr
}
},
methods: {
// 将来点击遮罩尘会触发这个方法:有一个参数
myinput (v) {
this.$parent.show = v
},
// 发送请求得到全部频道列表数据
async getAllChannel () {
const res = await apiGetAllChannel()
// console.log(res)
this.allChannel = res.data.data.channels
},
// 点击频道推荐里面的频道然后添加到我的频道中,并且在频道推荐点击中的自己要变没
// 这里只用操作一步主要是用的计算属性的特性:缓存计算结果 并且 当计算属性依懒性发生改变时会重新执行计算属性
addChannel (item) {
this.channelList.push(item)
this.saveChannel(item)
this.$set(item, 'isLoading', false)
this.$set(item, 'loading', false)
this.$set(item, 'finished', false)
this.$set(item, 'articleList', [])
},
// 删除频道
delChannel (item, index) {
this.channelList.splice(index, 1)
this.saveChannel(item, index)
if (this.active > index) {
this.$parent.active = this.active - 1
}
},
// 封装保存频道列表(修改删除channelList后,要么从本地修改要么发请求)的方法
async saveChannel (item, index) {
// 判断有没有登录,没有登录的话给localStorage中设置添加,删除后的用户频道
// 下次没有登录的人直接从localStorage中取出来已经添加,删除过的用户频道
const token = this.$store.state.userInfo.token
if (!token) {
setLocal('channelList', this.channelList)
} else {
// 如果有登录的话,就发送请求添加,删除用户频道
// 这里发送请求的参数是一个数组里面是 :新的频道的id与序号
// seq:序号默认是从1开始的
// 由于id=0对应的是推荐,所以这个数据不应该被操作,我们应该把id=0的数据从这个用户频道删掉
const channels = this.channelList.slice(1).map((item, index) => {
return {
id: item.id,
seq: index + 2
}
})// [{id:'频道的id',seq:'频道的序号'},{}]
// console.log(channels)
await apiUpdateChannel(channels)
}
},
changeChannel (index) {
// this.$parent.active = index
this.$emit('update:active', index)
}
}
}
</script>
效果演示: