一、源码下载
二、技术架构
后端
- IDE建议: IDEA (必须安装lombok插件 )
- 语言:Java 8+ (支持17)
- 依赖管理:Maven
- 基础框架:Spring Boot 2.7.18
- 微服务框架: Spring Cloud Alibaba 2021.0.1.0
- 持久层框架:MybatisPlus 3.5.3.2
- 报表工具: JimuReport 1.7.6
- 安全框架:Apache Shiro 1.12.0,Jwt 3.11.0
- 微服务技术栈:Spring Cloud Alibaba、Nacos、Gateway、Sentinel、Skywalking
- 数据库连接池:阿里巴巴Druid 1.1.22
- 日志打印:logback
- 缓存:Redis
- 其他:autopoi, fastjson,poi,Swagger-ui,quartz, lombok(简化代码)等。
- 默认数据库脚本:MySQL5.7+
- 其他数据库,需要自己转
前端
- 前端IDE建议:WebStorm、Vscode
- 采用 Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技术方案,包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能
- 最新技术栈:Vue3.0 + TypeScript + Vite5 + ant-design-vue4 + pinia + echarts + unocss + vxe-table + qiankun + es6
- 依赖管理:node、npm、pnpm
注:node需要20版本的,其他版本可能会导致运行报错
开发可能需要用到的软件以及环境:百度网盘 请输入提取码 (baidu.com)
三、IDEA启动项目
采用IDEA启动前后端项目
一、启动JAVA项目 jeecg-boot
1. 初始化数据库
要求 mysql5.7+
- 执行Sql脚本: jeecg-boot/db/jeecgboot-mysql-5.7.sql
- 脚本作用:会自动创建库
jeecg-boot
, 并初始化数据 。 - 启动本地redis
2. 安装Maven依赖
- 通过右侧父POM进行
install
(下载依赖和打包)
3. 修改配置文件
配置文件: jeecg-module-system/jeecg-system-start/src/main/resources/application-dev.yml
- 数据库配置
- redis配置
4. 启动项目
- 右键执行下面类,启动项目
jeecg-system-start/src/main/java/org/jeecg/JeecgSystemApplication.java
5. 访问接口文档
http://localhost:8080/jeecg-boot/doc.html
二、启动Vue3前端 jeecgboot-vue3
1. 下载前端依赖
执行命令pnpm i
或者双击 pinstall
或者使用yarn install
依赖安装成功提示
2. 配置后台接口
- 修改接口地址 .env.development(可不改)
# 跨域代理,您可以配置多个, 请注意没有换行符 VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]] #后台接口全路径地址(必填) VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot
3.启动前端项目
点击命令 dev
启动项目或者使用npm run dev进行启动
4.访问系统
通过 http://localhost:3100
访问前端项目
默认账号密码: admin/123456
注:前端也可采用vscode进行启动看个人喜好。
四、简单的表单代码生成
1.在jeecgboot低代码平台的online表单开发功能处选择新增表单
2.输入参数并且添加属性
3.在页面属性这里将处理状态的控件类型选择为下拉框
4.在校验字段这为处理状态配置含有对应的下拉框内容的表单随后保存
5.勾选表单同步数据库并且生成代码
6.选择生成的代码位置,设置好表名,实体类名,跟包名。代码生成位置需要自己能够找到
五、生成代码放入前后端
1.代码文件夹讲解
根据生成代码的位置找到你设置好的包名,我这里是jeecg_boot_erp,打开它
其中vue3是前端代码,uniapp是小程序代码,其余的为后端代码,其中vue3内存放着表sql语句
2.后端代码放入
后端代码路径:
jeecgboootmuster\jeecg-boot\jeecg-module-demo\src\main\java\org\jeecg\modules\demo\
在这个路径新建文件夹(我这为willdo)存放后端代码,将前面文件夹中的后端代码全部copy到这个文件夹中
3.前端代码放入
代码路径:src\views\
在views下新建文件夹willdo,将前面vue3文件夹中的内容全部copy进来
注:这里的文件夹不能随意取名,需要打开生成的sql语句看要求
4.重新启动前后端
六、菜单管理与授权
1.菜单配置
重新启动项目后进入到系统管理中的菜单管理选择新增菜单
选择相关配置可以按个人喜好
其中的访问路径是需要跟你后端controller中的主路径一致
注:路径最好为"/"不要为"\"可能会导致报错
前端组件这是要找到你前端创建的文件夹中带有xxxList.vue的文件的相对路径,需要删除掉在你创建的文件夹前边的文件参数
例如我的相对路径为:src\views\willdo\AgencyList.vue
前端组件应该填入为:willdo/AgencyList
2.授权
保存好后进入角色管理菜单,找到管理员进行授权
将你创建的菜单全部勾上(我这里是代办列表),点保存,然后刷新就可以了。
七、需求测试
1.完成一个小功能,自定义一个代办列表:标题,内容,开始时间,结束时间,处理人,处理状态(下拉选项:0-未处理;1-已处理;2-作废)。
对列表的内容进行增删查改(其实就是平台的代码导出功能生成的代码功能),重点要求:在新增数据的时候,”标题“是由后台返回的系统时间,这就需要自定义接口去获取内容。日期需要前后端同时做校验,结束日期不能小于开始日期。(法本农商银行笔试题)
2.现有一张表,zhrj_scada_event(告警事件表)。表结构如下所示:
表1:告警事件表(zhrj_scada_event)
该表记录了一段时间内终端设备(RTU)及其通道的投入(在线)、退出(离线)状态数据。
需要实现的功能:
完成表单的在线创建,生成代码进行简单的增删改查。