uni-app云开发(我直接访问后端)

news2024/12/24 9:38:09

  uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。

熟悉的js的程序员,轻松搞定前后台整体业务。实现了前端完成前后端工作的可能

用法:

第一步新建uniCloud项目

点击文件 ——>新建——>项目

 在这里我的项目名称uniCloud开发

 第二步点击关联云服务或打开unicloud web控制台

第一次打开需要认证

认证以后  新建服务空间

 下一步

 接下来(创建时间可能会需要十几分钟)

 下一步

 下一步

 云函数

我在这里新建了一个名为feed的云函数

上传部署

 使用云函数

 在pages/index/index.vue中

<template>
	<view class="content">
		<button @click="call">呼叫服务器</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		
		methods: {

			call() {
				uniCloud.callFunction({
					name: "feed",
					data: {
						name: "hsf",
						age: 18
					}
				}).then(res => {
					uni.showModal({
						content: JSON.stringify(res.result)
					})
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style>
</style>

使用云数据库

第一步新建云数据库

 添加记录

 

{
    "name": "白泽",
    "tel": "18239607956"
}

 pages/index/index.vue

查询

<template>
	<view class="content">
		<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>
				<!-- {{data}} -->
				<uni-list>
					<uni-list-item link :to="'/pages/update/update?item='+JSON.stringify(item)"
						@longpress.native="$refs.udb.remove(item._id)" v-for="item in data" :key="item._id"
						:title="item.name" :note="item.tel">
					</uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
		<!-- <navigator url="../add/add"> <button>添加</button></navigator> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShow() {
			if (this.$refs.udb) {
				this.$refs.udb.refresh();
			}
		},
		methods: {

			call() {
				uniCloud.callFunction({
					name: "feed",
					data: {
						name: "hsf",
						age: 18
					}
				}).then(res => {
					uni.showModal({
						content: JSON.stringify(res.result)
					})
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style>
	.content {}
</style>

删除(长按该列表)

 pages/index/index.vue中

<template>
	<view class="content">
		<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>
				<!-- {{data}} -->
				<uni-list>
					<uni-list-item @longpress.native="$refs.udb.remove(item._id)" v-for="item in data" :key="item._id"
						:title="item.name" :note="item.tel">
					</uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

			call() {
				uniCloud.callFunction({
					name: "feed",
					data: {
						name: "hsf",
						age: 18
					}
				}).then(res => {
					uni.showModal({
						content: JSON.stringify(res.result)
					})
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style>
	.content {}
</style>

增加

在pages中新建add页面

pages/add/add.vue

<template>
	<view>
		<uni-easyinput v-model="item.name" placeholder="用户名" />
		<uni-easyinput v-model="item.tel" placeholder="电话" />
		<button @click="addConcat">添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {
					name: "",
					tel: ""
				}
			}
		},
		methods: {
			addConcat() {
				// 数据库
				var db = uniCloud.database();
				db.collection("concat")
					// 执行添加
					.add(this.item)
					.then(res => {
						uni.showToast({
							title: "添加成功"
						})
					})
			}
		}
	}
</script>

<style>

</style>

修改

在pages中新建update页面

pages/update/update.vue

<template>
	<view>
		<uni-easyinput v-model="item.name" placeholder="用户名" />
		<uni-easyinput v-model="item.tel" placeholder="电话" />
		<button @click="updateConcat">更新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {
					name: "",
					tel: ""
				}
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
		},
		methods: {
			updateConcat() {
				// 获取item
				var item = {
					...this.item
				}
				// 删除id
				delete item._id;
				// 数据库
				var db = uniCloud.database();
				db.collection("concat")
					.doc(this.item._id) //查询
					.update(item)
					.then(res => {
						uni.showToast({
							title: "更新成功"
						})
						uni.navigateBack();
					}).catch(err => {
						uni.showModal({
							title: JSON.stringify(err)
						})
					})
			}
		}
	}
</script>

<style>

</style>

pages/add/add.vue

<template>
	<view class="content">
		<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>
				<!-- {{data}} -->
				<uni-list>
					<uni-list-item link :to="'/pages/update/update?item='+JSON.stringify(item)"
						@longpress.native="$refs.udb.remove(item._id)" v-for="item in data" :key="item._id"
						:title="item.name" :note="item.tel">
					</uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
		<!-- <navigator url="../add/add"> <button>添加</button></navigator> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShow() {
			if (this.$refs.udb) {
				this.$refs.udb.refresh();
			}
		},
		methods: {

			call() {
				uniCloud.callFunction({
					name: "feed",
					data: {
						name: "hsf",
						age: 18
					}
				}).then(res => {
					uni.showModal({
						content: JSON.stringify(res.result)
					})
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style>
	.content {}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/64348.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Hue编译安装使用

简介 由于大数据框架很多&#xff0c;为了解决某个问题&#xff0c;一般来说会用到多个框架&#xff0c;但是每个框架又都有自己的web UI监控界面&#xff0c;对应着不同的端口号。比如HDFS(9870)、YARN(8088)、MapReduce(19888)等。这个时候有一个统一的web UI界面去管理各个大…

高斯混合模型下的变分推断

大概从下面几个部分学习&#xff1a; 1.EM算法 人人都懂EM算法 - 知乎 (zhihu.com) 18分钟理解EM算法 - 知乎 (zhihu.com) 变分贝叶斯深度学习综述 - 知乎 (zhihu.com) 【未看完】 EM算法存在的意义是什么&#xff1f; - 知乎 (zhihu.com)【八种境界】 EM 算法具备收敛性…

java计算机毕业设计ssm体育赛事管理系统App2qrcr(附源码、数据库)

java计算机毕业设计ssm体育赛事管理系统App2qrcr&#xff08;附源码、数据库&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#x…

[附源码]Python计算机毕业设计Django酒店物联网平台系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;我…

小目标检测文章阅读

无人机上目标检测的特点&#xff1a; 1、图像特点 在多数情况下&#xff0c;无人机的拍摄视野很大&#xff0c;包含丰富的视觉内容&#xff0c;虽然它提供了更全面的场景信息。 缺点&#xff1a; 1&#xff09;但是待检测的目标对象通常在图像中占比较小&#xff0c;且没有足…

法国巴黎索邦大学博士后—实验物理学

【国外博士后招聘-法国博士后】法国巴黎索邦大学博士后—实验物理学 索邦大学&#xff08;法文&#xff1a;Sorbonne Universit&#xff1b;英文&#xff1a;Sorbonne University&#xff09;简称“索邦”&#xff08;Sorbonne&#xff09;&#xff0c;是一所位于法国巴黎拉丁区…

多线程环境下的单例模式

✨✨hello&#xff0c;愿意点进来的小伙伴们&#xff0c;你们好呐&#xff01; &#x1f43b;&#x1f43b;系列专栏&#xff1a;【JavaEE初阶】 &#x1f432;&#x1f432;本篇内容&#xff1a;基于多线程的单例模式 &#x1f42f;&#x1f42f;作者简介:一名现大二的三非编程…

Linux虚拟化网络之路由配置

一、Linux路由配置 如果要在不同网段直接通讯&#xff0c;需要添加路由&#xff0c;Linux添加路由命令如下&#xff1a; route [add|del] [-net|-host] target [netmask Nm] [gw Gw] [[dev] If] add : 添加一条路由规则&#xff1b;del : 删除一条路由规则&#xff1b;-net …

Win11如何开启移动中心页面的操作方法教学

Win11如何开启移动中心页面的操作方法教学分享。有用户不知道怎么去打开移动中心&#xff0c;开启这个页面我们可以去进行屏幕亮度调整、声音调整、笔记本电池状态、外接显示器/投影仪、以及幻灯片显示模式等功能集中到一个面板上进行管理设置。如何开启这个页面&#xff0c;来…

【教程】超详细通过Shizuku转生支付宝集成XQ_Crystal来自动收能量

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.blog.csdn.net] 通过Shizuku是比应用转生更好更稳定的方法&#xff01; 可以先看这篇&#xff1a;免Root使用Xposed插件并开启蚂蚁森林自动偷能量,比应用转生好 还不会的&#xff0c;继续往下。看完还不会&#xff…

手机银行APP评测系列:天津银行持续优化手机银行用户体验,但仍需加强细节提升

易观分析&#xff1a;作为银行金融服务线上场景渗透的有效抓手&#xff0c;当前手机银行APP已经成为其触达用户的重要渠道。随着银行发力场景服务平台成为发展趋势&#xff0c;5G技术问世对金融服务场景端提出新要求&#xff0c;用户体验反馈成为银行线上场景化运营的重要一环。…

JavaScript—分支结构和循环结构整理

目录 一、流程控制 二、分支结构 1. if语句 2. if…else语句 3. if…else if语句 4. switch语句 5. 条件表达式构成的选择结构 三、循环结构 1.while循环 2. do-while循环 3. for循环 3.1 for循环转换为while循环 3.2 断点调试 4. 循环嵌套 JavaScript 是一种解释…

微服务框架 SpringCloud微服务架构 16 SpringAMQP 16.6 FanoutExchange

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构16 SpringAMQP16.6 FanoutExchange16.6.1 发布订阅 - Fanout Exchange16.6…

火山引擎DataTester:一个爆款游戏产品,是如何用A/B测试打磨出来的?

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 随着国内游戏用户数量趋于饱和&#xff0c;中国游戏产业也从高速成长期逐渐转型&#xff0c;市场成熟度提升&#xff0c;竞争趋于精细化。 随着游戏出海以及私域流…

Java开发学习(二十六)----SpringMVC返回响应结果

SpringMVC接收到请求和数据后&#xff0c;进行了一些处理&#xff0c;当然这个处理可以是转发给Service&#xff0c;Service层再调用Dao层完成的&#xff0c;不管怎样&#xff0c;处理完以后&#xff0c;都需要将结果告知给用户。 比如:根据用户ID查询用户信息、查询用户列表、…

2022世界杯La‘eeb肖像,python海龟实现啦

努力是为了不平庸~ 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。 目录 一、Laeeb的身世 二、开始作画 1、准备阶段 2、常用指令 3、开始做画 一、Laeeb的身世 2022年卡塔尔世界杯&#xff08;英语&#xff1a…

华为机试 - 高效的任务规划

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 你有 n 台机器&#xff0c;编号为 1~n&#xff0c;每台都需要完成一项工作&#xff0c;机器经过配置后都能完成独立完成一项工作。假设第 i 台机器你需要花 B 分钟进行设置&#xff0c;然后开始运行&a…

[附源码]计算机毕业设计室内设计类网站Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Azure考试认证经验

目录 一、概述 1、考试报名 2、考试经验 3、Azure居家考试 4、Azure证书 一、概述 人不管做什么事情&#xff0c;决心很重要。有了目标就要坚定不移的去执行&#xff0c;这是最基本的。如果没有一个正确的心态来学习&#xff0c;建议你放弃。 1、考试报名 Azure考试报名…

2022 年度优秀开源技术

2022 年&#xff0c;我们综合了 OSCHINA 平台上各大认证官方技术团队、开源社区帐号年度发表的内容频率及质量、开展各种活动运营积极性等多方面的表现 具体名单如下&#xff08;按首字母顺序排名&#xff0c;不分先后&#xff09;&#xff1a; Alluxio 官方 …