还是使用之前创建的cloud-demo1数据库
在数据库中新建数据表article
新增一条数据
新建一个获取数据的云函数art_get_all
云函数index.js
'use strict';
const db=uniCloud.database();
exports.main = async (event, context) => {
return await db.collection("article").get();
};
在前端首页连接云函数
<script>
export default {
data() {
return {
}
},
onLoad() {
this.getData()
},
methods: {
// 获取数据库列表
getData(){
uniCloud.callFunction({
name:"art_get_all"
}).then(res=>{
console.log(res);
})
},
// 点击按钮跳转到新增页面
goAdd(){
uni.navigateTo({
url:"/pages/add/add"
})
}
}
}
</script>
刷新首页，拿到数据库中的数据了
渲染数据
在data中定义变量listArr，用来接收数据并渲染到模板中
<template>
<view class="home">
<view class="content">
<view class="item" v-for="item in listArr" :key="item._id">
<view class="text">
<view class="title">{{item.title}}</view>
<view class="info">
<text>{{item.author}}</text>
<text>{{item.posttime}}</text>
<text>删除</text>
</view>
</view>
<view class="pic">
<image src="../../static/images/nopic.jpg" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 跳转到新增页面 -->
<view class="goAdd" @click="goAdd">+</view>
</view>
</template>
<script>
export default {
data() {
return {
listArr:[]
}
},
onLoad() {
this.getData()
},
methods: {
// 获取数据库列表
getData(){
uniCloud.callFunction({
name:"art_get_all"
}).then(res=>{
console.log(res);
this.listArr = res.result.data
})
},
// 点击按钮跳转到新增页面
goAdd(){
uni.navigateTo({
url:"/pages/add/add"
})
}
}
}
</script>
<!-- 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。 -->
<style lang="scss" scoped>
.home {
.content {
padding: 30rpx;
.item {
// 弹性布局,使文字和图片在一行显示
display: flex;
// 两端对齐
justify-content: space-between;
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
.text {
flex:1;
// 下面这三行是为了给标题和作者添加边距
// 给文字加弹性盒模型，会使标题和作者时间显示在一行
display: flex;
// 使标题和作者纵向排列
flex-direction: column;
// 标题和作者上下两端对齐
justify-content: space-between;
// 使文字和图片有20的间隔
padding-right: 20rpx;
.title {
font-size: 44rpx;
color: #333;
// 使文字对齐,没看出效果来,不知道什么用
text-align: justify;
// 下面是标题超出两行省略号显示
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.info {
font-size: 28rpx;
color:#888;
// 给作者、时间部分文字间隔
text {
padding-right: 20rpx;
}
}
}
.pic {
width: 260rpx;
height: 180rpx;
image{
width: 100%;
height: 100%;
}
}
}
}
// 给按钮写样式
.goAdd {
width: 120rpx;
height: 120rpx;
background: #2B9939;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 50rpx;
// 盒子固定定位到右下角
position: fixed;
right: 60rpx;
bottom: 100rpx;
// 按钮阴影
box-shadow: 0 0 20rpx rgba(43, 153, 157, 0.6);
}
}
</style>
