若依（前后端分离版）

企业老师讲解

什么是若依？

开源项目，学习开源项目的目标：

1.用，减少自己工作量

2.学习优秀的开源项目底层的编程思想，设计思路，提高自己的编程能力

官网：https://www.ruoyi.vip/

基础：Spring Boot + Vue

环境要求：

JDK 1.8+
MySQL
Redis
Maven
Vue

使用若依

使用开源项目的步骤：

下载并运行
看懂业务流程
进行二次开发

下载：16：45
配置数据库MySQL，Redis

本地执行SQL脚本

在工程中配置数据库（20：20）

Redis配置（21:00）

启动前端：

安装依赖npm install
启动 npm run dev

若依结构

前端结构

需要关注api和view文件夹

api负责对后台端进行访问

view负责页面显示内容

创建表

用sql语句在Datatrip执行

模块建立

右键建立模块
Maven Archetype
Archetype为maven-archetypes-quickstart
名称为ruoyi-XXX
删除和，刷新
将中的内容删除
在自己的模块中，引入ruoyi-common工具类

<dependency>
	<groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-common</artifactId>
</dependency>

要删除自己模块时，要在ruoyi-master里的pom.xml中删除royi-XXX
引入lombok模块

<dependency>
	<groupId>org.projectlombol</groupId>
    <artifactId>lombok</artifactId>
</dependency>

在ruoyi-admin中添加自己的模块（在pom.xml中)

<dependency>
	<groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-strawberry</artifactId>
    <version>3.8.7</version>
</dependency>

在自己的模块中删除根包，test包也删除
启动服务端和客户端
在java下创建包，包名com.ruoyi.strawberry

在图形化界面写代码（7:33）

预览，将Sql先去执行
然后下载生成的代码

更改服务器端

生成代码后，将这三个文件夹放入com.ruoyi.strawberry

打开domin文件夹下的Pests

删除pest中的getset方法

引入三个lombok的方法，让其自己生成getset方法（前提要确保lombok依赖项没有问题）

1
2
3

@Data
@AllArgsConstructor
@NoArgsConstructor

更改为以下图示：

出现的报错：

解决方法：

导入另一个文件

在ruiyi-admin下的controller建立根包，位置如下：

别以为这就结束了，还有一个文件要拷贝

回退到main文件夹下，打开resource，拷贝下面的mapper：

直接将resources整个拷进以下位置，并标记为资源文件：

更改客户端

拷贝以下两个包

直接粘贴到：

效果如下：

可以将删除改为逻辑删除

将XXXMapper.xml文件中的delete改为update

黑马程序员（AI+若依）

02入门案例

准备SQL并导入数据库
配置代码生成信息
下载代码并导入项目

03功能详解

系统管理
- 权限控制，数据字典，其他功能
系统监控
系统工具

系统管理

权限控制

RBAC基于角色的访问控制，通过角色来分配和管理用户的菜单权限。

步骤：

创建菜单
创建角色，并分配权限
创建用户，并关联角色

数据字典

字典类型表
字典数据表

步骤：

添加字典类型和数据
修改代码生成信息
下载代码导入前端

其他功能

参数设置
通知公告
日志管理

系统监控

监控相关

若依提供了一些强大的监控工具，能够帮助开发者和运维快速了解应用程序的性能状态

定时任务

若依为定时任务功能提供了方便友好的web界面，实现动态管理任务

案例：定时任务

每间隔5秒，控制台输出系统时间

创建任务类

在以下目录下：

MyTask类：

package com.ruoyi.quartz.task;

import org.springframework.stereotype.Component;

import java.util.Date;
//一定要添加Component容器进行对象管理
@Component
public class MyTask {
    public void showTime()
    {
        System.out.println("定时任务开始执行"+new Date());
    }
}

添加任务规则
启动任务

实现效果如下：

系统工具

表单构建

制作表单并导出
复制前端工程
创建动态菜单

代码生成
系统接口

去若依化

新增自定义主题风格

图标文件

文件位置：src/assets/images/blue.svg
复制同级的 light.svg 修改名称即可，将两个颜色替换为：#409eff

<g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
        <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
            <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
                <mask id="mask-3" fill="#409eff">
                    <use xlink:href="#path-2"></use>
                </mask>
                <g id="Rectangle-18">
                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
                    <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
                </g>
                <rect id="Rectangle-11" fill="#409eff" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
                <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
            </g>
        </g>
    </g>
</g>

Settings目录下

在Setting目录下的index.vue中

新增一个主题风格选项，主要注意的是handleTheme里面的传参（后面会用到）和img的src图片，例如实例中的blue.svg

<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-blue')">
  <img src="@/assets/images/blue.svg" alt="dark">
  <div v-if="sideTheme === 'theme-blue'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
    <i aria-label="图标: check" class="anticon anticon-check">
      <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
        <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
      </svg>
    </i>
  </div>
</div>

variables.scss

位置

这里的变量名可以自定义，但还是要注意和后面的一一对应

//新增样式名
$base-menu-blue-background:#0043B2;
$blue-sub-menu-background:#003793;
$blue-sub-menu-hover:#023281;
//新增导出
menuBlueBackground:$base-menu-blue-background;

位置同上

//新增样式，大概在107行
    & .theme-blue .nest-menu .el-submenu>.el-submenu__title,
    & .theme-blue .el-submenu .el-menu-item {
      background-color: $blue-sub-menu-background !important;

      &:hover {
        background-color: $blue-sub-menu-hover !important;
      }
    }

Logo.vue

路径

ruoyi-ui/src/layout/components/Sidebar/Logo.vue

主要修改几个动态的style

<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground }">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 v-else class="sidebar-title" :style="{color:(sideTheme === 'theme-dark' || sideTheme === 'theme-blue') ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title" :style="{ color: (sideTheme === 'theme-dark' || sideTheme === 'theme-blue') ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
      </router-link>
    </transition>
  </div>
</template>

Siderbar目录下的index.vue

具体的颜色看自己的要求哈

//主要修改el-menu的background-color和text-color两个属性
<el-menu
  :default-active="activeMenu"
  :collapse="isCollapse"
  :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : settings.sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground"
  :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : settings.sideTheme === 'theme-blue' ? variables.menuColor : variables.menuLightColor"
  :unique-opened="true"
  :active-text-color="settings.theme"
  :collapse-transition="false"
  mode="vertical"
>
  <sidebar-item
    v-for="(route, index) in sidebarRouters"
    :key="route.path  + index"
    :item="route"
    :base-path="route.path"
  />
</el-menu>

界面样式更改

参考链接：若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】_若依首页样式修改-CSDN博客

网页logo修改

参考链接：若依(ruoyi)管理系统标题和logo修改_若依管理系统上面的标题怎么改-CSDN博客

修改文件名

参考链接：基础篇-17.二次开发-新建业务模块_哔哩哔哩_bilibili

修改器链接：RuoYi-MT 发行版 - Gitee.com

去除源码&文档

参考视频：基础篇-21.二次开发-页面调整_哔哩哔哩_bilibili

若依(前后端分离版)