unicloud使用教程

// 创建项目uniapp，使用阿里云，点击unicloud文件右键关联云服务空间，cloudfunctions文件右键新建云函数queryall.js,写完后上传部署
'use strict';
exports.main = async (event, context) => {const db = uniCloud.database().collection('test')switch (event.only){case 'all':return await db.get()break;case 'conditionquery':return await db.where({ name:event.name }).get()break;case 'add':return await db.add({name:event.name,age:event.age,skill:event.skill})break;case 'delete':return await db.doc(event.id).remove()break;case 'editid':return await db.where({_id:event.id}).get()break;case 'edit':return await db.where({_id:event.id}).update({name:event.name,age:event.age,skill:event.skill,})break;default:break;}
};

// 点击database文件右键创建db_init.json{"test": { // test为表名"data": [ // 表中数据{"name": "路飞","age": "19","skill": "猿王枪"}, {"name": "索隆","age": "20","skill": "狮子歌歌"}, {"name": "山治","age": "20","skill": "恶魔疯脚"}]},"content":{}
}

// 在database文件下新建test.schema.json文件{"bsonType": "object","required": [],"permission": {"read": true,"create": true,"update": true,"delete": true},"properties": {"_id": {"description": "ID，系统自动生成"}}
}

// 页面代码<template><view class="container"><view style="display: flex;"><input v-model="queryval" style="width:350rpx;border: #18BC37 2rpx solid;" type="text" placeholder="请输入" /><button @click="querybtn" size="mini" type="primary">查询</button><button @click="$refs.popup.open('top')" size="mini" type="default">新增</button></view><uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange"><uni-tr><uni-th width="40" align="center">名字</uni-th><uni-th width="40" align="center">年龄</uni-th><uni-th width="60" align="center">绝招</uni-th><uni-th width="10" align="center">操作</uni-th></uni-tr><uni-tr v-for="item of list" :key="item._id"><uni-td align="center">{{ item.name }}</uni-td><uni-td align="center">{{ item.age }}</uni-td><uni-td align="center">{{ item.skill }}</uni-td><uni-td><view class="uni-group"><button @click="editbtn(item._id)" class="uni-button" size="mini" type="primary">修改</button><button @click="deletebtn(item._id)" class="uni-button" size="mini" type="warn">删除</button></view></uni-td></uni-tr></uni-table><!-- 弹框 --><uni-popup ref="popup" type="bottom" :mask-click="false"><view class="tan"><uni-forms><uni-forms-item label="姓名"><uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /></uni-forms-item><uni-forms-item label="年龄"><uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄" /></uni-forms-item><uni-forms-item label="绝招"><uni-easyinput type="text" v-model="formData.skill" placeholder="请输入绝招" /></uni-forms-item></uni-forms><view style="display: flex;"><button @click="addbtn" style="width:260rpx" type="primary">确定</button><button @click="cancelbtn" style="width:260rpx" type="default">取消</button></view></view></uni-popup></view>
</template><script>
export default {data() {return {queryval: '',list: [],formData:{name:'',age:'',skill:''},id:null,};},watch: {queryval(q, w) {this.queryval === '' && this.all();}},onLoad() {this.all();},methods: {// 初始化all() {uniCloud.callFunction({name: 'queryall',data: {only: 'all'},success: res => {this.list = res.result.data;},fail: err => {console.log(err);}});},// 查询querybtn() {uniCloud.callFunction({name: 'queryall',data: {only: 'conditionquery',name: this.queryval},success: res => {this.list = res.result.data;},fail: err => console.log(err)});},// 新增addbtn() {const {name,age,skill}=this.formDataif(this.id ===null){this.formData.name=''this.formData.age=''this.formData.skill=''uniCloud.callFunction({name:'queryall',data:{only:'add',name,age,skill},success:res=>{this.all()},fail:err=>console.log(err)})}else{uniCloud.callFunction({name:'queryall',data:{only:'edit',id:this.id,name:this.formData.name,age:this.formData.age,skill:this.formData.skill,},success:res=>{this.all()this.id=null},fail:err=>console.log(err)})}this.$refs.popup.close()},// 编辑editbtn(id){this.id=idconsole.log(this.id);this.$refs.popup.open('bottom');uniCloud.callFunction({name:'queryall',data:{only:'editid',id,},success:res=>{this.formData.name=res.result.data[0].namethis.formData.age=res.result.data[0].agethis.formData.skill=res.result.data[0].skill},fail:err=>console.log(err)})},// 删除deletebtn(id) {uniCloud.callFunction({name:'queryall',data:{only:'delete',id},success:res=>this.all(),fail:err=>console.log(err)})},// 取消按钮cancelbtn(){this.id=nullthis.formData.name=''this.formData.age=''this.formData.skill=''this.$refs.popup.close();},selectionChange(q) {console.log(q);},change(q) {console.log(q);}}
};
</script><style>
.container {padding: 20px;font-size: 14px;line-height: 24px;
}
.tan {width: 700rpx;height: 600rpx;background-color: #ffffff;margin: 300rpx auto;border-radius: 20rpx;padding: 80rpx 40rpx;box-sizing: border-box;
}
</style>

unicloud使用教程相关推荐

【云开发】全网最详细壁纸小程序教程+源码
程序特点: 1.本款小程序为云开发版本,不需要服务器域名 2.本程序反应速度极快,拥有用户投稿.积分系统. 3.独家动态壁纸在线下载,给用户更多的选择 4.最新版套图功能源码下载: 链接:https ...
uniapp、uniCloud实现微信公众号自动查询淘宝京东优惠券制作过程
uniapp.uniCloud实现微信公众号自动查询淘宝京东优惠券制作过程微信公众号自动查询淘宝京东优惠券机器人制作教程.服务器通过uniapp提供的uniCloud云服务搭建,建议使用阿里云,不要 ...
微信早安，利用uniCloud阿里云的云函数实现定时推送
最近比较火的微信早安,看了一下小红书 @猪咪不是猪的教程,也动手做了一下,并做了一下实现定时的优化与符合我自己需求的修改.由于本人并不很熟悉python,所以部分修改是基于教程源码做修改的,在此也感谢 ...
uniCloud 云函数
1本地云函数的创建和调用 1 创建uniapp项目 2 创建1个服务空间 https://unicloud.dcloud.net.cn/home 3 关联创建的云服务 cloudfunctions 存 ...
零成本搭建实验室、课题组网站教程（基于uniapp）
简介使用uniapp快速开发实验室.课题组网站/小程序,后端采用云开发,零成本. 项目预览地址,由于未配置域名,存在ip访问的限制,若提示请求过于频繁则等待一段时间重新访问. 开发目的宣传与分享. ...
头像制作抖音微信壁纸小程序搭建一个基于uniCloud阿里OSS对象存储的免费图床源码
图床演示https://e.hmwlcm.cn/ 图床源码https://download.csdn.net/download/qq_43527188/85117392 前言: 目前市面上很多图床基本 ...
uniapp+unicloud开发微信小程序流程
微信小程序的简单开发流程,我用一个自制已上线的微信小程序皮皮虎去水印为例,做一个比较详细的开发流程分析. 框架选择选择uniapp: 1.为了开发效率,我选择uniapp框架,使用vue3.2语 ...
unipush2.0教程
解释一下名词透传消息:无论手机app,是否在运行(打开了),还是清了后台(关闭),都可以收到消息通知消息:只能app打开了,才能收到 1.开通unipush 2.点击上图的unipush2.0下面 ...
uniCloud 微信小程序登陆全流程demo
ps: Q群:743496144 博主一向不喜欢废话,直接说几个点,你悟了就直接去试,可以不用看完,还是得自己去试印象才深刻,博主写博文就怕自己以后忘记做个笔记顺便能帮一个是一个 1.你要获取unio ...

unicloud使用教程

unicloud使用教程相关推荐

最新文章

热门文章