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!

相关推荐
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index2 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架