uniCloud ---- schema2code

目录

schema2code有两种方式 

label属性

component属性

group属性

应用 

 

DB Schema里有大量的信息，其实有了这些信息，前端将无需自己开发表单维护界面，uniCloud可以自动生成新增、修改、列表、详情的前端页面，以及admin端的列表、新增、修改、删除全套功能。

为强化表单的自定义性，DB Schema还扩展了label、componentForEdit、componentForShow、group、order等属性，以控制表单项在界面上的渲染控件。

schema2code不是简单的一键crud生成接口，它直接生成了可运行的页面。

schema2code代码生成系统功能包括：

  • 自动生成前端页面，新增、修改、列表、详情页面文件，分别是add.vue、edit.vue、list.vue和detail.vue。
  • 自动生成uniCloud admin页面，新增、修改、列表页面文件，分别是add.vue、edit.vue和list.vue。
  • 自动生成前端表单校验规则

表单校验工作，在前端和后端都需要做。在过去，这造成重复投入。

现在，前后端的表单验证都被统一了。

开发者修改DB Schema并保存后，云端的校验规则直接生效。

然后开发者需要把这套校验规则导入到前端项目中。即利用本功能。

DCloud提供了uni-forms前端组件，该组件的表单校验规范完全符合DB Schema中的校验规则，实现云端统一。uni-forms组件地址：uni-forms 表单 - DCloud 插件市场

schema2code有两种方式 

  • 方式1：在HBuilderX中操作 1.1 下载刚刚创建的通讯录表的schema 

     1.2 项目根目录的 uniCloud/database/opendb-contacts.schema.json 文件上点击右键，或者在已打开的 Schema 编辑器点击右键.如果没有该菜单，请在插件市场安装插件：schema2code - DCloud 插件市场 

     1.3 弹出一个对话框 schema2code，选择要导出的项目类型（uni-app用户端项目还是admin管理端项目），以及表字段名（去掉不需要在前端展现或编辑的字段） 

     1.4 点击对话框右下角的确定按钮，将执行导入动作，如果导入的文件和工程中的文件有差异将弹出文件对比框，继续操作并确认导入

  • 方式2：在uniCloud web控制台操作 2.1 选中刚创建好的数据表opendb-contacts，点击进入表结构schema界面，点击按钮 “schema2code” 

     2.2 点击“导入HBuilderX”或“下载zip”按钮，将生成的代码合并到自己的项目中 

上图每个区域的解释如下：

  • 区域A. 字段列表

这里需要选择在前端表单页面出现的字段，无需用户在表单页面提交的字段（如create_date）不应勾选。

选择字段后，右侧会变化，自动生成代码。

  • 区域B. 导出文件清单

这里显示了完整的工程结构。点击右下角的“下载zip”可以把这个工程下载到本地。点击这里的每个文件，在右侧会出现文件相应的代码。

只有自动生成的文件会在右侧显示代码，components目录下的三方库不会在右侧显示代码。

  • 区域C. 组件列表

根据DB Schema生成的表单页面，是基于uni-forms组件的，该组件地址：uni-forms 表单 - DCloud 插件市场

  • 区域D. 扩展校验函数，每个函数是一个文件

  • 区域E. 表单校验规则，和表名一致，每个表一个文件

在修改schema中的校验规则后，云端是直接生效的。前端部分则需要下载这个js文件到本地工程。

如果直接已经下载过，需要二次更新，也可以在右侧复制源码，增量添加到前端工程的校验规则中。

  • 区域F. 新建和编辑页面

自动生成的表单页面，包括新建页面和编辑页面。这些页面均基于clientDB，可直接使用。

  • 区域G. 文件预览 (仅支持预览 自动生成的页面和校验规则)

注意：需HBuilderX 3.0.5+ 支持

HBuilderX 3.1.15 schema2code 生成文件结构调整, 生成的 pages.json 改为 page_init.json，确认导入工程时自动合并到项目的 pages.json，page_init.json不会导入到工程中，仅在预览界面显示

HBuilderX 3.1.15 之前的版本 pages.json 导入时会覆盖用户工程中已有的 pages.json，导入确认时选择不导入该文件手动拷贝内容到 pages.json

label属性

在uni-forms组件中，每个表单项都被包裹在uni-forms-item中，该子组件可设置label，即，在表单项如输入框前面或上面放置一个说明性名词。

在DB Schema的label属性中设置值后，生成前端表单页面时即可自动给uni-forms-item的label属性赋值。

如果未设置label属性，但配置了title属性，生成前端表单页面时会取title作为前端的label。

