uniCloud云函数URL化后的增删改查

uniCloud云函数URL化后的增删改查

先绑定云函数自定义域名 下图是我已经绑定过了,绑定之前,肯定先要申请域名、再备案、拿到cname值,在相对应服务商进行域名解析: 上图是点击云函数详情进行了URL的path部分:我的云函数名称为users,对应的名称path部分为 /api/users,path部分可以自己定义按照提示规则。

到此一步,证明URL化已经配置好 假设与云函数绑定的URL化地址为:https://${自定义域名}/api/users 作为前端(客户端)怎么去请求呢? 简单例子:

getUsers() {
          
   
				uni.request({
          
   
					method: "get",
					url: https://自定义域名/api/users,
					success: (res) => {
          
   
						console.log(res)
					}
				})
			}

新增: 请求方式为:POST 传递body参数为:name 前端代码如下:

<template>
	<view class="content">
		用户列表
		<div class="user-list" v-for="(item,index) in users" :key="index">
			<div class="name">用户姓名:{
          
   {
          
   item.name}}</div>
			<div class="option-btn">
				<button type="primary" @click="updateUser(item._id)">编辑</button>
				<button type="warn" @click="deleteUser(item._id)">删除</button>
			</div>

		</div>
		<br />
		<input v-model="name" placeholder="请输入用户姓名" />
		<button type="primary" @click="addUser">添加用户</button>
	</view>
</template>

<script>
	export default {
          
   
		data() {
          
   
			return {
          
   
				title: Hello,
				name: ,
				users: []
			}
		},
		onLoad() {
          
   

		},
		onShow() {
          
   
			this.getUsers()
		},
		methods: {
          
   
			// 添加用户
			addUser() {
          
   
				if (!this.name) {
          
   
					uni.showToast({
          
   
						title: 用户姓名不能为空,
						icon: none
					})
					return
				}
				uni.request({
          
   
					method: post,
					url: https://自定义域名/api/users,
					data: {
          
   
						name: this.name
					},
					success: (res) => {
          
   
						console.log(res)
					}
				})
			},
			getUsers() {
          
   
				uni.request({
          
   
					method: "get",
					url: https://自定义域名/api/users,
					success: (res) => {
          
   
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
	.user-list {
          
   
		display: flex;
		margin: 20rpx;
		align-items: center;
		border-bottom: 1rpx solid #ccc;
	}

	.name {
          
   
		flex: 1;
	}

	.option-btn {
          
   
		display: flex;
		width: 350rpx;
	}
</style>

云函数代码:

use strict;
const db = uniCloud.database();
exports.main = async (event, context) => {
          
   
	//event为客户端上传的参数
	console.log(event)
	console.log(event : , event)
	const {
          
   
		httpMethod
	} = event
	const res = {
          
   }
	if (httpMethod === POST) {
          
   
		let body = event.body
		if (event.isBase64Encoded) {
          
   
			body = Buffer.from(body)
		}
		const param = JSON.parse(body) // param为客户端上传的数据
		res = await db.collection(users).add({
          
   
			name: param.name
		})
	}
	// const str = "放回数据"
	// const res = await db.collection(users).get()
	// const data = {
          
   
	// 	res,
	// 	event,
	// 	str
	// }
	//返回数据给客户端
	return data
};

改、查、删除都是类似 post 注意的是 服务端处理时要注意的几项参数: httpMethod(表示请求方式) body(前端请求接口时传的body参数) path(路径,没有参数的话默认是“/”,有参数是在后面拼接) queryStringParameters(查询字符串)举例:接口地址为:https://www.xxx.com/api/users?name=“张三”&age=19 服务端接收到的就是:queryStringParameters:{name:“张三”,age:19}

经验分享 程序员 微信小程序 职场和发展