溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“uniCloud-db組件與JQL語法的轉換的方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“uniCloud-db組件與JQL語法的轉換的方法是什么”文章吧。
用戶點贊后，圖標變藍色，數量增加，且要把點贊用戶的頭像顯示出來 頭像下面是瀏覽量
這個部分看著簡單，但是需要做三個表的聯表查詢
<!-- unicloud-db獲取數據庫數據 -->
<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>
<!-- 標題部分 -->
<view class="title">{{data.title}}</view>
<!-- 標題下面的用戶信息部分 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> · 發布于{{data.province}}</view>
</view>
</view>
<!-- 內容部分 content -->
<view class="content">
<u-parse :content="data.content" :tagStyle="tagStyle"></u-parse>
</view>
</view>
</unicloud-db>改造后： 把組件刪掉，然后把骨架屏這里改成if，寫一個狀態，在下面寫方法來控制骨架屏的狀態
定義一個loadState變量，值默認為true， 網絡請求之前是在data里定義變量collections寫的，現在寫到自定義方法中 然后新定義一個detailObj接收值
因為這里新定義了值為detailObj，所以還得把所有的DOM結構中的data全部改成detailObj
<template>
<view class="detail">
<!-- 評論區以上的內容部分 container-->
<view class="container">
<!-- unicloud-db獲取數據庫數據 -->
<view v-if="loadState">
<u-skeleton
rows="5"
title
loading
></u-skeleton>
</view>
<view v-else>
<!-- 標題部分 -->
<view class="title">{{detailObj.title}}</view>
<!-- 標題下面的用戶信息部分 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> · 發布于{{detailObj.province}}</view>
</view>
</view>
<!-- 內容部分 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:"",
// 骨架屏狀態
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:{
// 獲取網絡數據
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=>{
// 網絡數據獲取完成后將骨架屏狀態重置為false
this.loadState = false;
// 把獲取到的用戶信息賦值
this.detailObj = res.result.data
})
}
}
}
</script>現在把點贊部分放到else分支中去 然后給點贊部分渲染數據
<template>
<view class="detail">
<!-- 評論區以上的內容部分 container-->
<view class="container">
<!-- unicloud-db獲取數據庫數據 -->
<view v-if="loadState">
<u-skeleton
rows="5"
title
loading
></u-skeleton>
</view>
<view v-else>
<!-- 標題部分 -->
<view class="title">{{detailObj.title}}</view>
<!-- 標題下面的用戶信息部分 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> · 發布于{{detailObj.province}}</view>
</view>
</view>
<!-- 內容部分 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>
<!-- 點贊數不為0才顯示數量，是0就只顯示圖標 -->
<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>
這個部分看著簡單，但是需要做三個表的聯表查詢
接下來是改一些細節 現在是通過id進行請求數據，是沒有問題的，但是如果用戶自己在瀏覽器搜索欄把id刪了，直接搜url就加載不出數據
邏輯：在onload中判斷有沒有id，有就加載數據，沒有就跳轉回首頁
onLoad(e) {
// 判斷有沒有ID
if(!e.id){
this.errFun();
// 必須加return,否則后面的代碼還會執行
return;
};
this.artId = e.id,
this.getData()
},
methods:{
// 錯誤處理方法
errFun(){
uni.showToast({
title:"參數有誤",
icon:"none"
})
setTimeout(()=>{
uni.reLaunch({
url:"/pages/index/index"
})
},1000)
},如果id是錯誤的，請求到的數據是沒有data這個參數的，所以還需要對這一點進行判斷 在網絡數據請求的方法里面進行判斷
// 獲取網絡數據
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參數不存在嗎,表示傳遞的參數id有誤
if(!res.result.data){
this.errFun();
return;
}
// 網絡數據獲取完成后將骨架屏狀態重置為false
this.loadState = false;
// 把獲取到的用戶信息賦值
this.detailObj = res.result.data
}).catch(err=>{
this.errFun();
})
}以上就是關于“uniCloud-db組件與JQL語法的轉換的方法是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
