日本r级限制片在线观看,在线观看亚洲综合影视

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

提供的功能有：

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

準備工作

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

步驟1：開啟匿名登錄

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

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

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

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

<spsn id="code"></span> 函數(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ù)庫查詢結果
          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>學生信息系統(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：啟用云接入

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