2021-09-01 黑马移动端头条项目-day04

已于 2022-04-14 09:50:33 修改
阅读量633 收藏 4
点赞数 1
分类专栏： B站视频整理 文章标签： html css html5
于 2021-09-01 17:58:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58017645/article/details/120033747
版权

目录

首页-文章列表

一、页面布局

二、频道列表

三、文章列表

四、文章列表项

首页-文章列表

一、页面布局

1.导航栏  NavBar 导航栏

2.文章频道列表 Tab标签页

二、频道列表

1.联调接口-获取文章频道列表数据，在utils/user.js中封装好请求方法

// 获取文章频道
export const getUserChannels = () => {
  return request({
    method: 'GET',
    url: '/app/v1_0/user/channels'
  })
}

2.在home/index.vue中引入该接口的方法，同时在页面加载时created调用方法

import { getUserChannels } from "@/api/user";
created() {
    this.loadChannels();
  },
methods: {
    // 请求获取频道数据
    async loadChannels() {
      const { data } = await getUserChannels();
      this.channels = data.data.channels;
    }
  }

3.遍历数据列表

三、文章列表

目标：实现加载和未加载

                对于未加载过的文章列表会重新加载，加载过的无需加载，点击列表按钮时直接显示文章列表内容，效果如下：

           实现菜单下滑出现：下拉刷新

           实现菜单上滑出现：加载中

           实现点击不同频道加载不同的文章内容，如下的思路会导致的一个问题：每次发请求都会对数组进行重置，有一个list数组，用来存储文章列表

                a. 查看a频道，请求获取数据，让list = a 频道文章

                b. 查看b频道，请求获取数据，让list = b 频道文章

                c. 查看c频道，请求获取数据，让list = c 频道文章

实际要想的效果是：加载过的数据列表不要重新加载 

实现：准备多个list数组，每个频道对应一个，查看哪个频道就把数据往哪个频道的列表数组中存放，即不会导致覆盖问题

 但是有多少频道就得有多少频道文章数组，一个个声明很麻烦，因此利用组件来处理，具体实现：

  • 封装一个文章列表组件
  • 然后在频道列表中把文章列表遍历出来

 因为文章列表组件中请求获取文章列表数据需要频道id，所以频道id应该作为props参数传递给文章列表数组，为了方便，可直接把频道对象传递给文章列表组件

 在文章列表中请求获取对应的列表数据，展示到列表中，最后把组件在频道列表中遍历出来，如下：

 编码：

1.封装文章组件列表，新建home/components/article-list组件，props限定channel为对象

<template>
  <div class="article-list">
    1111
  </div>
</template>
<script>
export default {
  name: "ArticleList",
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>
<style></style>

在home/index.vue中使用

引入组件 import ArticleList from "./components/article-list.vue";

注册组件 

components: {

    ArticleList

  },

使用article-list组件

    <!-- 标签页组件有一个功能，只有第一次查看标签页的时候才会渲染里面的内容 -->
    <van-tabs v-model:active="active">
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id"
      >
        <!-- 文章列表 -->
        <article-list :channel="channel" />
      </van-tab>
    </van-tabs>

补充：

父子传值：如果没有v-bind，则值里面的任何内容都是字符串；如果需要动态绑定数据，则使用v-bind

2.使用List列表组件:瀑布流滚动加载，用于展示长列表

List组件通过loading和finished两个变量控制加载状态，

当组件初始化或滚动到底部时，会触发load事件并将loading设置成true,此时可以发起异步操作，并更新数据，数据更新完毕后，将loading设置成false即可。

若数据已全部加载完毕，则直接将finished设置成true即可。

  • load事件
    • List初始化后会触发一次load事件，用于加载第一屏的数据
    • 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List会继续触发load事件，直到内容铺满屏幕或数据全部加载完成 
  • loading属性：控制加载中的loading状态
    • 非加载中，loading为false,此时会根据列表滚动位置判断是否触发load事件（内容列表不足一屏幕时，会直接触发）
    • 加载中，loading为true,表示正在发送异步请求，此时不会触发load事件
  • finished属性：控制加载结束的状态
    • 在每次请求完毕后，需要手动将loading设置为false,表示本次加载结束
    • 所有数据加载结束，finished为true，此时不会触发load事件
<template>
  <div class="article-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>
<script>
export default {
  name: "ArticleList",
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [], // 数据列表
      loading: false, // 控制加载中的loading状态
      finished: false // 控制加载结束的状态，当加载结束，不再触发加载更多
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

      // 1.请求获取数据
      setTimeout(() => {
        // 2.把数据放到list数组中
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 3.设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
        this.loading = false;
        // 4.数据全部加载完成
        if (this.list.length >= 40) {
          // 数据全部加载完成，不再触发加载更多
          this.finished = true;
        }
      }, 1000);
    }
  }
};
</script>
<style scoped lang="less">
.article-list {
  position: fixed;
  left: 0;
  right: 0;
  top: 90px;
  bottom: 50px;
  overflow-y: auto;
}
</style>

