?????????在第46章節中，我們為后臺數據創建了分類的數據表結構schema，使得可以通過后臺添加數據并保存，同時使用云函數進行數據庫數據的讀取。文章詳細介紹了如何通過前端代碼實現分類管理功能，包括獲取數據、添加、更新和刪除分類。主要代碼展示了如何使用uniCloud.database()進行數據庫操作，并通過uni-popup組件實現彈出窗口進行數據的添加和更新。此外，文章還說明了如何定義和獲取頁面數據，以及如何通過onLoad方法在頁面加載時獲取數據并展示。最后，文章總結了數據庫的讀寫刪除修改權限的開啟方法。

獲取分來，來至于數據庫

1、后臺分類功能

在前面的章節已經說了，這里來看看

包含? 獲取數據

點擊添加?

更新和刪除

1.1 主要代碼：

<template><view class="category"><!-- 分類管理 --><!-- 第二步 --><!-- 這里的row add 中間有一個空格，下面樣式就可以寫成 .row.add --><view class="row add" @click="clickAdd"><view class="left"><!-- https://uviewui.com/components/icon.html 使用的是uview的icon --><u-icon name="plus" color="#576b95" size="22"></u-icon><text class="text">新增分類</text></view></view><!-- 第一步 --><view class="row" v-for="(item,index) in categoryList" :key="item._id"><view class="left"><!-- 分類名稱 --><view class="name">{{item.name}}</view></view><view class="right"><!-- 編輯和刪除圖標 --><!-- 使用的u-icon組件，自動生成一個class名字為 u-icon --><u-icon name="edit-pen" size="26" color="#576b95" @click="updateData(item._id,item.name)"></u-icon><u-icon name="trash" size="26" color="#EC544F" @click="deleteData(item._id)"></u-icon></view></view><!-- 第三步 --><!-- https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html 使用這里彈出層 官方  使用的是輸入框示例 --><!-- 下載安裝相應的組件  ref來獲取方法進行相應的動作，uview 是通過show 來完成相應的動作 --><!-- @confirm 這是一個回調函數，我們通過這就知道輸入的到底是什么 --><uni-popup ref="inputDialog"><uni-popup-dialog mode="input" :value="iptValue"placeholder="請輸入分類名稱"title="分類名稱" @confirm="dialogConfirm"></uni-popup-dialog></uni-popup></view>
</template><script>const db = uniCloud.database()export default {data() {return {// categoryList:[{_id:1,name:"水果"},{_id:2,name:"肉類"}],// 上面是模擬數據  實際寫的是空 下面這樣的  真實數據來之云存儲，并給該變量賦值categoryList:[],iptValue:"",updateID:null};},onLoad() {this.getCateGory()},methods:{//獲取數據庫中的分類getCateGory(){db.collection("green-mall-categories").get().then(res=>{console.log(res);this.categoryList = res.result.data})},//添加分類clickAdd(){this.iptValue=""this.updateID=null;//https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html  使用的是Popup Methods中open  // 這里的inputDialog 的屬性是ref在uni-popup中// 所以這里使用的是 this.$refs.inputDialog.open();this.$refs.inputDialog.open();},//點擊確認按鈕   這里的name 是我們green-mall-categories 表里提供的keyasync dialogConfirm(e){this.iptValue = e;if(this.updateID){await db.collection("green-mall-categories").doc(this.updateID).update({name:this.iptValue})		}else{await db.collection("green-mall-categories").add({name:this.iptValue})}		this.iptValue = "";//把輸入或修改的值改為空，以免下一次在調用就還有上一次的值this.getCateGory();	},//修改一條分類updateData(id,name){this.iptValue=name;this.updateID=id;this.$refs.inputDialog.open();},//刪除一條分類deleteData(id){uni.showModal({content:"是否刪除該分類?",success:res=>{if(res.confirm){db.collection("green-mall-categories").doc(id).remove().then(res=>{this.getCateGory();})							}},fail:err=>{console.log(err);}})}}}
</script><style lang="scss">
.category{padding:30rpx;.row{@include flex-box();border-bottom: 1px solid $border-color-light;padding:26rpx 0;.left{font-size: 34rpx;}.right{@include flex-box();//使用的u-icon組件，自動生成一個class名字為 u-icon .u-icon{margin-left:30rpx;}}}// 對應的class 就是 row add.row.add{.left{color:$brand-theme-color-aux;@include flex-box();.text{font-size: 36rpx;padding-left:10rpx;}}}
}
</style>

2 使用數據庫獲取數據

2.1 頁面代碼

2.2 主要方法

2.3 開啟數據庫的讀寫刪除修改權限

這里暫時開啟，后面會對權限進行顯示

3、 方法說明

3.1 頁面展示數據

3.2 添加 增加的按鈕

3.3 使用彈出窗口進行增加（點擊修改或者新增 后 頁面上展示）

3.4 頁面數據定義和獲取（進入頁面時）

定義的數據是用來進行數據的存儲；

onload 是用來進入頁面時 進行數據的獲取并傳遞給data ，然后再展示到頁面上。

3.5 方法說明

3-5-1 、方法1 獲取數據 getcatgory?

3-5-2、 方法2 添加數據 add

??????????????? //https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html? 使用的是Popup Methods中open ?
??????????????? // 這里的inputDialog 的屬性是ref在uni-popup中
??????????????? // 所以這里使用的是 this.$refs.inputDialog.open();

3-5-3、 方法3 更新數據 update

??????????????? //https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html? 使用的是Popup Methods中open ?
??????????????? // 這里的inputDialog 的屬性是ref在uni-popup中
??????????????? // 所以這里使用的是 this.$refs.inputDialog.open();

3-5-4、 方法4? 刪除數據 delete

3-5-6、彈出層中的事件處理，主要是添加和更新數據的操作

@confirm="dialogConfirm"? 彈出層定義的動作。再add 和update 中使用了??所以這里使用的是 this.$refs.inputDialog.open();

??????????????? //https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html? 使用的是Popup Methods中open ?
??????????????? // 這里的inputDialog 的屬性是ref在uni-popup中
??????????????? // 所以這里使用的是 this.$refs.inputDialog.open();

3-5-7 、這里要定義數據庫（相當于導入數據庫，沒有使用jql方法，使用的是傳統方法）

??? const db = uniCloud.database()