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.项目启动

1. 后端启动：启动redis,启动idea,导入后端项目，项目编译后，点击ruoyi-admin 子工程中的 src/main/java/com/ruoyi/RuoYiApplication.java，右键run RuoYiApplication.main() 启动项目

前端启动：启动vscode，导入前端项目，启动终端窗口

npm install   -- 项目编译  安装所需要的的依赖包    仅需要运行一次 不需要每次都执行
npm run dev   -- 项目启动命令

 

4.代码生成器使用

1. 数据库手动建一张表（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 - 博客园