uni-app云开发（我直接访问后端）

最新推荐文章于 2024-04-08 09:47:02 发布

白泽的笔记

最新推荐文章于 2024-04-08 09:47:02 发布

阅读量2.2k

点赞数 2

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/m0_51024444/article/details/128191516

版权

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>