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

频道面板模块

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>


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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页