【腾讯云开发】不到半小时,我完成从注册到创建小型学生信息系统。

简介: 【腾讯云开发】不到半小时,我完成从注册到创建小型学生信息系统。

一、介绍


腾讯官方文档教程参考:cloud.tencent.com/document/pr…

准备工作

一个微信号:注册并登录腾讯云


二、操作流程


登录腾讯云后,找到云开发 CloudBase——》创建项目(空模板)


微信截图_20220519163410.png


——》开启匿名登录并上传index云函数

微信截图_20220519163446.png


// 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


微信截图_20220519163459.png


修改index云函数的环境ID和匹配的地址ID(选择广州环境无须修改地址ID)


微信截图_20220519163508.png


启动访问服务(新建触发路径)


微信截图_20220519163517.png


创建数据库(且设置可操作)


微信截图_20220519163526.png


访问网站(完成)


微信截图_20220519163540.png


权限修改


修改权限只能展示,不能进行添加


流程:云开发 CloudBase控制台——》(基础服务)数据库——》test_db(集合名称)——》权限设置——》所有用户可读,仅管理员可读写

微信截图_20220519163555.png


三、结果展示


如图:


微信截图_20220519163605.png

到这里,你就完成了一个小Demo的信息系统了,相信有了这个模板Demo,你可以改内容,改结构,改集合(云数据库里的表),改想法等等。终于,你可以设计出你的小图库,小资源库等等...


【最后】


  感谢你看到最后,如果你持有不同的看法,欢迎你在文章下方进行留言、评论。

我是南方者,一个热爱计算机更热爱祖国的南方人。



目录
相关文章
|
3月前
|
存储 监控 开发工具
Django 后端架构开发:手机与邮箱验证码接入、腾讯云短信SDK和网易邮箱
Django 后端架构开发:手机与邮箱验证码接入、腾讯云短信SDK和网易邮箱
61 0
|
6月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
234 1
|
6月前
|
安全 小程序 网络安全
阿里云腾讯云免费SSL证书托管系统的开发初衷
由于Google等公司推动,互联网安全趋势将SSL证书期限统一缩短至3个月,阿里云和腾讯云相继跟进。对于管理多个站点的小公司而言,手动维护变得繁琐。为自动化此过程,作者探索使用API解决方案。通过研究腾讯云API,成功实现证书的自动创建、审核和下载。为应对无免费到期提醒服务,作者创建计划任务,在证书到期前7天发送提醒,初期采用短信提醒,并增设公众号模板消息作为备选方案,完成到期提醒系统的构建。接下来的文章将讨论SSL证书的申请和下载流程。
149 2
|
6月前
|
开发工具 Android开发 iOS开发
​ 2023年APP备案操作教程 阿里云APP备案试列 APP公钥sha1签名获取方法阿里云新增APP备案操作教程西部数码、腾讯云、新网、等等其他域名备案信息系统操作类似;核心要点:A,域
​ 2023年APP备案操作教程 阿里云APP备案试列 APP公钥sha1签名获取方法阿里云新增APP备案操作教程西部数码、腾讯云、新网、等等其他域名备案信息系统操作类似;核心要点:A,域
374 0
|
API PHP 开发工具
漏刻有时API接口实战开发系列(11):腾讯云短信3.0sms开发SDK环境部署及配置的实战总结
漏刻有时API接口实战开发系列(11):腾讯云短信3.0sms开发SDK环境部署及配置的实战总结
241 0
|
编解码 JSON 网络协议
腾讯云直播开发日记(三) 聊天室-直播转码-连麦混流
腾讯云直播开发日记(三) 聊天室-直播转码-连麦混流
245 0
|
NoSQL 算法 小程序
腾讯云直播开发日记 (二)附近直播-直播礼物-直播回放
腾讯云直播开发日记 (二)附近直播-直播礼物-直播回放
139 0
|
存储 缓存 开发框架
SpringCloud微服务实战——搭建企业级开发框架(二十九):集成对象存储服务MinIO+七牛云+阿里云+腾讯云
微服务应用中图片、文件等存储区别于单体应用,单体应用可以放到本地读写磁盘文件,微服务应用必需用到分布式存储,将图片、文件等存储到服务稳定的分布式存储服务器。目前,很多云服务商提供了存储的云服务,比如阿里云OSS、腾讯云COS、七牛云对象存储Kodo、百度云对象存储BOS等等、还有开源对象存储服务器,比如FastDFS、MinIO等。
899 56
SpringCloud微服务实战——搭建企业级开发框架(二十九):集成对象存储服务MinIO+七牛云+阿里云+腾讯云
|
弹性计算 API 数据安全/隐私保护
阿里云国际版腾讯云国际站U币代充值要实名吗怎么注册账号?
阿里云腾讯云国际站代注册代U充值飞机电报:aliyun2055
阿里云国际版腾讯云国际站U币代充值要实名吗怎么注册账号?

热门文章

最新文章