uni-app云开发

最新推荐文章于 2024-05-31 15:47:35 发布

不会敲代码的小王ꦿ

最新推荐文章于 2024-05-31 15:47:35 发布

阅读量490

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_68086484/article/details/128193848

版权

一、新建

二、云服务器空间

先创建在进行关联

三、云函数

创建云函数

上传云函数

页面调用

			uniCloud.callFunction({
						name: "base",
						data: {
							name: 'wt',
							age: 18
						}
					})
					.then(res => {
						uni.showModal({
							content: JSON.stringify(res.result)
						})
					})

云函数编写

四、云数据库

1、创建

2、新增数据

3、表结构

4、下载表结构

5、运行项目

6、展示数据

<template>
	<view class="content">
		<button @click="call" class="title">呼叫服务器</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>
					<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.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: 'wt',
							age: 18
						}
					})
					.then(res => {
						uni.showModal({
							content: JSON.stringify(res.result)
						})
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 清理全部数据
			// let res = await collection.get()
			// res.data.map(async (document) => {
			// 	return await collection.doc(document.id).remove();
			// });

		}
	}
</script>

<style>

</style>

增

<template>
	<view>
		<uni-easyinput v-model="item.username" placeholder="用户名"></uni-easyinput>
		<uni-easyinput v-model="item.tel" placeholder="电话"></uni-easyinput>
		<button class="title" @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: "添加成功"
						})
					})
			}
		}
	}
</script>

<style>

</style>

删

<view v-else>
				<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.username" :note="item.tel">
					</uni-list-item>
				</uni-list>
			</view>

改

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

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

<style>

</style>