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 表里提供的key
			async 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>