学习：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默认为nullconst formRef = ref(null)// 表单的ref默认为nullconst 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其他数据放入parmslet {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