component属性

定义该字段在表单中使用什么样的组件进行渲染，可设置前端的组件名和初始属性。

这里的表单，指的是数据维护表单，比如新建记录或修改记录的表单。

生成的所有表单项，都在uni-forms组件下。

属性类型描述
namestring组件名称
propsObject组件属性
childrenString子组件
childrenDataArray子组件数据

注意事项

  • children 属性, {item} 表示 childrenData 数组中的项

示例

 

{"bsonType": "object","required": ["name", "nickname"],"permission": {"read": false,"create": false,"update": false,"delete": false},"properties": {"_id": {"description": "存储文档 ID（用户 ID），系统自动生成"},"name": {"bsonType": "string","label": "姓名","minLength": 2,"maxLength": 10,"errorMessage": {"required": "{label}必填","minLength": "{label}不能小于{minLength}个字符"},"permission": {"read": false,"write": false},"component": {"name": "input","props": {"placeholder": "请输入姓名"}}},"nickname": {"bsonType": "string","description": "用户昵称","label": "昵称","errorMessage": "{label}无效","component": {"name": "input","props": {"placeholder": "请输入昵称"}}},"hobby": {"bsonType": "array","description": "爱好","label": "爱好","enum": [{"text": "游泳","value": 1},{"text": "骑行","value": 2},{"text": "音乐","value": 3},{"text": "美术","value": 4}]},"gender": {"bsonType": "int","description": "用户性别：0 未知 1 男性 2 女性","label": "性别","enum": [{"text": "未知","value": 0}, {"text": "男","value": 1}, {"text": "女","value": 2}],"errorMessage": "{label}无效"},"email": {"bsonType": "string","description": "邮箱地址","format": "email","label": "邮箱","errorMessage": "{label}无效"},"language": {"bsonType": "string","label": "自定义children","component": {"name": "select","children": "<option value=\"{value}\">{label}</option>","childrenData": [{"label": "中文简体", "value": "zh-cn"}]}}}
}

group属性

将多个表单项合并在一个分组里显示。前端渲染时，group相同的表单项会自动合并在一个uni-group组件中，不同分组的表单项之间有间隔。该组件详见：uni-group 分组 - DCloud 插件市场

示例

{"bsonType": "object","required": ["name"],"properties": {"name": {"bsonType": "string","label": "姓名","group": "1","minLength": 2,"maxLength": 8,"errorMessage": {"required": "{label}必填","minLength": "{label}不能小于{{minLength}}个字符","maxLength": "{label}不能大于{{maxLength}}个字符"},"component": {"name": "uni-field","props": {"placeholder": "请输入姓名","class": "input","hidden": false,"readonly": false,"disabled": false,"value": null}}},"age": {"bsonType": "int","label": "年龄","group": "1","minimum": 0,"maximum": 150,"errorMessage": "{label}应该大于 {minimum} 岁，小于 {maximum} 岁","component": {"name": "uni-field","props": {"placeholder": "请输入年龄","value": null}}}}
}

生成带有group组件的表单代码

<uni-forms><uni-group><uni-forms-item label="姓名"><input placeholder="请输入姓名" class="input" :hidden="false" :readonly="false" :disabled="false" /></uni-forms-item><uni-forms-item label="年龄"><input  placeholder="请输入年龄" /></uni-forms-item></uni-group>

应用 

schema2code 用于通过 schema 文件，自动生成对表进行增删改查的操作页面。

以 uniCloud-aliyun/database/todo.schema.json 为例

{"bsonType": "object","required": [],"permission": {"read": true,"create": true,"update": true,"delete": true},"properties": {"_id": {"description": "ID，系统自动生成"},"content": {"bsonType": "string","label": "内容："}}
}

