實(shí)例教程-學(xué)生管理系統(tǒng)

本文檔介紹如何使用云開發(fā)能力，無需域名、無需服務(wù)器，即可快速搭建一個(gè)學(xué)生信息管理系統(tǒng)，最后成型的應(yīng)用展示如下：

提供的功能有：

• 學(xué)生信息（姓名、年齡、頭像）的錄入
• 學(xué)生信息讀取和展示
• 文件上傳

準(zhǔn)備工作

1. 請(qǐng) 注冊(cè)騰訊云賬號(hào)，注冊(cè)成功后即可使用騰訊云服務(wù)，已注冊(cè)可忽略此步驟。
2. 登錄騰訊云 云開發(fā)控制臺(tái)，單擊【立即創(chuàng)建并使用】，新建一個(gè)環(huán)境來進(jìn)行部署。 如果您之前創(chuàng)建過環(huán)境，可以繼續(xù)使用已創(chuàng)建的按量計(jì)費(fèi)環(huán)境，或者再次【新建環(huán)境】。
3. 在新建環(huán)境窗口中，根據(jù)實(shí)際需求填寫環(huán)境名稱，選擇【按量計(jì)費(fèi)】，單擊【立即開通】即可開通環(huán)境。
4. <span id="step1.3"></span>開通成功之后，單擊環(huán)境名稱，進(jìn)入環(huán)境總覽頁面。請(qǐng)記住您的環(huán)境 ID，這個(gè) ID 在后續(xù)步驟將被使用，如下所示：

步驟1：開啟匿名登錄

搭建學(xué)生信息管理系統(tǒng)，需開啟匿名登錄，前往 登錄授權(quán) 控制臺(tái)，單擊匿名登錄開關(guān)，如下：

步驟2：創(chuàng)建云函數(shù)

1. 單擊左側(cè) 云函數(shù)，單擊新建【新建云函數(shù)】，開始創(chuàng)建云函數(shù)。
2. 創(chuàng)建函數(shù)名為 index，運(yùn)行環(huán)境為 Nodejs 10.15，將下文的 示例代碼 拷貝到 index 函數(shù)內(nèi)并保存。

   ! 需要把代碼第2行的envId改為您的真實(shí)環(huán)境 ID。

<spsn id="code"></span> 函數(shù)完整代碼如下：

// 此處填入您的真實(shí)環(huán)境 ID
const envId = "your-env-id"


exports.main = async (event) => {
  // 網(wǎng)頁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
      this.app = tcb.init({
        env: envId
      })

  
      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.signInAnonymously().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("數(shù)據(jù)庫新增失敗", res)
          // 打印數(shù)據(jù)庫新增失敗的信息
          window.alert(
            "成績錄入失敗: [code=" + res.code + "] [message=" + res.message + "]"
          )
        } else {
          console.log("數(shù)據(jù)庫新增成功", 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("數(shù)據(jù)庫查詢失敗", res)
          // 打印數(shù)據(jù)庫查詢失敗的信息
          window.alert(
            "成績查詢失敗: [code=" + res.code + "] [message=" + res.message + "]"
          )
        } else {
          console.log("數(shù)據(jù)庫查詢成功", res)
          // 打印數(shù)據(jù)庫查詢結(jié)果
          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()
  })
  `


  // 網(wǎng)頁HTML代碼
  const body = 
  `
  <!doctype html>
  <html lang="zh">
    <head>
      <meta charset="utf-8">
      <script src="https://imgcache.qq.com/qcloud/tcbjs/1.9.0/tcb.js" rel="external nofollow" ></script>
      <script type="text/javascript">${script}</script>
    </head>
    <body style="text-align:center;">
      <header>
        <h1>學(xué)生信息系統(tǒng)</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
  }
}

步驟3：啟用云接入

1. 前往 云開發(fā) 控制臺(tái)云接入頁面，打開云接入開關(guān)，如下：
2. 單擊【新建】，開始新建觸發(fā)路徑，配置項(xiàng)如下說明：
   • 觸發(fā)路徑：填寫/quickstart 。
   • 關(guān)聯(lián)資源：選擇步驟2中創(chuàng)建的 index 函數(shù)。
3. 單擊【確認(rèn)】即可添加成功。

步驟4：創(chuàng)建數(shù)據(jù)庫

1. 前往 數(shù)據(jù)庫 控制臺(tái)新建集合頁面。
2. 單擊【新建集合】，創(chuàng)建集合名為test_db的數(shù)據(jù)庫集合。
3. 單擊集合名稱，進(jìn)入集合管理頁。
4. 在【權(quán)限設(shè)置】頁簽中，設(shè)置該集合的權(quán)限設(shè)置為所有用戶可讀。
5. 單擊【保存】完成配置。

步驟5：訪問網(wǎng)站

1. 完成以上配置后，在 云接入 頁面，即可復(fù)制云接入的域名，如下：
2. 使用復(fù)制的域名xx.service.tcloudbase.com/quickstart，即可訪問搭建好的學(xué)生管理系統(tǒng)。