把首页的动态数据实现到页面里面。

首先新建云函数

通过云函数调用数据库内表的内容，来填充页面
image.png

image.png
这是创建完成后一个基本的内容
image.png
复制之前getLabel的代码
image.png
首先要获取数据库的引用
image.png
获取article表内的数据，然后返回list
image.png
上传并运行，这个云函数。
image.png
运行后的结果
image.png
get之前用field指定返回的字段
image.png
过滤掉content字段，
image.png
image.png
image.png
image.png

上传部署

写完云函数之后，一定要上传部署。
image.png
调用云函数
image.png

调用

image.png
单词拼错了修正。
image.png 

  1.       声明周期。**组件里面是不能应onLoad的**<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1604146746696-13605622-b2e6-45f4-8a43-8355feebc0d4.png#align=left&display=inline&height=279&margin=%5Bobject%20Object%5D&name=image.png&originHeight=558&originWidth=1070&size=283847&status=done&style=none&width=535)<br />在created里面调用getList方法<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1604146782232-db8ae17c-0543-4df1-bac1-2adef32a8229.png#align=left&display=inline&height=200&margin=%5Bobject%20Object%5D&name=image.png&originHeight=399&originWidth=1078&size=216608&status=done&style=none&width=539)<br />页面打印出了数据<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/192446/1604146805639-dd7abf61-fdba-4b22-b725-406654fc0006.png#align=left&display=inline&height=331&margin=%5Bobject%20Object%5D&name=image.png&originHeight=663&originWidth=1258&size=763219&status=done&style=none&width=629)

数据传递给list-item组件

image.png
声明list属性，给他一个空数组
image.png
image.png

list-item组件内接收

image.png
循环接收到的list数据
image.png
image.png

item具体内容传值

image.png
索引index没用到就删除掉。
image.png
我们每一个组件接收的是一个对象，所以这里类型定义为Object，然后default里面返回一个空对象{}
image.png
这里的mode就不需要了。删掉。
image.png
直接用item.mode
image.png
image.png

image.png
加上title
image.png
图片只取下标为0的 第一个就可以了。默认就显示一张图片
image.png
image.png
分类
image.png
浏览人数
image.png
image.png
image.png

再修改其他的模式

多图的只显示3张图，所以index要小于3
image.png
image.png

大图模式

image.png
image.png
image.png

页面报错

刷新页面，这是因为key重复了。
image.png
image.png
多图模式key改成index
image.png
再刷新 ，错误小时，右边是图片链接地址的问题。 图片链接暂时不用管。
image.png

结束