专栏首页云开发分享【玩转腾讯云】云开发WEB入门实践
原创

【玩转腾讯云】云开发WEB入门实践

项目介绍:

这个项目是我参加腾讯云云开发实战营【web云开发赛道-FILES存储】时开发的,因为网上云开发web实战很少,所以我整理了代码上传到GitHub上并写了这篇文章,通过这个项目你将学到以下功能:

  1. web端自定义登入
  2. web端操作数据库
  3. web端上传、下载、删除文件
  4. 云函数内转换文件临时地址
  5. 云函数http触发

技术使用:

  • 后端服务使用腾讯云云开发提供的一体化解决方案,包括云函数、云数据库、云存储能力
  • 前端使用原生JavaScript和layui前端框架,配合腾讯云云开发提供的JS-SDK完成后端服务的对接
  • 前端静态资源部署在腾讯云云开发的静态网站托管服务上

部署步骤:

一、创建云开发环境

访问腾讯云云开发控制台,新建【按量计费云开发环境】,记住云开发环境ID,我们需要用到云开发网站托管服务,目前只有按量计费的环境才支持静态托管。

进入网站托管控制页,开通静态网站托管服务

进入数据库控制页,添加2个集合;集合名字分别为files、files_old

二、安装、登入 CloudBase CLI

安装云开发 CLI

npm install -g @cloudbase/cli

登入

tcb login

三、下载并配置项目

先将本项目clone到本地(或者直接下载压缩包)

git clone https://github.com/hzjsj/files.git

用代码工具打开项目目录,将以下文件中标注有【云开发环境ID】处替换成自己的云开发环境ID -- /cloudbaserc.js 第2行 -- webviews/js/index.js 第1行 -- function/getTempFileURL/index.js 第5行

进入环境设置控制页,在环境配置下可以看到环境ID

进入环境设置控制页,在登录方式下,找到自定义登入,点击私钥复制,配置到functions/login/config.js文件中

四、上传并部署云函数

使用CloudBase CLI工具登录后,在files/目录,运行下面的命令来部署云函数getTempFileURL,envID 替换成自己的云开发环境ID

tcb functions:deploy -e envID getTempFileURL

同理运行下面的命令来部署云函数login

tcb functions:deploy -e envID login

运行下面为 login云函数创建HTTP服务

tcb service:create -e envID -p /login -f login

五、本地运行、部署

部署到网站托管

# 将 webviews 目录下的所有文件部署到根目录
tcb hosting:deploy webviews -e envId

进入网站托管控制页,就可以看到部署的文件了,点击设置选项,就可以看到默认域名,我们需要将这个域名添加到环境设置控制页,安全配置下授权域名列表中。如果已经存在了,也可以添加 localhost:5000 ,本地运行时调试。

现在访问默认域名就可以看到部署的项目了,刚进入有个弹窗,可以随便输入进行自定义登入,然后就可以操作这个页面了,第一次上传文件有可能报跨域错误,这个解决方法是把上图配置的安全域名删除,重新添加。

本地运行项目,执行以下命令

cd webviews
npx serve

运行成功后,打开了一个本地静态服务器,然后访问 http://localhost:5000

总结:

部署云函数时,我用的是云端安装依赖,可以参考官方文档 在线依赖安装 ,注意的是我在 package.json 文件保存了要安装的依赖,本地安装依赖可能会遇到一点小问题,大家也可以尝试

我写的函数都在 webviews/js/index.js 文件中,几乎都有注释,也可以参考 官方文档 理解

这篇文章写的比较仔细适合初学者,有基础的同学也可以直接看 GitHub 上的 README.md 文件

如果在操作过程中遇到问题,可以评论留下你的问题

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • serverless做一个查询IP地址的接口

    Serverless Framework:Serverless Framework 是业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的...

    城南旧事
  • 【玩转腾讯云】云开发部署VuePress静态博客

    通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装

    城南旧事
  • Vue CLI 的安装和使用element-ui

    通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装,Vue CLI 需要 Node.js 8.9 或...

    城南旧事
  • C++版 - 剑指offer 面试题22:栈的压入、弹出序列 题解

    提交网址: http://www.nowcoder.com/practice/d77d11405cc7470d82554cb392585106?tpId=13&...

    Enjoy233
  • 微信小程序|实现简单动态画布

    大家都玩过游戏,有没有想过游戏中的人物是怎么动起来的?人物是由很多的图形构成的,我们需要画出这些图形然后再赋予时间,就可以让他动起来。那么如何在小程序上让简单的...

    算法与编程之美
  • 丰田、日产、本田等车企联手,共同研发电动车固态电池技术 | 热点

    镁客网
  • Effective C++ 条款08:别让异常逃离析构函数

    《Effective C++》第三版中条款08建议不要在析构函数中抛出异常,原因是C++异常机制不能同时处理两个或两个以上的异常。多个异常同时存在的情况下,程序...

    Dabelv
  • 利用Django徒手写个静态页面生成工具

    曾经多次在不同的平台写博客,但全部都以失败而告终。去年七月选择微信公众号做为平台开始了又一次的技术分享,庆幸一直坚持到现在,但随着文章发表的越来越多,发现公众号...

    37丫37
  • 使用Moment.js处理时间戳转化为时间年月

    Moment.js 是一个 JavaScript 日期处理类库(处理时间格式化的npm包),用于解析、检验、操作、以及显示日期,在新公司的项目中,大量使用Mom...

    祈澈菇凉
  • LeetCode 331. 验证二叉树的前序序列化

    序列化二叉树的一种方法是使用前序遍历。 当我们遇到一个非空节点时,我们可以记录下这个节点的值。 如果它是一个空节点,我们可以使用一个标记值记录,例如 #。

    Michael阿明

扫码关注云+社区

领取腾讯云代金券