微信小程序实现作品，收藏，关注tab动态切换

一、后台

• 作品：
  //videoController.java

显示用户视频用到/showAll接口，注意Videos类里面定义了userId便于我们查询对应用户的作品信息

 @PostMapping(value = "/showAll")
    public IMoocJSONResult showAll(@RequestBody Videos video, Integer isSaveRecord,
                                   Integer page, Integer pageSize) throws Exception{

//videosMapperCustom.xml

当有userId的值时，查询对应的用户的视频信息

 <select id="queryAllVideos" resultMap="BaseResultMap" parameterType="String">
  
  	select v.*,u.face_image as face_image,u.nickname as nickname from videos v
  	left join users u on u.id = v.user_id
  	where 
  		1 = 1
  		<if test=" videoDesc != null and videoDesc != '' ">
  			and v.video_desc like '%${videoDesc}%'
  		</if>
  		<if test=" userId != null and userId != '' ">
			and v.user_id = #{userId}
		</if>
  		and v.status = 1
  	order by v.create_time desc
  
  </select>

• 收藏
  //videoController.java

根据 userId直接查询users_like_videos表就可以

 @PostMapping("/showMyFollow")
    public IMoocJSONResult showMyFollow(String userId, Integer page) throws Exception {

        if (StringUtils.isBlank(userId)) {
            return IMoocJSONResult.ok();
        }

        if (page == null) {
            page = 1;
        }

        int pageSize = 6;  //分页显示，每一页显示六条信息

        PagedResult videosList = videoService.queryMyFollowVideos(userId, page, pageSize);

        return IMoocJSONResult.ok(videosList);
    }

//videoMapperCustom.xml

关联查询：先查询users_like_videos表获取videoId后再在video表里面查询显示视频信息

<!-- 查询我喜欢的视频 -->
	<select id="queryMyLikeVideos" resultMap="BaseResultMap" parameterType="String">
		select v.*,u.face_image as face_image,u.nickname as nickname from videos v 
		left join users u on v.user_id = u.id
		where 
			v.id in (select ulv.video_id from users_like_videos ulv where ulv.user_id = #{userId})  
			and v.status = 1
			order by v.create_time desc
	</select>

• 关注（关注的人发布的视频信息）
• //videoController.java

根据 userId直接查询users_fans表就可以

 @PostMapping("/showMyFollow")
    public IMoocJSONResult showMyFollow(String userId, Integer page) throws Exception {

        if (StringUtils.isBlank(userId)) {
            return IMoocJSONResult.ok();
        }

        if (page == null) {
            page = 1;
        }

        int pageSize = 6;  //分页显示，每一页显示六条信息

        PagedResult videosList = videoService.queryMyFollowVideos(userId, page, pageSize);

        return IMoocJSONResult.ok(videosList);
    }

//videoMapperCustom.xml

关联查询：先查询users_fans表获取userId后再在videos表里面查询显示用户发布的视频信息

	<!-- 查询我关注的人发的视频 -->
	<select id="queryMyFollowVideos" resultMap="BaseResultMap" parameterType="String">
		select v.*,u.face_image as face_image,u.nickname as nickname from videos v 
		left join users u on v.user_id = u.id
		where 
			v.user_id in (select uf.user_id from users_fans uf where uf.fan_id = #{userId})
			and v.status = 1
			order by v.create_time desc
	</select>

二、前端
1.作品，收藏，关注tab数据绑定
//mine.wxml
（1）tab栏颜色变化

{{videoSelClass}}: 用于点击对应的tab栏时该tab栏颜色变为灰色
{{isSelectedWork}}用于点击对应的tab栏时之外的两个tab栏颜色变为白色

<view class='container-video'>
    <!-- 发布过的作品 -->
    <view class='{{videoSelClass}} {{isSelectedWork}}' bindtap='doSelectWork'>作品</view>
    <!-- 收藏的点赞的视频 -->
    <view class='{{videoSelClass}} {{isSelectedLike}}' bindtap='doSelectLike'>收藏</view>
    <!-- 用户关注过人发表的视频 -->
    <view class='{{videoSelClass}} {{isSelectedFollow}}' bindtap='doSelectFollow'>关注</view>
</view>

（2）tab栏下方的显示页面变化

{{myWorkFalg}}，{{myLikesFalg}}，{{myFollowFalg}}:用于点击对应的tab栏后，栏目对应的view会出现，其他两个栏目对应的view会隐藏

<view class='container-video-list'>

<view hidden='{{myWorkFalg}}'>
    <block wx:for="{{myVideoList}}" >
        <image src='{{serverUrl}}{{item.coverPath}}' class='videoImage' mode="aspectFill" bindtap='showVideo' data-arrindex='{{index}}'></image>
    </block>
</view>

<view hidden='{{myLikesFalg}}'>
    <block wx:for="{{likeVideoList}}" >
        <image src='{{serverUrl}}{{item.coverPath}}' class='videoImage' mode="aspectFill" bindtap='showVideo' data-arrindex='{{index}}'></image>
    </block>
</view>

<view hidden='{{myFollowFalg}}'>
    <block wx:for="{{followVideoList}}" >
        <image src='{{serverUrl}}{{item.coverPath}}' class='videoImage' mode="aspectFill" bindtap='showVideo' data-arrindex='{{index}}'></image>
    </block>
</view>

</view>

2.作品，收藏，关注 动态切换
//mine.js

点击对应的tab栏时同时触发对应的事件，首先给绑定的数据赋值，然后请求显示视频信息。 以下，以点击”作品“为例

首先给绑定的数据赋值:

doSelectWork: function () {
    this.setData({
      isSelectedWork: "video-info-selected",  //点击哪个就给哪一个赋灰色的那个属性名
      isSelectedLike: "",
      isSelectedFollow: "",

      myWorkFalg: false,
      myLikesFalg: true,
      myFollowFalg: true,

      myVideoList: [],
      myVideoPage: 1,
      myVideoTotal: 1,

      likeVideoList: [],
      likeVideoPage: 1,
      likeVideoTotal: 1,

      followVideoList: [],
      followVideoPage: 1,
      followVideoTotal: 1
    });

    this.getMyVideoList(1);
  }

然后，请求显示发布的视频信息

  getMyVideoList: function (page) {
    var me = this;

    // 查询视频信息
    wx.showLoading();
    // 调用后端
    var serverUrl = app.serverUrl;
    wx.request({
      url: serverUrl + '/video/showAll/?page=' + page + '&pageSize=6',
      method: "POST",
      data: {
        userId: me.data.userId
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var myVideoList = res.data.data.rows;
        wx.hideLoading();

        var newVideoList = me.data.myVideoList;
        me.setData({
          myVideoPage: page,
          myVideoList: newVideoList.concat(myVideoList),
          myVideoTotal: res.data.data.total,
          serverUrl: app.serverUrl
        });
      }
    })
  }