复现过程：

腾讯云的开发平台很多，这里是在腾讯云开发cloudbase控制台下新建环境，在新建项目下选择套餐，这里选择的是第一项套餐个人版，在之前的搭建中得知搭建速度与搭建地与环境地域之间的距离有关，这里选用的地域是上海。

开通并创建环境后，记住环境id，单击左侧菜单栏中的静态网站托管，在页面中单击开通静态托管服务。

搭建学生信息管理系统，需开启匿名登录，前往 登录授权 控制台，单击匿名登录开关，单击左侧 云函数，单击新建新建云函数，开始创建云函数。云函数与java web中的函数相似，针对这一函数页操作，如要实现多页面的函数，需要建立多个云函数。

创建函数名为 index，运行环境为 Nodejs 10.15 ，并填写代码到函数代码输入栏里.

创建完云函数后，前往 云开发 控制台访问服务页面，打开访问服务开关，这里可以使网页被执行并查看，单击新建，开始新建触发路径，配置项如下说明：

• 触发路径：填写/quickstart 。
• 关联资源：选择步骤2中创建的 index 函数。

前往数据库控制台新建集合页面。单击新建集合，创建集合名为test_db的数据库集合。数据库用于存储学生信息。单击集合名称，进入集合管理页。在权限设置页签中，设置该集合的权限设置为所有用户可读。

完成以上配置后，在 访问服务 页面，即可复制访问服务的域名，使用复制的域名xx.service.tcloudbase.com/quickstart，即可访问搭建好的学生管理系统。访问并填写学生信息，如下所示：

总结：

与网页系统的代码编写类似，腾讯云开发将这些功能分解开来，

按照功能将其分解为左边栏这几项，用户可以根据需要创建并引用，极大的降低了开发的难度，使开发逻辑更加清晰。并且程序开发完全依赖与腾讯云，不需要在自己的pc机中搭建环境，也不用担心异地办公的程序移植性问题。

代码：

//替换 envId 为您的环境ID
const envId = "student-systems-1g6rd69609bf02fb"
//主函数
exports.main = async (event) => {
// 网页JS代码
  const script =
      `
      //初始化环境id
      var envId = "${envId}"

      //网页启动类
      class FunctionQuickStarter {
          //构造函数
          constructor() {
      // 绑定 信息相关
              //添加姓名
              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")
      // 绑定 信息监听
              //头像选择
              this.addAvatarInput.addEventListener("change", this.addAvatar.bind(this), false)
              //数据库信息
              this.addDataButton.addEventListener("click", this.addData.bind(this), false)

      // 初始化 云开发
      // 如果您的环境属于上海地域，请将 region 信息改为"ap-shanghai"
              this.app = cloudbase.init({
                  //环境id
                  env: envId,
                  //地域为上海
                  region:"ap-shanghai"
              })

              //按钮状态函数
              this.setButtonStatus(true)
              //匿名登录
              this.signIn()
          }

          //按钮状态函数
          setButtonStatus(status) {
              //设置按钮状态为传入值
              this.addDataButton.disabled = status

              //若状态不为空
              if (!status) {
                  //查询数据
                  this.queryData()
              }
          }

      // 匿名登录
          signIn() {
              //初始化登录状态
              var auth = this.app.auth({
                  //设置状态为local，即在本地存储中长期地保留登录状态
                  persistence: "local"
              })
              //若此时未登录
              if(!auth.hasLoginState()) {
                  //登录为匿名登录
                  auth.anonymousAuthProvider().signIn()
                      .then(() => {
                          //按钮状态设置
                          this.setButtonStatus(false)
                      })
              } else {
                  //按钮状态设置
                  this.setButtonStatus(false)
              }
          }

      // 录入信息
          addData(e) {
              //防止调用相同事件的传播
              e.stopPropagation()
              //取消e事件
              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
              }
              //如果年龄不在~200以内
              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事件
              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 => {
                      //文件id
                      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>"
                      //若数据条数大于0
                      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(
                              "查无此人!"
                          )
                      }

                  }
              })
          }
      }

      //load事件发生时执行函数
      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
            }
}

程序原文档：
学生信息系统示例