【玩转腾讯云】云开发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 文件

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