This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

【 a Point of the Day 】

It’s cold, it’s dry, it’s chapped, it’s a few bucks a bottleVitamin b6Also have the effect that can treat lip dryness.

Introduce a,

Tencent official documentation tutorial reference: cloud.tencent.com/document/pr… Prepare a wechat account: register and log in to Tencent Cloud

Two, the operation process

The loginTencent cloudThen, findCloud development CloudBaseCreate project (empty template)Enable anonymous login and upload the index cloud function

// index cloud function code
// Replace envId with your environment ID. If your environment belongs to Shanghai, change the region information to "ap-Shanghai".
const envId = "envId"
exports.main = async (event) => {
// The javascript code of the page
  const script =
      `
      var envId = "${envId}"Class FunctionQuickStarter {constructor() {// bind 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 ") / / bind dom listener enclosing addAvatarInput. AddEventListener (" change ", this.addAvatar.bind(this), false) this.addDataButton.addEventListener("click", this.addData.bind(this), // If your environment belongs to Shanghai, please change the region information to "ap-shanghai" this.app = cloudbase.init({env: envId, region:"ap-guangzhou" }) this.setButtonStatus(true) this.signIn() } setButtonStatus(status) { this.addDataButton.disabled = status if (! 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.topPropagation () 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(" Name cannot be empty!" ) return } if (! (age > 0 && age < 200)) {window.alert(" age > 0 && age < 200 ") return} if (! This.avatarurl) {window.alert(" avatarUrl cannot be empty!" ) return } this.setButtonStatus(true) coll.add({ name: name, age: age, avatar: This.avatarurl}). Then ((res) => {if (res.code) {console.log(" failed to add database ", res) [code=" + res.code + "] [message=" + res.message + "]")} else {console.log(" database added successfully ", Res) this.avatarurl = "" window.alert(" } this.setButtonStatus(false)})} // Upload avatar (e) {e.topPropagation () e.preventDefault() var file = e.target.files[0] var name = file.name this.app.uploadFile({ cloudPath: (new Date()).valueOf() + "-" + name, filePath: File}). Then (res => {// cloud fileID var fileID = res.fileId // Cloud fileID = 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(" database query failed ", res) // Prints information about database query failure window.alert(" result query failed: [code=" + res.code + "] [message=" + res.message + "]")} else {console.log(" database query succeeded ", Res) / / print database query result var HTML = "< tr >" + "< th > name < / th >" + "< th > age < / th >" + "icon to the < 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() }) `
// The HTML code of the page
  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;" <div style="margin: 0.0px; padding: 0.0px; padding: 20px 0; border: solid;" > < h2 > entry information < / h2 > < form > name: < input id = "add - the name" > < br > < br > age: < input id = "add - age" > < br > < br > head: <input type="file" id="add-avatar" accept=".jpg, .jpeg, .png" style="width: 153 px "/ > < br > < br > < button id =" add - button "> enter < / button > < br > < br > < / form > < h2 > list < / h2 > < div id =" info - box "> < / div > < / div > </body> </html> `
            return {
                    statusCode: 200.headers: {
                            'content-type': 'text/html'
                    },
                    body: body
            }
}
Copy the code

Replication Environment ID Change the environment ID and matching address ID of index cloud function (no need to change address ID for Guangzhou environment) Start access service (New trigger path) Create the database (and the Settings are actionable) Visiting the site (done)

Permission to modify

Modifying permissions can only be displayed, but cannot be added

Process: Cloud development CloudBase console — “(basic services) database –” test_DB (collection name) — “permission Settings –” all users can read, only the administrator can read and write

3. Results presentation

As shown in figure:At this point, you have a small Demo of the information system, I believe that with this template Demo, you can change the content, change the structure, change the set (tables in the cloud database), change the idea and so on. Finally, you can design your little gallery, little resource library, etc…

【 the 】

Thank you for reading the end, if you have a different view, you are welcome to leave a comment below this article. I am a southerner who loves computers and loves the motherland.