云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解
更新時間：2023年03月14日 12:00:33 作者：新手一號
這篇文章主要為大家介紹了云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
點贊部分
用戶點贊后，圖標(biāo)變藍(lán)色，數(shù)量增加，且要把點贊用戶的頭像顯示出來 頭像下面是瀏覽量
這個部分看著簡單，但是需要做三個表的聯(lián)表查詢
改造之前的unicloud-db組件
<!-- unicloud-db獲取數(shù)據(jù)庫數(shù)據(jù) -->
<unicloud-db :where="`_id=='${artId}'`" v-slot:default="{data, loading, error, options}" :getone="true" :collection="collections">
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading">
<u-skeleton
rows="5"
title
loading
></u-skeleton>
</view>
<view v-else>
<!-- 標(biāo)題部分 -->
<view class="title">{{data.title}}</view>
<!-- 標(biāo)題下面的用戶信息部分 userinfo -->
<view class="userinfo">
<view class="avatar">
<image :src="data.user_id[0].avatar_file ? data.user_id[0].avatar_file.url: '../../static/images/user-default.jpg'" mode="aspectFill"></image>
</view>
<view class="text">
<view class="name">{{data.user_id[0].nickname? data.user_id[0].nickname : data.user_id[0].username}}</view>
<view class="small">
<uni-dateformat :date="data.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat> · 發(fā)布于{{data.province}}</view>
</view>
</view>
<!-- 內(nèi)容部分 content -->
<view class="content">
<u-parse :content="data.content" :tagStyle="tagStyle"></u-parse>
</view>
</view>
</unicloud-db>
改造后： 把組件刪掉，然后把骨架屏這里改成if，寫一個狀態(tài)，在下面寫方法來控制骨架屏的狀態(tài)
定義一個loadState變量，值默認(rèn)為true， 網(wǎng)絡(luò)請求之前是在data里定義變量collections寫的，現(xiàn)在寫到自定義方法中 然后新定義一個detailObj接收值
把所有的DOM結(jié)構(gòu)中的data全部改成detailObj
因為這里新定義了值為detailObj，所以還得把所有的DOM結(jié)構(gòu)中的data全部改成detailObj
<template>
<view class="detail">
<!-- 評論區(qū)以上的內(nèi)容部分 container-->
<view class="container">
<!-- unicloud-db獲取數(shù)據(jù)庫數(shù)據(jù) -->
<view v-if="loadState">
<u-skeleton
rows="5"
title
loading
></u-skeleton>
</view>
<view v-else>
<!-- 標(biāo)題部分 -->
<view class="title">{{detailObj.title}}</view>
<!-- 標(biāo)題下面的用戶信息部分 userinfo -->
<view class="userinfo">
<view class="avatar">
<image :src="detailObj.user_id[0].avatar_file ? detailObj.user_id[0].avatar_file.url: '../../static/images/user-default.jpg'" mode="aspectFill"></image>
</view>
<view class="text">
<view class="name">{{detailObj.user_id[0].nickname? detailObj.user_id[0].nickname : detailObj.user_id[0].username}}</view>
<view class="small">
<uni-dateformat :date="detailObj.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat> · 發(fā)布于{{detailObj.province}}</view>
</view>
</view>
<!-- 內(nèi)容部分 content -->
<view class="content">
<u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>
</view>
</view>
<!-- 點贊部分 like -->
<view class="like">
<view class="btn">
<text class="iconfont icon-good-fill"></text>
<text>88</text>
</view>
<view class="users">
<image src="../../static/images/user.jpg" mode="aspectFill"></image>
</view>
<view class="text"><text class="num">998</text>人看過</view>
</view>
</view>
</view>
</template>
<script>
const db=uniCloud.database();
export default {
data() {
return {
artId:"",
// 骨架屏狀態(tài)
loadState:true,
tagStyle:{
p:"line-height:1.7em;font-size:16px;padding-bottom:10rpx",
// 圖像間隔,上下10,左右0
img:"margin:10px 0"
},
// 用戶信息
detailObj:null
};
},
onLoad(e) {
console.log(e);
this.artId = e.id,
this.getData()
},
methods:{
// 獲取網(wǎng)絡(luò)數(shù)據(jù)
getData(){
// 將主表副表都查出一個臨時表來
let artTemp = db.collection("quanzi_article").getTemp();
let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
db.collection(artTemp,userTemp).where(`_id=="${this.artId}"`).get(
{
getOne:true
}).then(res=>{
// 網(wǎng)絡(luò)數(shù)據(jù)獲取完成后將骨架屏狀態(tài)重置為false
this.loadState = false;
// 把獲取到的用戶信息賦值
this.detailObj = res.result.data
})
}
}
}
</script>
點贊部分渲染數(shù)據(jù)
現(xiàn)在把點贊部分放到else分支中去 然后給點贊部分渲染數(shù)據(jù)
<template>
<view class="detail">
<!-- 評論區(qū)以上的內(nèi)容部分 container-->
<view class="container">
<!-- unicloud-db獲取數(shù)據(jù)庫數(shù)據(jù) -->
<view v-if="loadState">
<u-skeleton
rows="5"
title
loading
></u-skeleton>
</view>
<view v-else>
<!-- 標(biāo)題部分 -->
<view class="title">{{detailObj.title}}</view>
<!-- 標(biāo)題下面的用戶信息部分 userinfo -->
<view class="userinfo">
<view class="avatar">
<image :src="detailObj.user_id[0].avatar_file ? detailObj.user_id[0].avatar_file.url: '../../static/images/user-default.jpg'" mode="aspectFill"></image>
</view>
<view class="text">
<view class="name">{{detailObj.user_id[0].nickname? detailObj.user_id[0].nickname : detailObj.user_id[0].username}}</view>
<view class="small">
<uni-dateformat :date="detailObj.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat> · 發(fā)布于{{detailObj.province}}</view>
</view>
</view>
<!-- 內(nèi)容部分 content -->
<view class="content">
<u-parse :content="detailObj.content" :tagStyle="tagStyle"></u-parse>
</view>
<!-- 點贊部分 like -->
<view class="like">
<view class="btn">
<text class="iconfont icon-good-fill"></text>
<!-- 點贊數(shù)不為0才顯示數(shù)量，是0就只顯示圖標(biāo) -->
<text v-if="detailObj.like_count > 0">{{detailObj.like_count}}</text>
</view>
<view class="users">
<image src="../../static/images/user.jpg" mode="aspectFill"></image>
</view>
<view class="text"><text class="num">{{detailObj.view_count}}</text>人看過</view>
</view>
</view>
</view>
</view>
</template>
這個部分看著簡單，但是需要做三個表的聯(lián)表查詢
接下來是改一些細(xì)節(jié) 現(xiàn)在是通過id進(jìn)行請求數(shù)據(jù)，是沒有問題的，但是如果用戶自己在瀏覽器搜索欄把id刪了，直接搜url就加載不出數(shù)據(jù)
邏輯：在onload中判斷有沒有id，有就加載數(shù)據(jù)，沒有就跳轉(zhuǎn)回首頁
onLoad(e) {
// 判斷有沒有ID
if(!e.id){
this.errFun();
// 必須加return,否則后面的代碼還會執(zhí)行
return;
};
this.artId = e.id,
this.getData()
},
methods:{
// 錯誤處理方法
errFun(){
uni.showToast({
title:"參數(shù)有誤",
icon:"none"
})
setTimeout(()=>{
uni.reLaunch({
url:"/pages/index/index"
})
},1000)
},
如果id是錯誤的，請求到的數(shù)據(jù)是沒有data這個參數(shù)的，所以還需要對這一點進(jìn)行判斷 在網(wǎng)絡(luò)數(shù)據(jù)請求的方法里面進(jìn)行判斷
// 獲取網(wǎng)絡(luò)數(shù)據(jù)
getData(){
// 將主表副表都查出一個臨時表來
let artTemp = db.collection("quanzi_article").getTemp();
let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
db.collection(artTemp,userTemp).where(`_id=="${this.artId}"`).get(
{
getOne:true
}).then(res=>{
// 如果data參數(shù)不存在嗎,表示傳遞的參數(shù)id有誤
if(!res.result.data){
this.errFun();
return;
}
// 網(wǎng)絡(luò)數(shù)據(jù)獲取完成后將骨架屏狀態(tài)重置為false
this.loadState = false;
// 把獲取到的用戶信息賦值
this.detailObj = res.result.data
}).catch(err=>{
this.errFun();
})
}以上就是云開發(fā)進(jìn)階uniCloud-db組件與JQL語法的轉(zhuǎn)換詳解的詳細(xì)內(nèi)容，更多關(guān)于uniCloud-db組件與JQL語法轉(zhuǎn)換的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)文字跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實dom詳解
這篇文章主要為大家介紹了JS前端開發(fā)模擬虛擬dom轉(zhuǎn)真實dom詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
基于javascript實現(xiàn)簡單的抽獎系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)簡單的抽獎系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
小程序組件傳值和引入sass的方法(使用vant Weapp組件庫)
這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
很久以前還在學(xué)校的時候，在網(wǎng)上看到有的關(guān)于js切換的效果我自己會用 很笨拙的方法試著寫出來2010-11-11
跟我學(xué)習(xí)javascript的作用域與作用域鏈
跟我學(xué)習(xí)javascript的作用域與作用域鏈，感興趣的小伙伴們可以參考一下2015-11-11
Web前端框架bootstrap實戰(zhàn)【第一次接觸使用】
Bootstrap是Twitter推出的一個開源的前端框架。這篇文章主要介紹了Web前端框架bootstrap實戰(zhàn),需要的朋友可以參考下2016-12-12
jquery操作下拉列表、文本框、復(fù)選框、單選框集合(收藏)
jquery操作拉列表、文本框、復(fù)選框、單選框集合。各種對下拉列表、文本框、復(fù)選框、單選框的jquery的相關(guān)操作。做為記錄和收藏的最好方法2014-01-01
js隨機(jī)名言2008-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)驗證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10