关注界面-结构搭建

添加路由守卫

1. 三方插件使用

   文档地址：https://hhyang.cn/v2/ (opens new window)

2. 进行守卫规则添加

   //全局路由前置守卫
   router.beforeEach((to, from, next) => {
     // 判断当前页面是否需要登录并且现在是没有登录的状态
     if (to.meta.needLogin && !store.state.userInfo) {
       next({
         name: "login",
         NAVTYPE: "push"  //跳转到普通页面，新开保留历史记录
       })
     } else {
       next();
     }
   });
   

3. 调整路由条装方式为绝对路径

   // listCard处理路径跳转
         uni.navigateTo({url: `/pages/articleDetail/articleDetail?params=${JSON.stringify(params)}`})
   
   

   4. article内调整路由接收方式

       this.articleData = this.$Router.currentRoute.query.params
      

   5. 处理小程序无法兼容问题

        // #ifdef MP-WEIXIN
      		if(!this.$store.state.userInfo) {
      			uni.redirectTo({
      				url:'/pages/userInfo/login/login'
      			})
      			return 
      		}
            // #endif
      

二、界面结构样式搭建

​

<view class="follow-container">
    <view class="follow-tab">
      <view class="follow-tab-box">
        <view class="follow-tab-item" :class="{active:currentIndex===0}">文章</view>
        <view class="follow-tab-item" :class="{active:currentIndex===1}">作者</view>
      </view>
    </view>
    <!-- 内容切换区域 -->
    <view class="follow-list-container">
      <swiper class="follow-list-swiper" :current="currentIndex">
        <swiper-item>
          <ListItem :isShowLoading="isShowLoading" :articleList="articleList" v-if="articleList.length"></ListItem>
          <view v-if="dataNone"  class="no-data">暂无收藏的文章</view>
        </swiper-item>
        <swiper-item>
          2
        </swiper-item>
      </swiper>
    </view>
  </view>

三、云函数定义

'use strict';
const db = uniCloud.database()
const $ = db.command.aggregate; // 获取一个聚合的操作符

exports.main = async (event, context) => {
	const {
		userId
	} = event;

	let userInfo = await db.collection('user').doc(userId).get()
	let article_likes_ids = userInfo.data[0].article_likes_ids; // 获取用户的收藏文章的数组

	const list = await db.collection('article')
		.aggregate()
		.addFields({
			// 判断这个文章的数组是否包含文章的_id ,$_id 指的是文章列表里面的_id,如果包含，返回true，否则，返回false，在这个里面是过滤查询的每一条记录值
			is_like: $.in(['$_id', article_likes_ids])
		})
		.project({
			content: 0
		})
		.match({
			is_like:true
		})
		.end();

	//返回数据给客户端
	return {
		code: 0,
		msg: "请求成功",
		data: list.data
	}
};