3.获取文章列表数据

创建src/api/artice.js文件编写接口请求

src/views/home/componenets/article-list.vue中加载和编写获取数据的方法

    async onLoad() {
      // 1.请求获取数据
      const { data } = await getArticles({
        channel_id: this.channel.id, // 频道ID
        timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳，timestamp相当于页码，请求最新数据使用当前最新时间戳，下一页数据使用上一次返回的数据中的时间戳
        with_top: 1 // 是否包含置顶，进入页面第一次请求时发包含置顶文章，1包含置顶，0不包含
      });
      console.log(data);
      // 2.把数据放到list数组中，利用了数组合并
      const { results } = data.data;
      this.articles.push(...results);
 }

把获取到的数据存入articles数组中，这里要用到数组合并的方法并push到articles数组中，不能直接写this.articles = data.data.results，会把articles数组中的值覆盖掉；同时在页面上进行数据渲染

<van-cell
        v-for="(article, index) in articles"
        :key="index"
        :title="article.title"
      />

 设置本次加载状态结束；判断数据是否加载完成，若未完成，则更新获取下一页数据的页码，若完成，则把加载状态设置结束

  async onLoad() {
      // 1.请求获取数据
      const { data } = await getArticles({
        channel_id: this.channel.id, // 频道ID
        timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳，timestamp相当于页码，请求最新数据使用当前最新时间戳，下一页数据使用上一次返回的数据中的时间戳
        with_top: 1 // 是否包含置顶，进入页面第一次请求时发包含置顶文章，1包含置顶，0不包含
      });
      console.log(data);
      // 2.把数据放到list数组中，利用了数组合并
      const { results } = data.data;
      this.articles.push(...results);
      // 3.设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
      this.loading = false;
      // 4.数据全部加载完成
      if (results.length) {
        // 若还有下一页数据,更新获取下一页数据的页码
        this.timestamp = data.data.pre_timestamp;
      } else {
        // 没有数据了，把加载状态设置结束，不再触发加载更多
        this.finished = true;
      }
    }

4.实现下拉刷新功能 - PullRefresh 下拉刷新组件

思路：

  • 注册下拉刷新事件（组件）的处理函数
  • 发送请求获取文章列表数据 
  • 把获取到的数据添加到当前频道的文章列表的顶部 unshift
  • 提示用户刷新成功

使用下拉组件将文章列表<van-list></van-list>包裹住

<van-pull-refresh
      v-model="isRefreshLoading"
      @refresh="onRefresh"
      :success-text="refreshSuccessText"
      :success-duration="1500"
    >
<van-list>.......</van-list>
</van-pull-refresh>

将下拉刷新组件需要的数据初始化到data中

      isRefreshLoading: false, //默认下拉刷新loading状态

      refreshSuccessText: "" // 下拉刷新成功的提示

