永远在时光中充满激情
数据准备
首先创建一张mysql表 名为tb_test
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for tb_test
-- ----------------------------
DROP TABLE IF EXISTS `tb_test`;
CREATE TABLE `tb_test` (
`id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
`bh` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`lever` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`bm` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`jl` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`ssss` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`hyfl` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`sfsm` int(1) NULL DEFAULT NULL,
`sjgs` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
`hzrq` date NULL DEFAULT NULL,
`create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of tb_test
-- ----------------------------
INSERT INTO `tb_test` VALUES ('1', '吴振元\r\nt', '吴振元\r\nccc', '三级客户\r\n三级客户\r\n三级客户\r\n三级客户\r\n三级客户\r\n', '代理商', 't', '123', '213', 123, '21', NULL, NULL);
INSERT INTO `tb_test` VALUES ('1242756086864371713', '123213213', '尹凯', '第一级别客户', '编码', '尹凯', '广东省-深圳市', '行业分类', 1, '中润(深圳)物联网科技有限公司', '2020-03-25', NULL);
SET FOREIGN_KEY_CHECKS = 1;
image.png
注意tb_test.create_time是必要的字段,如果无此字段则查询报错;id需要为字符类型,因为默认id是使用UUID的
代码生成
使用Jeecg-Boot 的代码生成器按数据库表生成代码。先找到这个配置文件 jeecg_database.properties,修改下自己mysql的地址、账号、密码、库名
image.png
再找到这个类:org.jeecg.JeecgOneGUI。 执行之,填下表格实体信息。
image.png
点击生成按钮,如下已经提示生成成功!
image.png
那么默认生成的代码在哪里呢?
看看这个配置文件:jeecg_config.properties,这里规定了生成文件的路径
image.png
那么我们打开这个文件夹看看,嗯很好代码都在这了
image.png
先看后端工程
那么现在我们把这个代码挪到我们工程的包下:
先是后端,我们从com包这里开始吧
image.png
将这个com文件夹整个复制,然后进入idea,粘贴到如图所示的包下。那么我们的com包会和这个com包合并了
image.png
代码放到这里后,可见如下的类。即是刚刚咱们生成的类
image.png
好了,现在可以启动后端的springboot工程了
再来看前端工程
将生成的vue代码移动到前端工程的目录之下
首先我们需要将生成的前端代码放到前端工程里,我们先在前端工程中src/views目录下创建一个文件夹作为TbTest的模块目录,命名为tbtest;
image.png
然后将前端代码移到此目录下即可,如下图标识就是前端代码
image.png
移动之后如图
image.png
移动代码完毕后yarn run serve 重启前端工程
再来看如何新建一个一级目录
如果想要在前端页面中展示出来,那么接下来我们就需要配置一下菜单,先来配置一个一级的菜单吧。这个菜单仅仅当做二级菜单的目录。
如下,点击新增
image.png
右侧弹出窗,配置如图所示
image.png创建一级菜单时注意 菜单路径
/layouts/tbtest
必须以/layouts/开头,后面跟着的就是上面创建的文件夹tbtest;
前端组件tbtest/TbTestList
必须以上面创建的文件夹tbtest/开头,后面跟着的即是TbTestList.vue的前缀名
那么创建完毕刷新页面后,看看咱们刚刚配置的一级菜单出来没。是的无论刷新多少次还是不会出来。即是重启前后也是一样
image.png
事实上我们还需要一个步骤,那就是需要配置权限
咱么现在登录的是admin账号,它是管理员的身份。那么我们需要对管理员进行授权,如下
勾上这个复选框!对管理员这个角色授权。点击保存并关闭后
image.png
刷新页面,如图自己配置的一级菜单就出来了。点击它,已经将数据展示出来了
image.png如何新建一个二级目录
点击这个刚刚创建的一级目录最右边的更多按钮,选择添加子菜单
image.png
image.png注意
菜单路径
填写 /tbtest/TbTestList ; tbtest则是之前创建的文件夹名
前端组件
填写 tbtest/TbTestList ; 只是比菜单路径
少一个斜杆
当然添加二级菜单后也得授权~ 勾上这个点击保存
image.png
刷新页面,好了我们的二级菜单出来了!
image.png值得注意的是当我们创建了二级菜单授权后,点击一级菜单已经不会跳转到数据列表页面了
网友评论