uniapp-商城-49-后台 分类数据的生成（方法加精）

        前面47和48章节对代码进行了分析和解读。但是还是又很多地方需要加精。如方法中的注释，执行中的提示，特别是添加和修改中，相关值的初始化，另外还有页面的刷新，并且在页面刷新时的异步操作 同步化实现。

但这里唯一不好的是 使用的数据传输在页面上进行的。推荐可以修改为云对象的方式。

不妨来看看代码：

<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) {// popup的处理，解决添加时值未空的操作，应该popup有判断，但是自己还是做一个if (!e) {this.warningshow("分类名称为空");return}// 修改的判断，没有变化也不要请求数据库，这里上线了都流量费呀if (this.iptValue == e) {this.warningshow("分类名称未修改");return}//下面才是真的操作if (this.updateID) {//这里 有一个异步同步化的操作，满满的知识载荷await db.collection("green-mall-categories").doc(this.updateID).update({name: e}).then(res => {this.warningshow("修改分类成功");this.getCateGory();})} else {await db.collection("green-mall-categories").add({name: e}).then(res => {this.warningshow("添加分类成功");this.getCateGory();})}//把输入或修改的值改为空，以免下一次在调用就还有上一次的值// this.iptValue = "";},//修改一条分类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.warningshow("删除分类成功");this.getCateGory();})}},fail: err => {console.log(err);}})},//弹窗提示，人性化的提示。warningshow(str) {uni.showToast({title: str})}}}
</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>