下拉刷新时会触发组件的refresh事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将v-model设置为false,表示加载完成

 // 下拉刷新
    async onRefresh() {
      // 下拉刷新，组件会自己展示loading状态
      // 1.请求获取数据
      const { data } = await getArticles({
        channel_id: this.channel.id,
        timestamp: Date.now(),
        with_top: 1
      });
      // 2.把数据放到数据列表中，往顶部追加 unshift方法
      const { results } = data.data;
      this.articles.unshift(...results);

      // 3.关闭刷新的状态loading
      this.isRefreshLoading = false;

      this.refreshSuccessText = `更新了${results.length}条数据`;
    }

四、文章列表项

文章列表项的展示通过有三种排版：

第一种：

 第二种：

 第三种：

准备组件

        在该项目中有好几个页面中都有这个文章列表项内容，如果我们在每个页面中都写一次的话不仅效率低而且维护麻烦，所以把它封装为一个组件，然后在需要使用的组件中加载使用即可。

1.封装文章列表项组件，新建src/components/article-item/index.vue组件，props限定article为对象

<!-- 文章列表项展示 -->
<template>
  <div>2432</div>
</template>
<script>
export default {
  name: "index",
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>
<style></style>

在home/components/article-list.vue中：

在文章列表组件中注册使用文章列表项组件import ArticleItem from "@/components/article-item"，同时要注册组件 

components: {

    ArticleItem

  },

使用article-item组件

<article-item
          v-for="(article, index) in articles"
          :key="index"
          :article="article"
        >
</article-item>

展示列表项内容

  • 使用cell单元格组件
  • 展示标题
  • 展示底部信息
<!-- 文章列表项展示 -->
<template>
  <van-cell class="article-item">
    <div slot="title">{{ article.title }}</div>
    <div slot="label">
      <!-- 如果有3张图片，则显示3张 -->
      <div class="cover-wrap" v-if="article.cover.type === 3">
        <div class="cover-wrap-item">
          <van-image
            width="116"
            heigth="73"
            fit="cover"
            v-for="(img, index) in article.cover.images"
            :key="index"
            :src="img"
          >
          </van-image>
        </div>
      </div>
      <div class="label-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate }}</span>
      </div>
    </div>
    <!-- 如果有1张图片，则显示1张 -->
    <van-image
      v-if="article.cover.type === 1"
      width="116"
      heigth="73"
      fit="cover"
      :src="article.cover.images[0]"
    >
    </van-image>
  </van-cell>
</template>
<script>
export default {
  name: "index",
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>
<style></style>

样式调整后的版本：

<!-- 文章列表项展示 -->
<template>
  <van-cell class="article-item">
    <div slot="title" class="title van-multi-ellipsis--13">
      {{ article.title }}
    </div>
    <div slot="label">
      <!-- 图片包裹 -->
      <!-- 如果有3张图片，则显示3张 -->
      <div class="cover-wrap" v-if="article.cover.type === 3">
        <div
          class="cover-wrap-item"
          v-for="(img, index) in article.cover.images"
          :key="index"
        >
          <van-image class="cover-item" heigth="73" fit="cover" :src="img">
          </van-image>
        </div>
      </div>
      <!-- 底部信息包裹 -->
      <div class="label-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate }}</span>
      </div>
    </div>
    <!-- 如果有1张图片，则显示1张 -->
    <van-image
      v-if="article.cover.type === 1"
      class="right-cover"
      fit="cover"
      :src="article.cover.images[0]"
    >
    </van-image>
  </van-cell>
</template>
<script>
export default {
  name: "index",
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>
<style scoped lang="less">
.article-item {
  .title {
    font-size: 16px;
    color: #3a3a3a;
  }
  /deep/.van-cell__value {
    flex: unset; /* 去掉flex效果 */
    width: 116px;
    height: 73px;
    margin-left: 12px;
  }
  .right-cover {
    width: 116px;
    height: 73px;
  }
  .cover-wrap {
    display: flex;
    padding: 15px 0;
    .cover-wrap-item {
      flex: 1;
      height: 73px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item {
        width: 100%;
        height: 73px;
      }
    }
  }
}
</style>

然后会发现一个问题，在控制台中报错：

 若文章列表数据中的图片资源请求失败报错404,则说明资源没有了，并不是我们的问题；报错403，是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理

 如何处理第三方平台的图片资源保护？？？

服务端一般使用Referer 请求头识别访问来源，然后处理资源访问

 补充：Referer 

 可以在控制台中的请求头里看到这个字段：

 如何解决？

不要发送referrer，对方服务器就不知道你从哪来的了，姑且认为是你自己的

如何设置不发送referrer？

 在这里我们是统一在public/index.html下设置的，因为图片较多

 <meta name="referrer" content="no-referrer" />

 2.处理相对时间

如以下形式：

推荐两个第三方库：Moment.js ，Day.js；这里以Day.js为例，官网：Day.js · 中文文档 - 2kB 大小的 JavaScript 时间日期库

  • 安装 npm install dayjs --save
  • 创建src/utils/dayjs.js
// 初始化day.js相关配置
import Vue from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
// 配置使用处理相对时间
dayjs.extend(relativeTime)
// 配置使用中文语言包
dayjs.locale('zh-cn')

//
console.log(dayjs('2020-05-13').to(dayjs()))

// 把处理相对时间的格式包装为全局过滤器
// 然后就可以在任何组件的模板中使用了
// 所谓的过滤器其实是一个可以在模板中调用的函数而已
// 在组件的模板中使用过滤器，{{ xxx | relativeTime }}
// 管道符前面的内容会作为参数传递给过滤器函数
// 过滤器的返回值会渲染到使用过滤器的模板中
Vue.filter('relativeTime', value => {
  return dayjs(value).from(dayjs())
})
  • main.js文件引入：import './utils/dayjs'
  • 使用：<span>{{ article.pubdate | relativeTime }}</span>

一个小Pan桃❀
关注
专栏目录
黑马头条（day04）
weixin_56702252的博客
07-23 1177
利用阿里云内容安全与自管理敏感词，图片识别审核敏感词实现自媒体文章发布后自动审核的功能，审核完成后利用freemarker生成静态文件并上传至minio
黑马头条项目练习（day04）
szw2377132528的博客
03-11 1410
黑马头条项目
黑马头条vue2.0项目实战（七）——文章详情
最新发布
weixin_56370772的博客
08-11 938
如果需要修改 v-model 的规则名称，可以通过子组件的 model 属性来配置修改。
【项目笔记】java微服务：黑马头条（day04）
weixin_44883789的博客
03-16 1761
文章目录自媒体文章-自动审核1)自媒体文章自动审核流程2)内容安全第三方接口2.1)概述2.2)准备工作2.3)文本内容审核接口2.4)图片审核接口2.5)项目集成3)app端文章保存接口3.1)表结构说明3.2)分布式id3.3)思路分析3.4)feign接口4)自媒体文章自动审核功能实现4.1)表结构说明4.2)实现4.3)单元测试4.4)feign远程接口调用方式4.5)服务降级处理5)发布文章提交审核集成5.1)同步调用与异步调用5.2)Springboot集成异步线程调用6)文章审核功能-综合测试
【黑马头条】-day04自媒体文章审核-阿里云接口-敏感词分析DFA-图像识别OCR-异步调用MQ
bblb的博客
03-28 1669
day04自媒体文章审核-阿里云接口-敏感词分析DFA-图像识别OCR-异步调用MQ
基于Java得黑马头条项目------day04
zgz102928的博客
11-10 738
W
toutiao-m：黑马头条移动端
02-23
【 Toutiao-M：黑马头条移动端 】项目是一个基于Vue.js框架构建的移动应用，用于提供类似今日头条的新闻浏览体验。这个项目的重点在于利用Vue.js的特性来实现高性能、响应式的用户界面，为用户提供流畅的阅读体验。...
toutiao-m:基于 Vue.js 开发的移动端项目——黑马头条（页面下方扫码体验）
04-28
Vue.js 移动端项目——黑马头条 扫码体验 相关资源 GitHub 仓库： 学习笔记： 接口文档： 在线预览： 功能列表 登录注册 首页 频道列表 文章列表 频道编辑 搜索 联想建议 搜索历史记录 搜索结果 文章详情 ...
02-javaweb-13-WEB项目实战-黑马面面01.doc
10-14
02-javaweb-13-WEB项目实战-黑马面面01.doc
头条项目-完整版-黑马头条
07-06
【标题】"头条项目-完整版-黑马头条"是一个基于Vue.js框架的前端实战项目，旨在帮助开发者在完成基础的前端学习后，通过实践来提升技能。这个项目来源于知名的在线教育平台“黑马程序员”，旨在模拟真实的新闻资讯类...
黑马头条-移动项目
weixin_43502808的博客
10-06 457
黑马头条-移动端项目
黑马程序员JavaEE49期
12-11
黑马程序员JavaEE49期
黑马头条 各种踩坑合集 从0到1 欢
A123455342的博客
02-29 914
记录自己在学习黑马头条项目中遇到的各种问题自用，也给大家一个参考。
黑马头条项目 —3.4 调试方法
weixin_41672684的博客
10-13 347
调试方法 判断问题发生在前端还是后端 如果前端为网页，可以通过网页调试工具里面的network判断 在前端中触发一次接口调用的请求 查看network中对应的请求记录 如果没有发现有新的请求记录，表示前端有问题，并未发起请求 如果有请求记录，返回的状态码为200，但是页面没有想要的效果，表示前端没有正确处理200的响应 如果返回的状态码为4xx, 表示前端构造的请求有问题，比如404没有正确的请求网址，401、403请求的身份有问题，405请求的方式有问题，40
记录一个BUG（黑马头条），当我们修改了nginx的配置文件，然后执行nginx -s reload命令后，发现配置文件的修改并不生效
weixin_45729947的博客
04-21 482
在写黑马头条的时候，发现通过nginx反向代理自媒体文章，配置文件没有生效
黑马头条前置实战问题总结
qq_34404870的博客
06-03 576
项目前置实战问题汇总
2021-09-03 黑马移动端头条项目-day06
m0_58017645的博客
09-06 693
目录 文章搜索模块 一、创建组件并配置路由 二、页面布局 三、处理页面显示状态 四、搜索联想建议 4.1基本功能 4.2防抖优化 *** 4.3搜索关键字高亮 五、搜索结果 六、搜索历史记录 6.1 添加历史记录 6.2展示历史记录 6.3删除历史记录 6.4数据持久化 文章搜索模块 一、创建组件并配置路由 1.创建src/views/search/index.vue 2.然后把搜索页面的路由配置到根组件路由（一级路由） { path: '/s...
java 最新黑马头条项目 day1 环境搭建 Swagger
m0_73859807的博客
02-08 2495
随着智能手机的普及，人们更加习惯于通过手机来看新闻。由于生活节奏的加快，很多人只能利用碎片时间来获取信息，因此，对于移动资讯客户端的需求也越来越高。黑马头条项目正是在这样背景下开发出来。黑马头条项目采用当下火热的微服务+大数据技术架构实现。本项目主要着手于获取最新最热新闻资讯，通过大数据分析用户喜好精确推送咨询新闻黑马头条项目是对在线教育平台业务进行大数据统计分析的系统。碎片化、切换频繁、社交化和个性化现如今成为人们阅读行为的标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值