网站建设的公司如何寻找客户,电子商务网站建设论文总结,苏州建设网站教程,wordpress娱乐资源网目录
schema2code有两种方式
label属性
component属性
group属性
应用 DB Schema里有大量的信息#xff0c;其实有了这些信息#xff0c;前端将无需自己开发表单维护界面#xff0c;uniCloud可以自动生成新增、修改、列表、详情的前端页面#xff0c;以及admin端的列…目录
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-formsuni-groupuni-forms-item label姓名input placeholder请输入姓名 classinput :hiddenfalse :readonlyfalse :disabledfalse //uni-forms-itemuni-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
