建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)公司是專業(yè)的揚(yáng)中網(wǎng)站建設(shè)公司，揚(yáng)中接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行揚(yáng)中網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
介紹
在完成了界面的實(shí)現(xiàn)后，接下來可以開始進(jìn)行和云開發(fā)相關(guān)的數(shù)據(jù)對(duì)接。完成數(shù)據(jù)對(duì)接后，應(yīng)用基礎(chǔ)就打好了，接下來的就是發(fā)布上線以及一些小的功能的加入。
配置
在進(jìn)行相關(guān)的配置調(diào)用的時(shí)候，你需要先登錄騰訊云控制臺(tái)，進(jìn)行一些配置。使用你的小程序賬號(hào)登錄騰訊云，并在其中找到“云開發(fā)”產(chǎn)品。進(jìn)入到“產(chǎn)品控制臺(tái)”。
在“產(chǎn)品控制臺(tái)”中找到你的環(huán)境，點(diǎn)擊進(jìn)入“詳情頁”：
在環(huán)境“詳情頁面”選擇“用戶管理”->“登錄設(shè)置”->“匿名登錄”：
啟用匿名登錄。
云開發(fā)的數(shù)據(jù)查詢目前必須登錄后才可以查詢，因?yàn)橄Ｍo用戶提供的是免登錄的解決方案，因此，必須開通匿名登錄，確保可以進(jìn)行數(shù)據(jù)查詢。
由于需要在網(wǎng)頁中調(diào)用相應(yīng)的函數(shù)，因此，也需要在同一個(gè)頁面的 WEB 安全域名中添加應(yīng)用的上線域名（本地調(diào)試用的 localhost 無需添加）。
為應(yīng)用程序添加匿名登錄的邏輯
此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js
由于希望用戶可以打開網(wǎng)頁就可以查詢數(shù)據(jù)，因此，必須在用戶無感的情況下，完成匿名登錄邏輯。
根據(jù)對(duì) Vue 生命周期的預(yù)研，將相應(yīng)的邏輯放在了 beforeCreate 中，確保在應(yīng)用初始化完成后，就可以自動(dòng)完成匿名登錄。
具體實(shí)現(xiàn)代碼如下：
// main.jsnew Vue({router,vuetify,render: h => h(App),beforeCreate: function(){ // 新增匿名登陸邏輯const auth = this.$tcb.auth(); // 新增匿名登陸邏輯auth.signInAnonymously(); // 新增匿名登陸邏輯} // 新增匿名登陸邏輯}).$mount('#app')
加入完成后，你可以使用云開發(fā)的數(shù)據(jù)庫等命令，來完成相應(yīng)的數(shù)據(jù)庫調(diào)用，驗(yàn)證自己的調(diào)用是否正常。
在這里需要注意，由于 Vue 默認(rèn)的 ESLint 規(guī)則限制，默認(rèn)是無法在 Vue 項(xiàng)目代碼中使用
console.log的，你需要使用一些命令來跳過相應(yīng)的檢查 只需要在你需要打印變量的前一行加入// eslint-disable-next-line就可以避免對(duì)應(yīng)的檢查了。
調(diào)用數(shù)據(jù)
此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/views/Result.vue
完成初始化后，就需要完成相應(yīng)的數(shù)據(jù)調(diào)用，這里不再針對(duì)每一個(gè)進(jìn)行講解，選擇一個(gè)例子來說明。
const db = this.$tcb.database();const cmd = db.collection('command');if(this.id){ // 這里的 id 是 props 傳入的參數(shù)，為命令對(duì)應(yīng)的 doc idcmd.doc(this.id).get().then(res => {this.command = res.data})}else{cmd.where({name: this.$route.params.cmd // 命令可以從 Route 中獲取，但實(shí)際場景下，因?yàn)殚_啟了 `props: true`，也可以直接從 props 中獲取。}).limit(1).get().then(res => {this.command = res.data[0]}).catch((err) => {alert("命令查詢出錯(cuò)，請(qǐng)聯(lián)系我們")// eslint-disable-next-lineconsole.error(err)})}
在這段代碼中，首先是前期掛載的 $tcb 中抽取 database() 對(duì)象，并基于 database() 對(duì)象構(gòu)建 collection() 對(duì)象。 然后就是使用 collection() 對(duì)象進(jìn)行查詢。
由于這里涉及到不同的頁面邏輯，使用了一個(gè) if 來判斷數(shù)據(jù)。上下兩種分別是獲取單個(gè)數(shù)據(jù)和使用多個(gè)數(shù)據(jù)的方法。獲取到數(shù)據(jù)以后，將數(shù)據(jù)更新，同步到 Vue 的 Data 中，完成相應(yīng)的邏輯的調(diào)用。
云開發(fā)登錄的坑
此部分代碼位置：https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js
由于為用戶提供的是快速查詢功能，因此希望用戶無論何時(shí)都是無感進(jìn)行查詢的。但實(shí)際測試的時(shí)候，發(fā)現(xiàn)用戶如果直接通過命令行登錄的時(shí)候，會(huì)導(dǎo)致報(bào)錯(cuò)。根據(jù)控制臺(tái)返回的信息來看，是用戶登錄狀態(tài)尚未完成，就進(jìn)行了數(shù)據(jù)查詢。
通過查詢云開發(fā)的文檔，發(fā)現(xiàn)云開發(fā)的 auth 對(duì)象在登錄的時(shí)候，可以傳入一個(gè) persistence 參數(shù)來控制身份信息的持久化。
由于默認(rèn)使用的是會(huì)話 ，所以導(dǎo)致用戶的登錄態(tài)丟失。為了確保應(yīng)用的狀態(tài)正常進(jìn)行，將 persistence 設(shè)置為 local，確保應(yīng)用在一次登錄后可以將用戶登錄狀態(tài)下放到用戶的存儲(chǔ) 中，這樣可以避免用戶總是會(huì)遭遇請(qǐng)求失敗的問題。
// main.jsnew Vue({router,vuetify,render: h => h(App),beforeCreate: async function(){const auth = this.$tcb.auth({ persistence: 'local' });await auth.signInAnonymously();}}).$mount('#app')
總結(jié)
在實(shí)際開發(fā)中，如果你需要通過云開發(fā)的 Web SDK 調(diào)用相應(yīng)的數(shù)據(jù)，則需要先行開啟云開發(fā)的匿名登錄并配置 Web 安全域名；在數(shù)據(jù)調(diào)用的部分和在小程序端調(diào)用云開發(fā)沒有太大的區(qū)別；并通過設(shè)置 presistence 設(shè)置搞定了登錄狀態(tài)丟失的問題。
新聞標(biāo)題：跟我學(xué)“Linux”小程序Web版開發(fā)（三）：云開發(fā)相關(guān)數(shù)據(jù)調(diào)用
網(wǎng)站地址：http://m.fisionsoft.com.cn/article/cdhgghg.html
