目录
【JeecgBoot-Vue3】零基础入门 - 首页
一、场景
- jeecg-boot: V 3.4.4（发布日期：2022-11-21）
- jeecgboot-vue3: V 3.4.4（发布日期：2022-11-21）
二、代码介绍
1. 后端
1.1 online代码生成器
1.2 数据库配置
1.3 代码生成配置
- jeecg_config.properties
#code_generate_project_path 代码生成后存放的路径
project_path=E:\\workspace\\jeecg-boot
#bussi_package[User defined] 生成的代码：父模块包名
bussi_package=org.jeecg.modules.demo
#default code path
#source_root_package=src
#webroot_package=WebRoot
#maven code path
source_root_package=src.main.java
webroot_package=src.main.webapp
#ftl resource url
templatepath=/jeecg/code-template
system_encoding=utf-8
#db Table id [User defined]
db_table_id=id
#db convert flag[true/false]
db_filed_convert=true
#page Search Field num [User defined]
page_search_filed_num=1
#page_filter_fields
page_filter_fields=create_time,create_by,update_time,update_by
exclude_table=act_,ext_act_,design_,onl_,sys_,qrtz_
- bussi_packag
三、单表CRUD
Step 1：新增表
- admin登录 >进入主页面,选择菜单> 低代码开发>online表单开发 > 点击新增
Step 2：填写 表名 > 表描述，其它默认
Step 3：新增字段 > 数据库属性
- 默认字段：1-6
- 新增字段：7-11，可修改字段类型，长度，允许空等
Step 4：新增字段 > 页面属性
- 作用：设置前端页面组件
- 是否查询（后面章节详细介绍）
Step 5：新增字段 > 校验字段
- 作用：下拉框中列表值
- 字典code查询：系统管理 > 数据字典 > 搜索“性别” >查看字典编号"sex"
Step 6：保存，并同步数据库
- 作用：数据库生成对应表
Step 7：数据库中查看生成的表
Step 8：代码生成
- 作用:生成前后端所有代码,默认VUE3
Step 9：查看生成代码
Step 10：前端代码迁移
- vue3:迁移到前端文件夹views下 src/views/test/one
- 注意：这里路径对应 Step 12: 新增菜单 > 前端组件 设置 test/one/ScoreRangeList
Step 11-1：新增菜单（sql 版本-推荐）
- Step 1：添加菜单到admin用户下
运行生成的脚本
- Step 2：菜单分配到admin下（手动）
系统管理 > 角色管理 > admin的操作中点击 授权 > 选择菜单后保存
Step 11-2：新增菜单（手动版）
- Step 1：添加菜单
系统管理 > 菜单管理 > 添加菜单
- Step 2：菜单分配到admin下（手动）同 Step 11-1
Step 12：重新启动前后端，并刷新admin登录页面
