这个项目是我参加腾讯云云开发实战营【web云开发赛道-FILES存储】时开发的,通过这个项目你将学到以下功能:
- web端自定义登入
- web端操作数据库
- web端上传、下载、删除文件
- 云函数内转换文件临时地址
- 云函数http触发
-
后端服务使用腾讯云云开发提供的一体化解决方案,包括云函数、云数据库、云存储能力
-
前端使用原生JavaScript和layui前端框架,配合腾讯云云开发提供的JS-SDK完成后端服务的对接
-
前端静态资源部署在腾讯云云开发的静态网站托管服务上
- 安装
npm install -g @cloudbase/cli
- 在安装之后,执行如下代码,如果可以正常的显示版本号,则安装成功!
cloudbase -v
- 登入
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行
-
进入环境设置控制页-登录方式下,找到自定义登入,点击私钥复制,functions/login/config.js文件中
- 使用CloudBase CLI工具登录后,进入files/目录,依次执行以下代码: ::: warning注意:envID 替换成自己的云开发环境ID:::
tcb functions:deploy -e envID getTempFileURL
tcb functions:deploy -e envID login
tcb service:create -e envID -p /login -f login
- 上面两行是部署云函数,最后一行是为 login云函数创建HTTP服务
- 进入webviews
cd webviews
- 本地运行项目
npx serve
进入环境设置控制页-安全配置下,找到WEB安全域名,点击添加域名,授权localhost:5000这个域名,部署时也需要授权安全域名 即可打开一个本地静态服务器,然后访问 http://localhost:5000
- 部署到网站托管
# 将 webviews 目录下的所有文件部署到根目录
tcb hosting:deploy webviews -e envId
- 查看静态网站域名和状态
tcb hosting:detail -e envId
在浏览器打开静态网站域名,就可以看到部署的文件管理项目了