04-vue移动端项目(主页index的子组件频道面板com：单向数据流概念, 利用数组的filter与map从一个数组删除另外一个数组中所有的元素,计算属性compute缓存问题,.sync的问题）

最新推荐文章于 2023-09-22 15:45:30 发布

大力99

最新推荐文章于 2023-09-22 15:45:30 发布

阅读量377

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Tangoneone/article/details/106696595

版权

笔记专栏收录该内容

67 篇文章 7 订阅

订阅专栏

频道面板模块

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>

效果演示： 在这里插入图片描述

大力99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04-vue移动端项目(主页index的子组件频道面板com：单向数据流概念, 利用数组的filter与map从一个数组删除另外一个数组中所有的元素,计算属性compute缓存问题,.sync的问题）

频道面板模块01 - 打开频道操作面板面板可以使用 vant 中的组件：弹出层popup属性： v-model 控制面板的显示和隐藏的特点：v-model：设置为 true，面板就开启点击黑色遮罩层区域，面板就关闭步骤：a. 在页面上添加一个频道操作面板：默认隐藏b. 给操作面板按钮添加一个点击事件：将面板显示出来02- 将频道操作面板封装为组件1.0 由于频道操作是在 home 中完成了，home 中的逻辑已经足够多了，如果我们再将频道操作的逻辑也放到 home 中。将
复制链接

扫一扫