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

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

【每日一点事】

　　天冷了，干燥了，嘴唇裂了，几块钱一瓶的维生素b6也有可治唇干裂的作用。

一、介绍

腾讯官方文档教程参考：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，你可以改内容，改结构，改集合（云数据库里的表），改想法等等。终于，你可以设计出你的小图库，小资源库等等...

【最后】

　　感谢你看到最后，如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
我是南方者，一个热爱计算机更热爱祖国的南方人。