在使用之前确保前端后端都已正常运行,可以查看VOL框架学习(一)从零开始搭建项目

(一)首先是生成Vue页面

1、使用超级管理员账户登录网站【用户名:admin;密码:123456】

 2、点击菜单栏中的【代码在线生成器】→【Vue+后台代码生成】,再点击【新建】

 弹出下面的窗口,新建配置信息,首先创建目录

【父级ID为0相当于创建目录,其他空随意填写】

点击【+确定】之后就会生成一个一级目录【实时信息表】,主键ID为81(记住!后面要用)

3、然后再次点击新建,创建目录下的一个页面,记住实际表名,此处为Sys_realData1

【此处父级ID为前面已经新建的目录主键ID号】

 点击【+确定】后则生成在上次创建的【实时信息表】下的一个页面,即【信息表1】

4、在数据库中创建相应的表,和实际表名一致

此处我用的是SQL Server数据库,新建表Sys_realData1

 5、返回网页点击【同步表结构】即可看到对应的表配置信息,可以对列信息进行修改

 6、填写VUE路径,此路径为你前端启动的vue项目目录下src/views

填绝对路径,我的是 D:/RDY/VOL/Vue.NetCore/Vol.Vue3版本/src/views

 填写排序字段,需要自增类型的,此处填id

7、然后依次点击【生成Model】和【生成Vue页面】,即可生成相应的Vue页面

(二) 其次是把生成的菜单目录和页面放到页面里,即将配置好的页面移出来

 

1、选择【系统】→【菜单设置】,点击【新建】,生成一级目录 

父级ID填0,菜单名称自定义,视图/表名填.,Url不填,排序号随意(排序号越高越靠前),点击【保存】, 新的一级目录则出现在左侧

2、点击【添加子级】,然后填写信息,权限按钮可自定义勾选, 点击【保存】,即生成子级目录

(此处的父级ID为菜单栏对应的 ID 号,表名就是数据库对应表的表名,Url 是项目路径下 src/router/viewGrid.js里面的path路径

刷新网页,则新目录以及子级目录就出现在了菜单列表中,页面表格中的列即为数据库中编辑的列,可执行操作是添加页面时候选中的权限按钮。


原创不易,转载务必注明出处。

Logo

前往低代码交流专区

更多推荐