文章列表制作-数据渲染

一、云函数创建

​ 定义articleList云函数

删除不需要返回的文章详情内容

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	const list = await db.collection('article')
	.aggregate()
	.project({
		content:0
	})
	.end()
	//返回数据给客户端
	return {
		code:0,
		msg:"数据请求成功",
		data:list.data
	}
};

二、前端进行数据获取

1. articleList组件 => created钩子中进行数据获取

   created () {
       this._getArticleList()
     }
    methods: {
       async _getArticleList () {
         const articleList = await this.$http.get_article_list()
         this.articleList = articleList
       }
     }
   

三、数据渲染

listItem组件中进行循环渲染使用

<view class="list-scroll-container">
		<scroll-view scroll-y="true" class="list-scroll">
			<view>
				<ListCard :item="item" v-for="(item,index) in articleList" :key="index"></ListCard>
			</view>
		</scroll-view>
	</view>

四、根据选项卡分类进行数据渲染

1. 添加全部分类选项

   async _intiLabelList() {
   				const labelList = await this.$http.get_label_list()
   				this.labelList = [{name:"全部"},...labelList]
   			}
   

2. 请求articleList时进行数据传递

   1. 为了保证导航数据的正确获取，调整created函数的_getArticle_list方法在watch中进行调用

       watch: {
          labelList(newVal,OldVal) {
          this._getArticleList()
          },
        },
      

3. 云函数进行数据过滤调整

   'use strict';
   const db = uniCloud.database()
   exports.main = async (event, context) => {
   	
   	const {classify} = event
   	
   	let matchObj = {}
   	
   	if(classify !== '全部') {
   		matchObj = {classify}
   	}
   	
   	const list = await db.collection('article')
   	.aggregate()   // 使用聚合的形式进行数据的获取
   	.match(matchObj)   // 根据匹配条件进行数据返回
   	.project({
   		content:0    // 本次查询不需要返回文章详情给前端
   	})
   	.end()
   	//返回数据给客户端
   	return {
   		code:0,
   		msg:"数据请求成功",
   		data:list.data
   	}
   };
   
   

4. 前端对数据进行缓存处理

   将原有接受内容数组转换为对象进行存储。每次change改变内容时进行判断操作处理

   使用$set方法进行对象的页面重新渲染

   async _getArticleList (currentIndex) {
         const articleList = await this.$http.get_article_list({classify:this.labelList[currentIndex].name})
         this.$set(this.articleData,currentIndex,articleList)
       }
   

​