vue项目day04

4、实现功能

1、栏目列表渲染
2、文章列表渲染
3、下拉刷新
4、上拉加载
5、完成点击栏目，切换不同新闻列表数据

1、栏目列表渲染

用户角度分析：点击登录，进入首页，直接就可以看到栏目列表数据

程序员角度分析：在created钩子函数中，发送请求，获取数据，然后根据数据渲染列表

拆解步骤：

1、封装获取栏目列表的接口函数
2、首页引入接口函数，把并在created中调用接口，请求并保存数据
3、根据数据渲染

2、新闻(文章)列表渲染

用户角度分析：点击登录，进入首页，直接就可以看到新闻列表数据

程序员角度分析：在created钩子函数中，发送请求，获取数据，然后根据数据渲染列表

拆解步骤：

1、封装获取新闻列表的接口函数
2、首页引入接口函数，把并在created中调用接口，请求并保存数据
3、根据数据渲染
- 每一篇文章都需要渲染自己的结构，这个结构如何判断呢？
- 答：文章详情数据中有相应的属性进行判断
  - 视频结构：type值为2
  - 上下结构：type值为1且 cover数组长度大于等于3
  - 左右结构：type值为1且cover数组长度小于3

3、下拉刷新

用户角度分析：用户按住屏幕，往下拖动，会出现“刷新”的一样提示，然后释放手指，开始刷新页面数据。

程序员角度分析：用户按住屏幕，往下拖动，会出现“刷新”的一样提示，然后释放手指，再次调用获取“新闻列表”接口，拿到最新的数据，更新到浏览器中。

拆解：

实现用户按住屏幕往下拖动，出现刷新提示的效果
实现刷新功能 --- 在下拉刷新的时候调用“新闻列表”接口

4、上拉加载

通过分页实现上拉加载功能的，接口提供了2个参数来实现，pageIndex：表示当前的页数，pageSize：表示数据的条数。

实现上拉加载功能之前，先为我们之前封装的接口添加这个两个参数。

用户角度分析：用户按住屏幕，往上拖动，拖到底部显示“加载中”效果，然后开始加载更多数据。

程序角度分析：用户按住屏幕，往上拖动，拖到底部显示“加载中”效果，然后开始调用接口加载下一页的数据。

拆解步骤：

1、用户按住屏幕，往上拖动，拖到底部显示“加载中”效果
- 使用vant组件库实现
2、在上拉加载的回调函数中，调用接口实现加载下一页的数据

5、完成点击栏目，切换不同新闻列表数据

完成，栏目列表，自动选中“头条”的效果，只需要给tabs标签添加v-model="curIndex"即可

用户角度分析：点击不同的栏目，我们要获取到对应栏目的新闻列表展示出来。

程序员角度分析：给栏目绑定点击事件，然后再事件处理函数中获取到栏目的下标值，然后修改curIndex为当前栏目下标值即可，然后调用getNews即可获取到最新的数据。

拆解步骤：

1、给栏目绑定事件，并声明事件处理函数。
2、在函数中获取栏目对应的下标值
3、调用getNews获取栏目对应的新闻列表数据
- 因为点击栏目切换显示不同数据之前，也需要清空数组和finished等等数据，这些代码我都在下拉刷新函数中存在了，所以最终，我们只需要调用下拉刷新的函数即可。

7、文章详情(articleDetail.vue)

1、创建组件

2、配置路由

3、布局

主要结构：直接从上课资料中复制过来使用即可。

4、实现功能

1、根据新闻id渲染新闻详情数据
2、完成关注用户功能
3、完成点赞文章功能
4、完成收藏文章功能

完成从首页跳转到新闻详情页面中，并且传递id到详情页面

1、根据新闻id渲染新闻详情数据

用户角度分析：点击首页新闻，跳转到对应的详情页面，然后就能够看到详情内容

程序员角度分析：进入页面立刻调用接口，请求文章详情数据，然后根据详情数据进行渲染。

拆解步骤：

1、封装“文章详情”接口函数
2、在详情页面引入接口函数，并在created中调用接口函数，请求并保存数据
3、根据数据渲染

2、完成关注用户功能

实现功能

用户角度分析：点击关注按钮，实现关注用户功能

程序员角度分析：给关注按钮绑定点击事件，并声明事件处理函数，然后再事件处理函数中调用“关注”接口。

拆解步骤：

1、给关注按钮绑定点击事件，并声明事件处理函数
2、封装“关注”,"取消关注"用户的接口函数
3、在事件处理函数中调用，实现关注功能
- 文章详情接口返回了一个字段has_follow属性给我们判断当前是否已经关注了该用户，true表示已关注，false表示未关注

实现按钮效果

已关注-效果：黑色边框和字体，白色背景

未关注-效果：白色字体，红色背景

需要根据当前作者是否已经关注，然后动态设置样式，动态设置样式有2种方式，动态类名和动态行内样式，这里我们选用动态类名来实现，动态判断的条件就是文章详情中的has_follow属性进行判断，true表示已关注，false表示未关注。

1、准备好类名active，设置已关注样式
2、根据has_follow属性动态设置class即可

3、完成点赞文章功能

功能一：实现点赞按钮的效果

已点赞效果：红色字体
未点赞效果：黑色边框黑色字体
我们需要动态设置点赞按钮的效果，那么需要一个判断条件，文章详情接口返回了一个has_like的属性给我们判断，当这个属性的值为true表示已点赞，否则未点赞。
- 1、准备已点赞的类名active，写上对应的样式
- 2、根据has_like动态设置类名active即可
动态设置按钮的文本，当已登录显示点赞数量，点赞数量我们的文章详情接口通过like_length属性给我们，未登录显示“点赞”两个字
- 如何判断用户是否已登录？答：我们可以通过token来判断是否已登录，从动太设置按钮文本。
  - 1、在文章详情页面获取token
  - 2、动态设置按钮的文本
功能二：实现点赞功能
- 用户角度分析：点击点赞按钮，实现点赞功能
- 程序员角度分析：给点赞按钮绑定点击事件，声明事件处理函数，然后再函数中调用接口实现点赞
  - 1、给点赞按钮绑定点击事件，声明事件处理函数
  - 2、封装“点赞”的接口函数
  - 3、在详情页面引入接口函数，并在点击事件的处理函数中调用接口，实现功能