1. Introduction to uni-app
Using uniCloud, you can handle the front-end and back-end development of small programs by yourself. No need to buy a domain name, no need to buy a cloud server. The most important thing is that when the amount of visits to the applet is small, the resources related to the back-end server are free.
2. Use of uni-app (uniCloud)
1. Create a uniCloud project
2. Create cloud service space
2.1 Associated cloud space
2.2 Create a new cloud space
3. Cloud function
3.1 Create a cloud function
3.1.2 Upload cloud function
3.2 Page call
in methods
3.3 Writing cloud functions
cloud function index.js
4. Cloud database
4.1 Create cloud data
4.2 Add cloud data
4.3 Cloud Data – Table Structure Introduction
4.4 Download table structure (download when needed)
4.5 Running the project
tip: connect cloud function
4.6 Display data (front end)
the code
<template>
<view>
<button @click="call">呼叫服务器</button>
<unicloud-db v-slot:default="{data, loading, error, options}" collection="concat">
<view v-if="error">{
{error.message}}</view>
<view v-else>
<uni-list v-for="item in data" :key="item._id">
<uni-list-item
:title="item.username" :note="item.tel"></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
onShow() {
if(this.$refs&&this.$refs.udb){
this.$refs.udb.$refresh()
}
},
methods: {
call(){
uniCloud.callFunction({
name:"base",
data:{
name:"mumu",age:18}
})
.then(res=>{
uni.showModal({
content:JSON.stringify(res.result)
})
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.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>
5. Cloud data addition, deletion, modification
5.1 Delete cloud data
5.2 Add cloud data
5.3 Modify cloud data
index code (deleted)
<template>
<view>
<button @click="call">呼叫服务器</button>
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="concat">
<view v-if="error">{
{error.message}}</view>
<view v-else>
<uni-list v-for="item in data" :key="item._id">
<uni-list-item
link :to="'/pages/update/update?item='+JSON.stringify(item)"
@longpress.native="$refs.udb.remove(item._id)"
:title="item.username" :note="item.tel"></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
onShow() {
if(this.$refs&&this.$refs.udb){
this.$refs.udb.$refresh()
}
},
methods: {
call(){
uniCloud.callFunction({
name:"base",
data:{
name:"mumu",age:18}
})
.then(res=>{
uni.showModal({
content:JSON.stringify(res.result)
})
})
.catch(err=>{
console.log(err);
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.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>
add code
<template>
<view>
<uni-easyinput v-model="item.username" placeholder="请输入姓名"/>
<uni-easyinput v-model="item.tel" placeholder="请输入电话"/>
<button @click="addConcat">添加</button>
</view>
</template>
<script>
export default {
data() {
return {
item:{
username:"",
tel:""
}
}
},
methods: {
addConcat(){
// 数据库
var db=uniCloud.database()
// 获取表
db.collection("concat").add(this.item) //执行添加
.then(res=>{
uni.showToast({
title:"添加成功"
})
})
.catch(err=>{
uni.showModal({
title:JSON.stringify(err)
})
})
}
}
}
</script>
<style>
</style>
modify the code
<template>
<view>
<uni-easyinput v-model="item.username" placeholder="请输入姓名"/>
<uni-easyinput v-model="item.tel" placeholder="请输入电话"/>
<button @click="updateConcat">更新</button>
</view>
</template>
<script>
export default {
data() {
return {
item:{
username:"",
tel:""
}
}
},
methods: {
updateConcat(){
var item={
...this.item}
// 删除id
delete item._id
const db=uniCloud.database()
db.collection("concat")
.doc(this.item._id)
.update(item)
.then(res=>{
uni.showToast({
title:"更新成功"
})
})
.catch(err=>{
uni.showModal({
title:JSON.stringify(err)
})
})
}
},
onLoad(option) {
this.item=JSON.parse(option.item)
}
}
</script>
<style>
</style>
6. Schema automatically generates code
6.1 Create cloud data
6.2 Download and rely on schema merge
6.3 run