范例中的字段类型必须设置（否则 schema2code 无法渲染表单）

		"content": {"bsonType": "string", // 必要！！！"label": "内容："}

若提示安装插件 schema2code 则安装

 

将文件 pages/todo/list.vue 中的

{{item._id}}

改为

{{item.content}}

 

默认生成的列表只展示_id，此处需自行修改成想要的效果

运行项目，访问 http://localhost:8080/#/pages/todo/list

在这里插入图片描述 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/671968.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

电脑小白必看：如何备份电脑系统？

电脑小白必看：如何备份电脑系统？

电脑系统坏了怎么办&#xff1f;扛着自己的笔记本或是台式机的主机去电脑修理店花几十上百重装系统&#xff1f;或是自己用光盘或是U盘启动盘花费数小时重新安装系统&#xff1f;还在为系统问题发愁吗&#xff1f;今天&#xff0c;小编给大家一个简单的方法&#xff0c;让你免去…
阅读更多...
ERP 系统架构的设计与实践总结

ERP 系统架构的设计与实践总结

企业资源计划&#xff08;ERP&#xff09;系统是一种集成多个业务功能的综合性软件解决方案。在设计和实践 ERP 系统架构时&#xff0c;需要考虑诸多因素&#xff0c;以确保系统能够满足企业的需求&#xff0c;并提供高效、可靠、安全的服务。本文将介绍一些关键的设计原则和实…
阅读更多...
2024Node.js零基础教程(小白友好型)，nodejs新手到高手，（六）NodeJS入门——http模块

2024Node.js零基础教程(小白友好型)，nodejs新手到高手，（六）NodeJS入门——http模块

047_http模块_获取请求行和请求头 hello&#xff0c;大家好&#xff0c;那第二节我们来介绍一下如何在这个服务当中来提取 HTT 请求报文的相关内容。首先先说一下关于报文的提取的方法&#xff0c;我在这个文档当中都已经记录好了&#xff0c;方便大家后续做一个快速的查阅。 …
阅读更多...
情绪影响下的交谈与决策偏差

情绪影响下的交谈与决策偏差

人是情感丰富的生物&#xff0c;我们的情绪状态不仅塑造着我们的感知和行为&#xff0c;更深深地影响着我们的判断与决策。尤其是在人际交流中&#xff0c;带着强烈情绪进行交谈往往容易导致误解、冲突甚至做出错误的判断。本文将围绕这一现象展开讨论&#xff0c;揭示情绪对交…
阅读更多...
图像处理之《生成隐写流》论文阅读

图像处理之《生成隐写流》论文阅读

一、文章摘要 生成隐写术(GS)是一种新的数据隐藏方式&#xff0c;其特点是直接从秘密数据生成隐写介质。现有的GS方法通常因性能差而受到批评。本文提出了一种新的基于流的GS方法——生成隐写流(GSF)&#xff0c;该方法可以直接生成隐写图像而不需要封面图像。我们将隐写图像生…
阅读更多...
简单实验 spring cloud gateWay 路由实验 实验

简单实验 spring cloud gateWay 路由实验 实验

1.概要 1.1 说明 微服务统一网关实验&#xff0c;这里简单实验一下路由的功能 1.2 实验步骤&#xff0c;使用下面这个工程作为基础工程添加了一个gateWay做如下使用 简单实践 spring cloud nacos nacos-server-2.3.0-CSDN博客 2 代码 2.1 工程文件 <?xml version&quo…
阅读更多...
Qt程序设计-导出PDF

Qt程序设计-导出PDF

本文讲解如何实现导出PDF，包含如何使用HTML格式和添加图片。 实例如下： 创建项目，添加两个按钮，并在D盘提前准备好图片。 窗体的头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>#include <QPrinter> #include <QPainter> #i…
阅读更多...
泰雷兹和Quantinuum推出入门套件，帮助企业为未来的后量子加密变革做好准备

泰雷兹和Quantinuum推出入门套件，帮助企业为未来的后量子加密变革做好准备

•新的解决方案——PQC入门套件(PQC Starter Kit)为用户提供了一种快速、简便的方法&#xff0c;用于测试和衡量其在后量子时代防范量子计算攻击的准备情况 •随着量子计算逐渐成熟&#xff0c;企业为后量子时代做好准备并培养加密灵活性&#xff0c;对于降低数据泄露风险至关重…
阅读更多...
【PHP】TP5.0模型关联搜索查询

【PHP】TP5.0模型关联搜索查询

在ThinkPHP 5.0中&#xff0c;模型关联为我们提供了一种便捷的方式来操作数据库&#xff0c;尤其是在进行关联查询时。本文将介绍如何在TP5.0中使用模型关联进行搜索查询&#xff0c;并解决可能出现的报错问题。 一、模型方法 在TP5.0中&#xff0c;模型方法是实现关联的关键…
阅读更多...
JAVA中的单例模式-＞饿汉式

JAVA中的单例模式-＞饿汉式

一、步骤 1.构造器私有化>防止直接new // 步骤一、构造器私有化>防止直接new private GirlFriend(String name){System.out.println("构造器被调用");this.name name; } 2.类的内部创建对象 // 步骤二、类的内部创建对象&#xff08;该对象是static&#x…
阅读更多...
Win32 SDK Gui编程系列之--ListView自绘OwnerDraw

Win32 SDK Gui编程系列之--ListView自绘OwnerDraw

ListView自绘OwnerDraw 1.ListView自绘OwnerDraw 正在试错是否使用了列表视图，尽量制作出智能的表格编辑器。本页显示了业主抽签的表格数据(二维数组数据)的显示方法。 显示画面和整个程序如下所示。使用ListView_GetSubItemRect宏的话，就不需要getRect函数了。 当nCol的…
阅读更多...
10-树-从中序与后序遍历序列构造二叉树

10-树-从中序与后序遍历序列构造二叉树

这是树的第10篇算法&#xff0c;力扣链接。 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7], po…
阅读更多...
WebAssembly002 FFmpegWasmLocalServer项目

WebAssembly002 FFmpegWasmLocalServer项目

项目介绍 https://github.com/incubated-geek-cc/FFmpegWasmLocalServer.git可将音频或视频文件转换为其他可选的多媒体格式&#xff0c;并导出转码的结果 $ bash run.sh FFmpeg App is listening on port 3000!运行效果 相关依赖 Error: Cannot find module ‘express’ …
阅读更多...
MybatisPlus Wrapper构造器（查询篇）

MybatisPlus Wrapper构造器（查询篇）

笔记&#xff1a;* 依赖MybatisPlus 3.5.5* 自动映射&#xff1a;a) 表名和实体类的映射 -> t_stu 表 Student 实体类:1.当表名和实体类名不一样的时候再实体类类名上加上TableName注解TableName("t_stu")2.也可以在配置文件中配置数据库表名的前缀&#xff0c;配…
阅读更多...
由vscode自动升级导致的“终端可以ssh服务器，但是vscode无法连接服务器”

由vscode自动升级导致的“终端可以ssh服务器，但是vscode无法连接服务器”

问题描述 简单来说就是&#xff0c;ssh配置没动&#xff0c;前两天还可以用vscode连接服务器&#xff0c;今天突然就连不上了&#xff0c;但是用本地终端ssh可以顺利连接。 连接情况 我的ssh配置如下&#xff1a; Host gpu3HostName aaaUser zwx现在直接在终端中进行ssh&am…
阅读更多...
ElastAlert 错误日志告警

ElastAlert 错误日志告警

文章目录 前言一、ElastAlert 概览1.1 简介1.2 ElastAlert 特性 二、ElastAlert 下载部署2.1 安装 Python3 环境2.2 下载 ElastAlert2.3 部署 ElastAlert 三、接入平台3.1 对外接口层3.2 服务层 前言 ElastAlert 是 Yelp 公司基于 python 开发的 ELK 日志告警插件&#xff0c;…
阅读更多...
Stata学习（1）

Stata学习（1）

一、五大窗口 Command窗口&#xff1a;实现人机交互 来导入一个自带数据&#xff1a; sysuse是导入系统自带的数据&#xff0c;auto导入该数据的名称&#xff0c;后面的clear是清除之前的数据 结果窗口&#xff1a;展示计算结果、查找功能 在Edit的find可以实现查找功能&#…
阅读更多...
（30）数组元素和与数字和的绝对差

（30）数组元素和与数字和的绝对差

文章目录 每日一言题目解题思路代码结语 每日一言 书籍便是这种改造灵魂的工具。人类所需要的&#xff0c;是富有启发性的养料。而阅读&#xff0c;则正是这种养料。——雨果 题目 题目链接&#xff1a;数组元素和与数字和的绝对差 给你一个正整数数组 nums 。 元素和 是 n…
阅读更多...
Nacos安装，服务注册，负载均衡配置，权重配置以及环境隔离

Nacos安装，服务注册，负载均衡配置，权重配置以及环境隔离

1. 安装 首先从官网下载 nacos 安装包&#xff0c;注意是下载 nacos-server Nacos官网 | Nacos 官方社区 | Nacos 下载 | Nacos 下载完毕后&#xff0c;解压找到文件夹bin&#xff0c;文本打开startup.cmd 修改配置如下 然后双击 startup.cmd 启动 nacos服务&#xff0c;默认…
阅读更多...
帕金森病的主要原因是什么？

帕金森病的主要原因是什么？

帕金森病的主要原因目前尚不完全清楚&#xff0c;但多种因素可能与其发病有关。 首先&#xff0c;遗传因素是一个重要的影响因素。临床研究和统计数据显示&#xff0c;约有10%的帕金森病患者存在家族史&#xff0c;这表明遗传因素在帕金森病发病中起着重要作用。一些家族研究显…
阅读更多...
最新文章

Copyright @ 2022~2023