若依框架(boot-vue版本)使用说明

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

若依框架(boot-vue版本)使用说明_第1张图片

前端启动:启动vscode,导入前端项目,启动终端窗口

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

 

若依框架(boot-vue版本)使用说明_第2张图片

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. 选中新增记录,点击编辑按钮

若依框架(boot-vue版本)使用说明_第3张图片

4. 编辑效果

若依框架(boot-vue版本)使用说明_第4张图片

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

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

编辑:勾选后,编辑时候展示对应字段项,不勾选不展示

列表:查询后页面展示字段,不勾选不展示

查询:勾选后页面呈现对应查询条件,后面查询方式可选择 = 、!=、like、 > 、<等

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

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

若依框架(boot-vue版本)使用说明_第5张图片

 6.完善基本信息

若依框架(boot-vue版本)使用说明_第6张图片

 7. 完善生成信息,点击提交 进行信息保存

若依框架(boot-vue版本)使用说明_第7张图片

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

若依框架(boot-vue版本)使用说明_第8张图片

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

 

若依框架(boot-vue版本)使用说明_第9张图片

10. 将后端代码复制到对应后端项目目录中
将压缩包中main\java\com\ruoyi\nesc 所有文件复制到 ruoyi-admin子项目的 src/main/java/com/ruoyi/nesc 文件夹中

若依框架(boot-vue版本)使用说明_第10张图片

 

在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文件夹中

若依框架(boot-vue版本)使用说明_第11张图片

 11. 将前端端代码复制到对应前端项目目录中

将vue\api\nesc 中所有文件 复制到src/api/nesc中

vue\views\nesc 中所有文件 复制到src/views/nesc中

若依框架(boot-vue版本)使用说明_第12张图片

12.  执行sql脚本,添加菜单数据

13. 重启前后端系统,完毕

 

转载自:若依框架(boot-vue版本)使用说明 - 王小溪_cc - 博客园

 

你可能感兴趣的:(知识点,vue.js)