一、介绍
腾讯官方文档教程参考:cloud.tencent.com/document/pr…
准备工作
一个微信号:注册并登录腾讯云
二、操作流程
登录腾讯云后,找到云开发 CloudBase——》创建项目(空模板)
——》开启匿名登录并上传index云函数
// index云函数代码 //替换 envId 为您的环境ID,如果您的环境属于上海地域,请将 region 信息改为"ap-shanghai" const envId = "envId" exports.main = async (event) => { // 网页JS代码 const script = ` var envId = "${envId}" class FunctionQuickStarter { constructor() { // 绑定 dom this.addNameInput = document.getElementById("add-name") this.deleteNameInput = document.getElementById("delete-name") this.addAgeInput = document.getElementById("add-age") this.addAvatarInput = document.getElementById("add-avatar") this.addDataButton = document.getElementById("add-button") this.infoBox = document.getElementById("info-box") // 绑定 dom listener this.addAvatarInput.addEventListener("change", this.addAvatar.bind(this), false) this.addDataButton.addEventListener("click", this.addData.bind(this), false) // 初始化 CloudBase // 如果您的环境属于上海地域,请将 region 信息改为"ap-shanghai" this.app = cloudbase.init({ env: envId, region:"ap-guangzhou" }) this.setButtonStatus(true) this.signIn() } setButtonStatus(status) { this.addDataButton.disabled = status if (!status) { this.queryData() } } // 匿名登录 signIn() { var auth = this.app.auth({ persistence: "local" }) if(!auth.hasLoginState()) { auth.anonymousAuthProvider().signIn() .then(() => { this.setButtonStatus(false) }) } else { this.setButtonStatus(false) } } // 录入信息 addData(e) { e.stopPropagation() e.preventDefault() var name = this.addNameInput.value var age = parseFloat(this.addAgeInput.value) var coll = this.app.database().collection("test_db") if (!name) { window.alert( "姓名不能为空!" ) return } if (!(age > 0 && age < 200)) { window.alert( "年龄需要在 0 ~ 200 之间" ) return } if (!this.avatarUrl) { window.alert( "头像不能为空!" ) return } this.setButtonStatus(true) coll.add({ name: name, age: age, avatar: this.avatarUrl }).then((res) => { if (res.code) { console.log("数据库新增失败", res) // 打印数据库新增失败的信息 window.alert( "成绩录入失败: [code=" + res.code + "] [message=" + res.message + "]" ) } else { console.log("数据库新增成功", res) this.avatarUrl = "" window.alert( "成绩录入成功!" ) } this.setButtonStatus(false) }) } // 上传头像 addAvatar(e) { e.stopPropagation() e.preventDefault() var file = e.target.files[0] var name = file.name this.app.uploadFile({ cloudPath: (new Date()).valueOf() + "-" + name, filePath: file }).then(res => { // 云文件ID var fileID = res.fileID // 通过云文件ID 获取 云文件链接 this.app.getTempFileURL({ fileList: [fileID] }).then(res2 => { var fileObj = res2.fileList[0] var url = fileObj.tempFileURL this.avatarUrl = url }) }) } // 查询信息 queryData() { var coll = this.app.database().collection("test_db") coll.where({}).get().then((res) => { if (res.code) { console.log("数据库查询失败", res) // 打印数据库查询失败的信息 window.alert( "成绩查询失败: [code=" + res.code + "] [message=" + res.message + "]" ) } else { console.log("数据库查询成功", res) // 打印数据库查询结果 var html = "<tr>" + "<th>姓名</th>" + "<th>年龄</th>" + "<th>头像</th>" + "</tr>" if (res.data.length > 0) { res.data.forEach((data) => { html += "<tr>" + "<td>" + data.name + "</td>" + "<td>" + data.age + "</td>" + "<td><img src='" + data.avatar + "' style='width:60px;height:60px'></td>" + "</tr>" }) this.infoBox.innerHTML = "<table style='margin: 0 auto'>" + html + "</table>" } else { window.alert( "查无此人!" ) } } }) } } window.addEventListener("load", function() { window.app = new FunctionQuickStarter() }) ` // 网页HTML代码 const body = ` <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.4.1/cloudbase.full.js"></script> <script type="text/javascript">${script}</script> </head> <body style="text-align:center;"> <header> <h1>学生信息系统</h1> </header> <div style="margin: 0 30%; padding: 20px 0; border: solid;"> <h2>录入信息</h2> <form> 姓名: <input id="add-name"> <br><br> 年龄: <input id="add-age"> <br><br> 头像: <input type="file" id="add-avatar" accept=".jpg, .jpeg, .png" style="width: 153px"/> <br><br> <button id="add-button">录入</button> <br><br> </form> <h2>信息列表</h2> <div id="info-box"></div> </div> </body> </html> ` return { statusCode: 200, headers: { 'content-type': 'text/html' }, body: body } }
复制环境ID
修改index云函数的环境ID和匹配的地址ID(选择广州环境无须修改地址ID)
启动访问服务(新建触发路径)
创建数据库(且设置可操作)
访问网站(完成)
权限修改
修改权限只能展示,不能进行添加
流程:云开发 CloudBase控制台——》(基础服务)数据库——》test_db(集合名称)——》权限设置——》所有用户可读,仅管理员可读写
三、结果展示
如图:
到这里,你就完成了一个小Demo的信息系统了,相信有了这个模板Demo,你可以改内容,改结构,改集合(云数据库里的表),改想法等等。终于,你可以设计出你的小图库,小资源库等等...
【最后】
感谢你看到最后,如果你持有不同的看法,欢迎你在文章下方进行留言、评论。
我是南方者,一个热爱计算机更热爱祖国的南方人。