uniclound云开发(三 云函数的使用)

uniclound云开发(三 云函数的使用)

这里我们可以先看一下总结一下整个云函数部分的使用:其实是分为以下这样子的!

1、云函数的建立

这里我们先了解一下多人云函数开发的时候应该如何使用

右键点击unicloud文件夹,点打开unicloud web控制台可以打开云函数空间,在空间中,最下面有一个成员管理,可以加人进来多人开发

之前我们的云函数直接使用的官方的,接下来我们就新建一个云函数,然后尝试进行调用,这里主要存储首页轮播图的部分,接下来我们就建立一个管理轮播图的函数空间homebanner

新建一个homebanner云函数

然后我们就可以看到这个

2、云函数的本地使用

上面就是系统为我们搭建的云函数,接下来我们试着在函数之中默认返回一下我们首页的banner图数据,然后调用我们云函数在首页部分实现调用和访问我们的云函数!

👉 这里我们先改造一下我们的云函数返回一个1 试试

👉 所以这里我们的homebanner 下的index.js文件就可以写成:

js 复制代码
'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	
	//返回数据给客户端
	// return event
	return '我是云函数返回的数据部分!';
};

接下来就是操作数据库,这里我们先使用传统方式来操作数据库,然后后面我们尝试操云函数通过JQL操作数据库。

  • 云函数通过传统方式操作数据库

uni-app的前端代码,不再执行uni.request联网,而是通过uniCloud.callFunction调用云函数

👉 这里我们调用查询一下

js 复制代码
onMounted(()=>{
    initBanner();// 加载轮播图
})

// 初始化Banner图以及banner图的管理
function initBanner() {
    console.log('初始化Banner图以及banner图的管理');
    // promise方式
    uniCloud.callFunction({
            name: 'homebanner',
            data: {
                    a: 1
            }
    })
    .then(res => {
            console.log(res);
    });
}

这边我们已经可以看到函数调用成功并且成功的

然后看一下我们的返回结果可以看出来本地我们调用然后已经返回的部分

3、云函数的线上使用

上面我们已经实现了云函数在本地部分的调用和使用,接下来我们便在线上尝试一下使用。

👉 在云函数空间之中的云数据库部分添加数据表,在这里我们添加一个数据

这里一定一定要注意:``

js 复制代码
{
    "pageurl":"/",
    "imgurl": "https: //img95.699pic.com/xsj/0p/p9/z8.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast"
}

确认以后就可以在控制台看到!

接下来我们就去把本地的云函数调用写成线上的刚刚建立的数据库,这里有点像是Node里面的Express的作用感觉!

👉 这里我们的homebanner 下的index.js文件就可以写成:

js 复制代码
'use strict';
// 连接云数据库
const db = uniCloud.database()
exports.main = async (event, context) => {
  // 获取 `user` 集合的引用
  const collection = db.collection('homebanner');
  // 读
  let res = await collection.get()
 
  return res
};
  • 然后我们运行一下,这里再次报了同样的错误,看了一下还是我没有设置不校验本地https的原因
js 复制代码
http://127.0.0.1:7000 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

这里我们已经可以看到请求的部分已经成功了!

👉 这里我们可以右键然后选择一下上传云函数,然后在HubildX之中把之前连接本地的部分连接成线上云函数部分,然后再次运行,这里可以看到云函数已经运行成功了!

这边我们再次运行,选择连接云函数的部分,然后可以看到项目已经可以正常连接我们的线上的云函数部分数据库了

看看返回的参数,这里可以看到,除了砸门的一个头部信息以外,我们已经可以正常拿到我们的参数了!

👉 在我们的线上数据库部分:后台再次增加一个轮播图增加一个数据,然后确认! 这里已经可以看到我们的数据已经在后台增加成功了,去页面看看就可以!

这边刷新一下,可以看到我们的页面已经正常可以拿到了!

查询一下已经ok!

相关推荐
m0_zj1 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠1 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象1 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录2 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX2 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing2 小时前
react redux监测值的变化
前端·javascript·react.js
engchina2 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
m0_528723812 小时前
react中useEffect的使用
前端·javascript·react.js
GISer_Jing2 小时前
AIGC时代的Vue或React前端开发
vue.js·react.js·aigc
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS景区民宿预约系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源