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!

相关推荐
Heo几秒前
调用通义千问大模型实现流式对话
前端·javascript·后端
绅士玖2 分钟前
移动端自适应方案:lib-flexible + postcss-pxtorem 实践指南
前端
中微子5 分钟前
React + Vant 入门指南:轻松构建移动端应用
前端
用户40993225021235 分钟前
FastAPI的查询白名单和安全沙箱机制如何确保你的API坚不可摧?
前端·后端·github
前端小巷子43 分钟前
深入 npm 模块安装机制
前端·javascript·面试
cypking2 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵2 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
Britney⁺♛&?ꪶꪫꪜꫀ2 小时前
Vue2上
vue.js·npm
江城开朗的豌豆2 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七3 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript