再也不依靠后端了,使用uniCloud,小程序的前后端开发。不用买域名、不用买云服务器。
1.下载最新版的HBuilderX,并创建一个uniCloud的项目
2.创建服务空间
3.右键 新建fun
服务端:
'use strict';
const db = uniCloud.database(); // 建立链接
exports.main = async (event, context) => {
// 指向云端的表
const collection = db.collection('list')
// 插入event数据
collection.add(event)
// event为客户端上传的参数
// //返回数据给客户端
return await event
};
客户端
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<!-- 留言提交 -->
<view class="top">
<view>我:</view>
<view class="text">
<input type="text" v-model="list.content" class="input" placeholder="消息" />
<input type="text" v-model="list.name" class="input" placeholder="用户名" />
</view>
<button size="mini" type="primary" @click="add()">发送</button>
</view>
<!-- 留言list -->
<view class="text-area">
<view>收到</view>
<button class="del" size="mini" type="warn">del</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: {
name: "", // 名字
content: "",
}
}
},
onLoad() {
},
methods: {
add() {
uniCloud.callFunction({
name: 'add',
data: this.list
}).then((res) => {
console.log(res)
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
margin: 40rpx;
/* align-items: center; */
/* justify-content: center; */
}
.top {
display: flex;
}
.text {
display: flex;
flex-direction: column;
}
.input {
border-bottom: 1px solid red;
}
.text-area {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
/* border: 1px solid red; */
}
.del {
margin-top: 4rpx;
padding: 4rpx;
/* line-height: 2rpx; */
margin-left: 0;
border: 1px solid red;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
uniCloud云开发平台简介及云函数数据库基础操作练习(新人首作,欢迎支持_Sure小硕的博客-CSDN博客_unicloud云函数