Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>AmisCrudNew to Visual Studio Code? Get it now.
AmisCrud

AmisCrud

JimmyTsai

|
50 installs
| (0) | Free
amis crud 开发助手
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

概述

针对Amis的Crud组件在操作中,动辄几千行代码的情况下编辑和修改过程有诸多不便,设计本插件。

Amis Curd组件使用详见 https://aisuda.bce.baidu.com/amis/zh-CN/docs/index

本扩展数据库操作方面的内容使用的数据库为MySql或MariaDB,数据库连接的依赖库为mysql2 (3.2.0)

参数设置

使用前,进入AmisCrud扩展的设置界面,有两个参数

1、Data Url

这个是连接数据库的连接字符串,默认值为:mysql://root:123456@localhost:3306/admindata

其中mysql是当前连接的数据库

root是当前数据库连接的用户名

123456是当前数据库连接的用户密码

localhost:3306是当前数据库服务器及其端口

admindata是当前连接的默认数据库

以上参数请根据实际使用情况修改

2、Grid Max Rows

这个是参数用于格式化新增和修改界面的FormItem内容时默认的每列行数,默认为12

【Javascript语言】

1、读取表或视图,生成Crud组件

表和视图名的来源

表名称

本扩展按照以下顺序获取字符串作为表名称读取数据库

  1. 获取粘贴板里面的文字内容,查询是否有存在的表,如果有则以粘贴板里面的文字内容为表名称

  2. 如果1查找不到,就用选中的文字内容是否有存在的表:其他同1

  3. 如果2查找不到,就用当前文件名是否有存在的表:其他同1

    以上三个地方的文字内容都没有对应的表,则操作失败,后续终止。

视图名称

确定表名称之后,用表名称+view为视图名称,比如userview,如果数据库中有对应的视图(view)则确定视图名称,否则视图名称为空

Crud的表格数据

Crud的表格数据通过Crud的Api查询,Api格式如下:

/api/general/find?tableName=xxxView...

上面Api的tableName传递当前要查询的表或视图的名称到后端Api,其中xxx为当前要查询的表名称,xxxview为当前要查询的视图名称。如果当前数据库没有和表名称相对应的视图名称,则此处的tableName参数为表的名称。

Crud的columns的内容根据数据库中读取到的表或视图的字段信息数据生成

Crud的增加和修改

本扩展根据获取到的表名称(不论是否存在视图)读取数据库中的字段信息,根据字段信息确定生成的FormItem类型之后生成所有新增和修改需要的FormItem集合。

definitions

因为新增和修改部分的界面高度的相似,本扩展使用生definitions的方式生成新增和修改功能需要用到的FormItem集合。在新增和修改界面的Form组件中,使用ref的方式引用新增和修改需要的组件集合。

关于definitions的使用详见:https://aisuda.bce.baidu.com/amis/zh-CN/docs/types/definitions

grid

在新增和修改的窗口中,使用grid组件组织FormItem集合。生成程序根据表中的字段数量自动分配FormItem到grid的columns,分配的时候,如果字段数量超过12(读取配置参数中的grid max rows)个,则新增一个grid的columns内容,Amis渲染的时候会根据grid组件的columns设置列,也就是说默认情况下字段信息超过12个,就会分成两列,字段超过24个的时候以此类推。并且生成程序判断如果字段信息超过12个,则新增或修改界面的对话框设置为全屏(size: "full")。

Crud的详情

Crud的详情展示的是表格中的所有列,并使用static-text组件显示。

2、同化表格->详情操作

增加或删除Crud组件的columns里面的字段内容之后,需要确保详情界面上面显示出来的内容和表格里面的内容一致,手动操作容易出错,本扩展提供同化操作,程序读取当前文档中(不论是否已经保存)Crud组件的columns数组,重新生成详情界面的所有内容。

3、格式所有表单项

在修改和调整Crud组件的时候,经常需要增加或删除“新增”或“修改”界面里面的FormItem,这种调整会导致grid里面每列的组件数量不一致,从而导致渲染后界面的上面的内容不能很好的对齐。手动调整比较麻烦,本扩展提供格式操作,格式化所有表单项的时候,会读取当前文档中(无论是否保存)所有的FormItem,然后重新按照设置参数里面的Grid Max Rows里面的数值(默认为12)把组件依次放入到gird的columns数组里面,从而实现重新对齐的操作效果。

4、读取字段信息生成表格列

5、读取字段信息生成编辑器(FormItem)

6、折叠操作

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft