学习：uniapp全栈微信小程序vue3后台（3）

11.创建分类schema表结构和云对象

创建DB Schema

修改表结构

{
	"bsonType": "object",
	"required": [
		"name"
	],
	"permission": {
		"read": true,
		"create": false,
		"update": false,
		"delete": false
	},
	"properties": {
		"_id": {
			"description": "存储文档 ID,系统自动生成"
		},
		"name": {
			"bsonType": "string",
			"description": "分类名称",
			"label": "名称",
			"trim": "both",
			"minLength": 2,
			"maxLength": 8
		},
		"select": {
			"bsonType": "bool",
			"description": "是否精选 默认false,true是精选",
			"defaultValue": false
		},
		"enable": {
			"bsonType": "bool",
			"description": "是否启用 默认false,true是启用",
			"defaultValue": false
		},
		"sort": {
			"bsonType": "int",
			"description": "类别显示顺序",
			"label": "排序"
		},
		"picurl": {
			"bsonType": "string",
			"description": "缩略图地址"
			
		},
		"createTime": {
			"bsonType": "timestamp",
			"description": "创建时间",
			"forceDefaultValue": {
				"$env": "now"
			}
		}
	},
	"version": "0.0.1"
}

新建云对象

/uniCloud-alipay/cloudfunctions/admin-wallpaper-classify/index.obj.js

// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc语法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function() { // 通用预处理器

	},
	add(params = {}) {
		return params;
	}
}

/pages/wallpaper/children/classifyPopup

<script setup>
	import {
		ref
	} from 'vue';
	import dayjs from "dayjs"
	import {
		cloudToHttps
	} from '@/utils/tools.js';
	import {
		compressAndConvertTowebP
	} from '@/utils/tools.js';
	import classifyCloudObj = uniCloud.importObject("wallpaper-classify")
	const classifyPopup = ref(null)
	// 表单的ref默认为null
	const formRef = ref(null)

	// 表单的ref默认为null
	const formDate = ref({
		name: "",
		sort: 0,
		select: false,
		enable: false,
		picurl: "",
		// 临时地址
		tempurl: ""
	})
	const rules = ref({
		name: {
			rules: [{
					required: true,
					errmessage: '分类名不能为空',
				},
				{
					minLength: 2,
					maxLength: 8,
					erroeMessage: '{label}长度{minLength} 到{maxLength}个字符',
				}
			],
			// 当前表单域的字段中文名，可不填写
			label: "分类名称"
		},
	})
	const open = () => classifyPopup.value.open()
	//关闭
	const close = () => classifyPopup.value.close()
	//提交
	const submit = async () => {
		try {
			await formRef.value.validate();
			// 判断
			if (formDate.value.tempurl) {
				// 上传图片,file是上传结果
				let file = await uploadFile();
				// 转换
				formDate.value.picurl = cloudToHttps(file.fileID)
			}
			// // 解构赋值,删除临时地址
			// let parms = {
			// 	...formDate.value
			// }
			// delete parms.tempurl

			// 解构,除了tempurl其他数据放入parms
			let {
				tempurl,
				...parms
			} = formDate.value

			// 传到云端
			let res = await classifyCloudObj.add(parms)

			console.log(res)
		}.catch(err) {}
	}
	//长传图片到云存储
	const uploadFile = async () => {
		// 上传前压缩
		let tempurl = await compressAndConvertTowebP(formDate.value.tempurl)
		return await uniCloud.uploadFile({
			filePath: tempurl,
			cloudPath: "wallpaper/" + dayjs().format("YYYMMMDD") + "/" + Date.now() + ".webp"
		})
	}
	const selectChange = (e) => {
		formDate.value.select = e.detail.value
	}
	const enableChange = () => {
		formDate.value.enable = e.detail.value
	}
	const selectPicurl = (e) => {
		uni.chooseImage({
			count: 1,
			success: res => {
				formDate.value.tempurl = res.tempFilePaths[0]
			}
		})

	}

	const delImg = () => {
		formDate.value.tempurl = ''
	}
	// 向外导出
	defineExpose({
		open,
		close,
	})
</script>
<template>
	<uni-popup ref="classifyPopup" type="center" @click="handleAdd" :is-mask-click="false">
		<view class="classifyPopup">
			<uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-align="right" :label-width="100">
				<!-- 用了:rules="rules"验证规则，需要声明哪个字段, name:表单域的属性名，在使用校验规则时必填 -->
				<uni-forms-item label="分类名称" name="name" required>
					<uni-easyinput type="text" v-model="formDate.name" placeholder="请输入分类名称" />
				</uni-forms-item>

				<uni-forms-item label="排序" name="sort">
					<uni-easyinput type="number" v-model="formDate.sort" placeholder="请输入排序" />
				</uni-forms-item>

				<uni-forms-item label="缩略图">
					<view cl