uniCloud项目中树形分类页面的快速开发（二）

本文是《uniCloud项目中树形分类页面的快速开发》的第二部分。介绍如何通过schema自动生成管理端代码。并就系统提供的RBAC角色权限管理功能进行了实操。

一、创建数据结构文件（schema），生成管理端页面代码。

1、梳理业务需求：

只有“平台管理员”角色可以对分类表进行增删改查，所有人都可以查询分类表。
分类表设三个层级的分类。
每个分类除名称为必填外，还可以选择上传分类图片。
分类顺序可以控制。子分类的顺序和父分类联动。
分类的ID和创建时间由系统自动生成。
通过父类ID来关联父类和子类，顶级分类的父类ID为空。
列表页面通过树形结构来显示。

2、根据业务需求创建schema文件

在HuilderX编辑器中，找到uni-taxonomy项目，在项目内uniCloud->dataase目录上右击创建名为taxonomy.schema.json的schema文件。

截屏2021-12-11 08.49.12.png

截屏2021-12-11 08.50.06.png

3、编写schema代码。

在taxonomy.schema.json中写入下面的代码，保存。

{
	"bsonType": "object",
	"required": ["name"],
	"permission": {
		"read": true,
		"create": "'padmin' in auth.permission",
		"update": "'padmin' in auth.permission",
		"delete": "'padmin' in auth.permission"
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		},
		"name": {
			"bsonType": "string",
			"description": "分类名称",
			"label": "分类名称",
			"trim": "both"
		},
		"imagefile": {
			"bsonType": "file",
			"fileMediaType": "image",
			"title": "图片文件",
			"description": "图片文件信息，包括文件名、url等（可选）"
		},
		"level": {
			"bsonType": "int",
			"title": "分类层级",
			"description": "0一级 1-二级 2-三级 ",
			"maximum": 2
		},
		"sort": {
			"bsonType": "int",
			"description": "类别显示顺序",
			"label": "排序"
		},
		"parent_id": {
			"bsonType": "string",
			"title": "父节点ID",
			"description": "父节点ID（顶层节点的父节点ID为空）",
			"parentKey":"parent_id"
		},
		"create_date": {
			"bsonType": "timestamp",
			"description": "创建时间（系统自动调取当前时间）",
			"forceDefaultValue": {
				"$env": "now"
			}
		}
	}
}

复制代码

有关schema的强大功能和编写规则请参看官方文档。

4、上传schema文件。

在taxonomy.schema.json文件名上右击，确认上传完成。

截屏2021-12-11 09.03.30.png

截屏2021-12-11 09.05.00.png

二、生成并测试管理端页面。

1、自动生成管理端页面代码

在taxonomy.schema.json文件名上右击，选择schema2code。

截屏2021-12-11 09.07.32.png

选择目标项目为uni-taxonomy-admin。

截屏2021-12-11 09.08.59.png

左上角标签栏选择uniCloud admin 页面，勾选项目模式，点击确认按钮。

截屏2021-12-11 09.10.15.png

选择生成页面放置位置，默认即可。自动注册页面的路径。

截屏2021-12-11 09.16.16.png

将生成的页面文件与项目合并。

截屏2021-12-11 09.16.31.png

在文件目录列表中可以看到刚刚生成的三个页面文件。

截屏2021-12-11 09.19.56.png

2、新增分类管理链接菜单。

在HuilderX中打开uni-taxonomy-admin项目的页面配置文件（pages.json）。在配置文件中找到taxonomy.schema.json通过schema2code生成的页面路径。

截屏2021-12-11 19.48.02.png

拷贝pages/taxonomy/list页面路径备用。
登录管理端。在系统管理选中菜单管理，点击左上角新增一级菜单按钮，新增一条分类管理菜单。菜单路径就是前面拷贝的路径。

截屏2021-12-11 19.53.50.png

保存后，管理端页面左侧多出了一个分类管理菜单，点击菜单链接，可以看到分类列表页面。

截屏2021-12-11 19.57.13.png

此时页面是空的，因为我们还没有输入任何数据。

3、测试分类管理的增删改查功能。

点击右上角新增按钮，出现新增分类的页面，这个页面是根据schema自动生成的。图片上传组件也是根据schema约定自动生成的。

截屏2021-12-11 21.29.45.png

提交后，返回到列表页面，可以看到刚刚新增的一条分类数据。

截屏2021-12-11 21.31.25.png

解决分类列表中图片不能显示问题。

有可能自动生成的代码问题，分类列表页面不能正常显示图片。在项目uni-taxonomy-admin下的unicloud目录上右击打开云控制台。

截屏2021-12-12 06.01.38.png

在云控制台中打开uni-taxonomy空间，找到云数据库taxonomy，可以看到我们刚刚新增的一条数据。展开字段imagefile，可以看到我们成功上传的图片信息。说明自动生成的分类添加页面是有效的，图片上传也是完美衔接的。

截屏2021-12-12 06.03.11.png

在云空间中，打开云存储，可以看到，系统已经将上传的图片自动存储在这里了，而且自动生成了图片信息存储在数据库中了。

截屏2021-12-12 06.10.54.png

点击详情，可以仅有看到图片文件的详细信息。

截屏2021-12-12 06.12.05.png

我这里自动生成的分类列表页面不能正常显示图片。于是对/pages/taxonomy/list.vue文件进行了改动，保存好就可以正常显示图片了。

<uni-td align="center">
	<!-- 这是添加的代码 -->
	<image v-if="item.imagefile.url " :src="item.imagefile.url " mode="aspectFit"
		style="width:30px;height:30px;"></image>
    <!-- 这是自动生成的代码 -->
	<!-- <uni-file-picker v-if="item.imagefile && item.imagefile.fileType == 'image'"
		:value="item.imagefile" :file-mediatype="item.imagefile && item.imagefile.fileType"
		return-type="object" :imageStyles="imageStyles" readonly></uni-file-picker>
	<uni-link v-else :href="item.imagefile && item.imagefile.url"
		:text="item.imagefile && item.imagefile.url"></uni-link> -->
		
</uni-td>

复制代码