<template>
<view class="content">
<view class="buttompadding">
<view class="row" v-for="item in listarr" :key="item._id">
<view class="name">
{{item.title}}
</view>
</view>
</view>
<view class="container">
<view class="title">
<input type="text" v-model="title" placeholder="请输入内容" />
</view>
<view class="onbutton">
<button @click="onsubmit">提交</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '',
listarr: []
}
},
onLoad() {
//页面初始化调用数据
this.getdata()
},
methods: {
//获取数据的getdata方法
getdata() {
uniCloud.callFunction({
name: "getnotebookdata",
data: {}
}).then(res => {
this.listarr = res.result.data
console.log(this.listarr);
})
},
//点击事件,提交数据
onsubmit() {
console.log("用户点击了提交");
//将数据加入数组中
const newText = {
title: this.title
}; // 要添加的文本
this.listarr.push(newText); // 使用 push() 方法将文本添加到数组
console.log(this.listarr);
//连接云函数进行数据存储
uniCloud.callFunction({
name: "contentupload",
data: {
title: this.title
}
}).then(res => {
console.log(res);
})
//清空输入框
this.title = ""
//加载数据
this.getdata()
uni.redirectTo({
url: '/pages/index/index', // 关闭当前页面跳转到另外一个页面
});
}
}
}
</script>
<style>
.container {
display: flex;
justify-content: space-between;
/* 上面这串代码是作用是让元素平均分布
下面这串代码的作用是规定元素的排列方式
flex-direction: column-reverse; */
position: fixed;
right: 30rpx;
left: 30rpx;
bottom: 15rpx;
padding: 30rpx 0 0 0;
}
.name {
padding: 15rpx 30rpx;
}
.buttompadding {
padding: 0 0 150rpx;
}
</style>
这是主要代码
const db=uniCloud.database()
exports.main = async (event, context) => {
let arr= await db.collection("notebook").orderBy("_id","desc").get();
return arr
};
这是云函数,用于获取数据
const db=uniCloud.database();
exports.main = async (event, context) => {
let {title}=event
let res=await db.collection("notebook").add({
title
})
return res;
};
这个云函数是用于添加数据