lecen:一个更好的开源可视化系统搭建项目--模块、路由、字典、文件--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人

20 阅读7分钟

模块配置

一个系统可以具有多个模块,每个模块又可以有多个应用,每个应用都挂着相应的功能菜单

他们之间的关系都是相对来说,可以把父级想象成是分类,子级想象成是子集

在这里我们可以管理我们的模块,以及它们下面的应用,可以叫做子模块或者子应用

模块配置新增

点击加号图标可以打开新增弹窗

新增模块

输入好信息之后点击新增

新增模块信息

这样就完成了一个模块的新增

完成模块新增

点击模块名称可以修改模块信息

点击模块名称

点击当前模块右侧的加号图标可以新增应用,也可以想象成是新增子模块

新增应用图标

填写好应用信息之后,点击新增按钮

新增应用

这样会议管理模块下面就有了一个会议室管理的应用

会议管理

模块默认是折叠的,并且下面的应用会呈现为缩略图的形式展示在头部

点击缩略图或者行内任意空白的地方,即可展开该模块,查看下面所有的应用

每个应用新建的时候都有一个默认的图标,可以点击对应应用修改该图标

会议管理展开

点击对应应用,可以编辑更详细的信息

编辑应用

应用的编辑包含了多个可操作项:删除应用、设置应用名称、设置应用图标、设置应用备注、给应用配置路由

基本都是见文知意,下面只针对其中几项作介绍

  1. 删除应用

如果该应用下已经配置了路由,那么需要先清空路由才可以删除

  1. 图标

可以是手动上传的本地图片,也可以从系统中选取

系统选取是指文件配置中的图片,需要填写所在的路径,关于文件配置 详见

鼠标悬浮在 系统选取 文字上,然后在出现的悬浮框里面输入图片的路径,比如 images/logo.png

应用图标

然后点击任意空白处即可完成设置

设置应用图标

点击下面的绿色对勾按钮,能够看到变化

应用图标预览

  1. 配置路由

配置应用具备的路由地址,或者也可以叫做应用具有的菜单

菜单具有父子级关系,应用无法直接配置最子级的菜单,只能配置父级菜单

绑定父级菜单之后,那么该应用就具有了所有的子级菜单,关于菜单配置 详见

应用配置菜单

配置好路由之后,即可在下面展示

配置路由

模块与应用配置好之后是为身份服务的,关于与身份的绑定 详见

路由配置

也可以理解为菜单管理,所有的页面都可以发布为菜单,

新增路由

点击表头上面的加号图标,即可新增一条根路由

添加路由

输入对应路由的路径和该路由跳转的页面,如果作为父级路由,可以不用绑定页面

路径可直接自定义输入,点击跳转页面输入框会弹出一个待绑定页面的列表页

绑定页面列表

直接点击搜索按钮,会加载出所有的页面,也可以通过关键词来搜索,目前我们只有两个页面

待绑定页面

我们选择歌单展示页面,就完成了路由和页面的绑定

无论是输入路径还是选择跳转页面,只要数据变化即可自动保存记录

创建路由

这时再点开跳转页面的列表,会将当前已经绑定的页面更换颜色显示

已经绑定页面

如果一个路由是父路由,下面包含一个或多个子级路由,那么创建完根路由之后,可以点击该路由右面的加号图标

比如我们创建一个会议管理父路由,下面包含会议室管理子路由

创建子路由

同样,如果不想要该路由,可以点击删除图标,如果一个路由下面有子路由,那么需要删除子路由之后才能删除本路由

如果一个路由是父路由,那么页面对应的输入框就能够自定义输入

父路由

这样就能够自定义父路由的名称

虽然根路由可以绑定页面,但是请不要这样做,无论任何菜单的配置都要设置父菜单,然后使用子菜单绑定页面

我们重新设置一下我们的路由信息

歌曲路由

路由配置好之后是为应用服务的,关于与应用的绑定 详见

字典配置

如果系统中有一些常用的选项,那么可以把它们维护成字典

字典本身来说很简单,包含字典分类和具体的字典项

字典配置

点击空白处的加号图标,出现新增字典的弹窗,根据提示字典名称和字典编码空格分开

比如我们新增一个性别的字典

新增字典

点击确定即可新增该字典分类

性别字典

我们点击该字典

编辑字典

出现了字典的编辑面板,然后就可以配置字典项

新增字典项

在输入框中输入好字典项名称之后,敲击回车即可生成,会自动在下面的列表中展示

创建好多个字典项,点击完成,这样就创建好了一个字典的配置

字典项

这时文字为绿色,表示是新增的选项,并且鼠标放在字典项行上面,会出现操作按钮

操作字典项

其中鼠标的图标变成可拖动形状,表示能够拖拽上下排序

减号图标表示删除该字典项,编辑图标表示可以关联其他字典

比如我们创建一个爱好的字典项

爱好字典

这时再编辑性别字典,对字典项男进行编辑,最右边就会出现所有字典项,中间是已选择的关联项

字典关联

选中完之后点击保存按钮,同样也可以对字典项女进行编辑,然后选择相应的关联

字典项关联

每次选择关联项完成之后都要点击一下保存按钮,对字典项的名称和描述的修改会自动保存

文件配置

一些图片,模板文件以及图标 icon 文件可上传到系统的静态目录中。

找到系统左侧菜单栏的【系统配置】->【文件配置】

操作方式与 windows 操作系统的目录操作方式一样。

文件配置

新建目录

在页面空白处点击【鼠标右键】出现菜单:

新建文件夹

点击其中的【新建】,即出现 新建文件夹

输入文件名

在输入框中输入文件夹名称 回车 即可。

文件重命名、删除

在文件或文件夹上右键可以操作【重命名】和【删除】

文件重命名

切换目录

点击文件夹即进入该文件夹,如下图所示新建一个image文件夹并单击后进入image文件夹中。也可在当前文件夹中点击左上角的【返回】,返回上一层。

返回上一级

顶部的路径栏用于快速定位路径,可以点击跳转到相应目录下。点击最左端的house为切换到根目录。

文件路径

文件上传

将我们的文件拖拽入空白区域内即可将文件上传到相应目录下,如图拖入一个小图片后完成自动上传。注:支持单文件或者同时选择多文件进行上传

上传文件

搭建页面时使用静态目录中的文件

在开发过程中如果需要使用到之前静态目录中上传的文件,举例来说比如上面在根目录有张 示例.png 的图片,直接在图片 src 属性上写 示例.png 就可以应用该图片,如果图片在子目录中需要明路径如 path1/image/xxx.jpg ,文件引用必须加文件后缀。

【项目体验】

系统管理端地址www.lecen.top/manage

系统用户端地址www.liudaxianer.com/user

系统文档地址www.lnsstyp.com/web