1.前置工具安装
- jdk 1.8
- maven (后端项目管理工具)
- redis (缓存数据库)
- mysql
- MySQLWorkbench (mysql可视化工具)
- idea (后端开发工具)
- nodejs (js前端开发平台,本文主要用到包管理工具 npm)
- vscode (前端开发工具)
- git (版本管理工具)
- TortoiseGit (git可视化工具)
2.代码地址
官网代码地址:RuoYi-Vue: 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
3.项目启动
-
后端启动:启动redis,启动idea,导入后端项目,项目编译后,点击ruoyi-admin 子工程中的 src/main/java/com/ruoyi/RuoYiApplication.java,右键run RuoYiApplication.main() 启动项目
前端启动:启动vscode,导入前端项目,启动终端窗口
npm install -- 项目编译 安装所需要的的依赖包 仅需要运行一次 不需要每次都执行
npm run dev -- 项目启动命令
4.代码生成器使用
-
数据库手动建一张表(whl_demo01)
CREATE TABLE `ruoyi_vue`.`whl_demo01` ( `id` INT NOT NULL, `name` VARCHAR(45) NULL, `age` VARCHAR(45) NULL, `gender` VARCHAR(45) NULL, `company` VARCHAR(45) NULL, PRIMARY KEY (`id`)) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8 COLLATE = utf8_bin;
3. 选中新增记录,点击编辑按钮
4. 编辑效果
5.补全字段描述(页面显示字段中文名)、选择性勾选【插入】【编辑】【列表】【查询】
插入: 勾选后,新增后,表单上会出现该字段的新增项,如id,后台如果随机生成,这里可以不勾选
编辑:勾选后,编辑时候展示对应字段项,不勾选不展示
列表:查询后页面展示字段,不勾选不展示
查询:勾选后页面呈现对应查询条件,后面查询方式可选择 = 、!=、like、 > 、<等
显示类型:可选择 文本框、下拉选、日期组件、富文本框等
字典类型:关联字典值,比如性别等,可以选择
6.完善基本信息
7. 完善生成信息,点击提交 进行信息保存
8. 勾选记录,点击生成按钮,会自动生成代码压缩包
9. 代码压缩包目录结构展示
10. 将后端代码复制到对应后端项目目录中
将压缩包中main\java\com\ruoyi\nesc 所有文件复制到 ruoyi-admin子项目的 src/main/java/com/ruoyi/nesc 文件夹中
在controller 中找到 add方法 ,需要setId 目前,生成器没有生成id值
/**
* 新增whldemo01
*/
@PreAuthorize("@ss.hasPermi('nesc:demo01:add')")
@Log(title = "whldemo01", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody WhlDemo01 whlDemo01)
{
int id = new Random().nextInt(10000);
//数字类型
whlDemo01.setId((long)id);
//字符串类型
// whlDemo01.setId(UUID.randomUUID().toString());
return toAjax(whlDemo01Service.insertWhlDemo01(whlDemo01));
}
将压缩包中main\resources\mapper\nesc 所有文件复制到 ruoyi-admin子项目的resources/mapper/nesc文件夹中
11. 将前端端代码复制到对应前端项目目录中
将vue\api\nesc 中所有文件 复制到src/api/nesc中
vue\views\nesc 中所有文件 复制到src/views/nesc中
12. 执行sql脚本,添加菜单数据
13. 重启前后端系统,完毕
转载自:若依框架(boot-vue版本)使用说明 - 王小溪_cc - 博客园