若依框架（boot-vue版本）使用说明

Z时代
2024-01-10
分类：综合

vue

若依框架（boot-vue版本）使用说明

1.前置工具安装

jdk 1.8

maven (后端项目管理工具)

redis （缓存数据库）

mysql

MySQLWorkbench (mysql可视化工具)

idea (后端开发工具)

nodejs （js前端开发平台，本文主要用到包管理工具 npm）

vscode (前端开发工具)

git (版本管理工具)

TortoiseGit (git可视化工具)

2.代码地址

官网代码地址：https://gitee.com/y_project/RuoYi-Vue.git

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;

进入系统，点击系统工具->代码生成->导入，找到自己新建表，勾选、确定

选中新增记录，点击编辑按钮

编辑效果

补全字段描述（页面显示字段中文名）、选择性勾选【插入】【编辑】【列表】【查询】

插入：勾选后，新增后，表单上会出现该字段的新增项，如id，后台如果随机生成，这里可以不勾选

编辑：勾选后，编辑时候展示对应字段项，不勾选不展示

列表：查询后页面展示字段，不勾选不展示

查询：勾选后页面呈现对应查询条件，后面查询方式可选择 = 、！=、like、 > 、<等

显示类型：可选择文本框、下拉选、日期组件、富文本框等

字典类型：关联字典值，比如性别等，可以选择

6. 完善基本信息

完善生成信息，点击提交进行信息保存

勾选记录，点击生成按钮，会自动生成代码压缩包

9 代码压缩包目录结构展示

将后端代码复制到对应后端项目目录中
将压缩包中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));
}