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.jsonpage_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.rhkb.cn/news/254951.html

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

相关文章

springboot173疫苗发布和接种预约系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

新版MQL语言程序设计:键盘快捷键交易的设计与实现

文章目录 一、什么是快捷键交易二、使用快捷键交易的好处三、键盘快捷键交易程序设计思路四、键盘快捷键交易程序具体实现1.界面设计2.键盘交易事件机制的代码实现 一、什么是快捷键交易 操盘中按快捷键交易是指在股票或期货交易中&#xff0c;通过使用快捷键来进行交易操作的…

【web前端开发】HTML及CSS简单页面布局练习

案例一 网页课程 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-wi…

在虚拟机上完成Centos安装

Linux学习和使用 前言如何安装Centos初始化操作 使用VMware备份操作系统快照克隆 内容总结参考链接 本人介绍:2023年全国大学生数学建模竞赛国家二等奖,2022年蓝桥杯省二等奖,这里是一个和你一起不断努力,不断前进的程序猿一枚 前言 简单介绍一下本片文章将会讲到的内容:本章节…

【ArcGIS微课1000例】0102:面状要素空洞填充

文章目录 一、实验描述二、实验数据三、实验步骤1. 手动补全空洞2. 批量补全空洞四、注意事项一、实验描述 在对地理数据进行编辑时,时常会遇到面数据中存在个别或大量的空洞,考虑实际情况中空洞的数量多少、分布情况,填充空洞区域可以采用逐个填充的方式,也可以采用快速大…

基于微信小程序的新生报到系统的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【教学类-47-01】UIBOT+IDM下载儿童古诗+修改文件名

背景需求&#xff1a; 去年12月&#xff0c;我去了其他幼儿园参观&#xff0c;这是一个传统文化德育教育特色的学校&#xff0c;在“古典集市”展示活动中&#xff0c;小班中班大班孩子共同现场念诵《元日》《静夜思》包含了演唱版本和儿歌念诵版本。 我马上也要当班主任了&a…

Python新春烟花盛宴

写在前面 哈喽小伙伴们&#xff0c;博主在这里提前祝大家新春快乐呀&#xff01;我用Python绽放了一场新春烟花盛宴&#xff0c;一起来看看吧&#xff01; 环境需求 python3.11.4及以上PyCharm Community Edition 2023.2.5pyinstaller6.2.0&#xff08;可选&#xff0c;这个库…

VS Code中主程序C文件引用了另一个.h头文件,编译时报错找不到函数

目录 一、问题描述二、问题原因三、解决方法四、扩展五、通过CMake进行配置 一、问题描述 VS Code中主程序C文件引用了另一个.h头文件&#xff0c;编译时报错找不到函数 主程序 main.c #include <stdio.h> #include "sumaa.h"int main(int, char**){printf(&q…

Blender_pmx导出fbx

Blender_pmx导出fbx 学无止境&#xff1f; 相关链接&#xff1a; Blender教程&#xff1a; Blender中文手册介绍 — Blender Manualhttps://docs.blender.org/manual/zh-hans/2.79/about/introduction.htmlhttps://www.blendercn.org/https://www.blendercn.org/Blender下载…

Tomcat 原理分析

1、Tomcat 的组成 如下图&#xff1a; Tomcat组成 Server&#xff1a; Tomcat 封装的、对外提供完整的、基于组件的 web 服务&#xff0c;包含 Connectors、Container 两个核心组件&#xff0c;以及多个功能组件&#xff0c;各个 Service 之间是独立的&#xff0c;但是共享 同…

【iOS ARKit】3D人体姿态估计实例

与2D人体姿态检测一样&#xff0c;在ARKit 中&#xff0c;我们不必关心底层的人体骨骼关节点检测算法&#xff0c;也不必自己去调用这些算法&#xff0c;在运行使用 ARBodyTrackingConfiguration 配置的 ARSession 之后&#xff0c;基于摄像头图像的3D人体姿态估计任务也会启动…

【51单片机】开发板和单片机的介绍(2)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

Flume安装部署

安装部署 安装包连接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1m0d5O3Q2eH14BpWsGGfbLw?pwd6666 &#xff08;1&#xff09;将apache-flume-1.10.1-bin.tar.gz上传到linux的/opt/software目录下 &#xff08;2&#xff09;解压apache-flume-1.10.1-bin.tar.gz…

HiveSQL——连续增长问题

注&#xff1a;参考文章&#xff1a; SQL连续增长问题--HQL面试题35_sql判断一个列是否连续增长-CSDN博客文章浏览阅读2.6k次&#xff0c;点赞6次&#xff0c;收藏30次。目录0 需求分析1 数据准备3 小结0 需求分析假设我们有一张订单表shop_order shop_id,order_id,order_time…

使用webstorm调试vue 2 项目

学习目标&#xff1a; 使用webstorm调试vue 2 项目 笔者环境&#xff1a; npm 6.14.12 webstorm 2023.1 vue 2 学习内容&#xff1a; 例如&#xff1a; 正常启动npm 项目 配置javaScruot dubug 配置你的项目地址就好 使用dubug运行你配置的调式页 问题 如果进入了js页无…

thinkphp数据批量提交(群发消息)

<form id="edit-form" class="form-horizontal" role="form" data-toggle<

【闲谈】初识深度学习

在过去的十年中&#xff0c;深度学习彻底改变了我们处理数据和解决复杂问题的方式。从图像识别到自然语言处理&#xff0c;再到游戏玩法&#xff0c;深度学习的应用广泛且深入。本文将探讨深度学习的基础知识、关键技术以及最新的研究进展&#xff0c;为读者提供一个全面的视角…

展示wandb的数据

import wandb import matplotlib.pyplot as plt# 初始化 wandb API api wandb.Api()# 假设您想要访问的项目名为 my_project&#xff0c;并且您的 wandb 用户名为 my_username project_name "aicolab/RWKV-5-Test"# 获取项目中的runs runs api.runs(project_name)…

【第二十三课】最小生成树:prime 和 kruskal 算法(acwing858,859 / c++代码 )

目录 前言 Prime算法--加点法 acwing-858 代码如下 一些解释 Kruskal算法--加边法 acwing-859 并查集与克鲁斯卡尔求最小生成树 代码如下 一些解释 前言 之前学最短路的时候&#xff0c;我们都是以有向图为基础的&#xff0c;当时我们提到如果是无向图&#xf…