新手运行若依项目|若依项目各部分介绍|并修改自己需要的页面

新手运行若依项目|若依项目各部分介绍|并修改自己需要的页面

前言

毕设框架采用若依，项目，项目源码：源码（前后不分离）
若依官网：官网

IEDA如何运行若依项目（前后端分离版）

参考：若依RuoYi使用IDEA配置详细教程 + 放行自己的静态文件（前后端不分离版）
建议采用前后端分离版本的若依项目，比较好修改。

下载项目

方法一、直接下载/通过Git下载

• 复制git下载的链接，到本地的文件夹中，打开Git Bash

• 输入 git clone 再粘贴刚才的复制链接
  
  这样就下载到本地了，再用IDEA打开。点击File-Open。
  

方法二、直接在IDEA里面克隆项目

• IDEA中打开版本控制
  
• 粘贴下载的克隆链接就直接下载到IDEA中了。
  

项目运行-后端

1.后端运行

• 导入数据库
  点击空白处，新建数据库——>右击点击运行SQL文件——>选择下载的文件中的两个SQL文件，作2次运行，即导入数据库成功。
  
• 修改后端配置
  1.application.yml
  A. 修改profile为自己指定的路径，用来存自己修改的地方。找不到就直接在新建一个文件夹，名字叫“uploadPath”。
  
  B.增加一个test: true，这个是为了后面调试用。
  
• application-druid.yml
  这个是为了修改数据库配置。这个也是根据实际修改，主要修改账号密码和数据库名称。注意：数据库名称与刚才数据库新建的名字要一样。
  
• 打开Redis
  如果没有安装Redis,先看这篇博客安装下Redis。redis安装图文详解
  找到你redis安装的目录， 找到redis-server.exe.双击打开。
  
  出现这个界面就启动成功。（端口号6379，与配置表一致）
  
  至此，后端就可以运行了。点击启动后端。
  

项目运行-前端

前提：node的版本要是等于或低于16的。
报错参考博客：手把手解决“npm、node不是内部或外部命令，也不是可运行的程序或批处理文件
解决报错10% building 2/5 modules 3 active …loader\lib\index.js!

用IDEA或者WebStorm打开。点击File——>Open。

• 输入’npm install’安装依赖。
  如果下载太慢就输入’npm install --registry=https://registry.npmmirror.com’
  
• 显示dev图标
  右键package.json选择show npm script。
  
  -加入vue插件
  file-setting-选择Plugin-vue.js-ok
  
  继续执行npm install --save vue-qr
  
• 安装完依赖之后启动服务。输入’npm run dev’,出现网址之后，直接跳转到浏览器，即可成功运行。
  

若依项目目录简介

ruo-yi common工具类

ruoyi-framework 框架核心

其他部分

ruo一admin后台服务

通用配置 application.yml

文件位置:

数据源配置 application-druid.yml

文件位置：

代码生成

前端修改

侧边栏菜单修改

• 第一步：修改sys_menu
  找了很久发现侧边栏的信息居然都在数据库里面。侧边栏的信息都封装在sys_menu表中。修改下面的表。
  
• 第二步：修改IDEA里面的数据库信息即修改sql文件
  
  发现侧边栏的菜单不能全部显示，应该是宽度不够。
  

侧边栏宽度修改

修改styles/variables.scss文件下的$base-sidebar-width参数值 。

默认头像替换

直接替换这个图片就行。注意新头像名字和原来的图片名字要一样。

侧边栏打开下一个上一个不自动收起

撰写时间：2024.1.1
原本的效果是打开下一个菜单栏上一个就收起来了，这样的：

修改以下代码： :unique-opened="true"改成 :unique-opened=“false”。

其中这一段代码的含义如下：

<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
    <!-- 创建一个带滚动条的容器，其样式由settings.sideTheme决定 -->

    <el-menu
        :default-active="activeMenu"
        <!-- 默认激活的菜单项由activeMenu决定 -->

        :collapse="isCollapse"
        <!-- 侧边栏是否折叠由isCollapse决定 -->

        :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
        <!-- 侧边栏的背景色由settings.sideTheme决定，如果是'dark'主题，则使用variables.menuBackground，否则使用variables.menuLightBackground -->

        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        <!-- 侧边栏的文字颜色由settings.sideTheme决定，如果是'dark'主题，则使用variables.menuColor，否则使用variables.menuLightColor -->

        :unique-opened="false"
        <!-- 是否只保持一个子菜单的展开 -->

        :active-text-color="settings.theme"
        <!-- 激活菜单的文字颜色由settings.theme决定 -->

        :collapse-transition="false"
        <!-- 是否开启折叠动画 -->

        mode="vertical"
        <!-- 菜单类型为垂直模式 -->
    >
        <sidebar-item
            v-for="(route, index) in sidebarRouters"
            <!-- 遍历sidebarRouters数组，为每一个路由创建一个菜单项 -->

            :key="route.path  + index"
            <!-- 菜单项的key为路由的路径加上索引 -->

            :item="route"
            <!-- 菜单项的数据由路由决定 -->

            :base-path="route.path"
            <!-- 菜单项的基础路径由路由的路径决定 -->
        />
    </el-menu>
</el-scrollbar>

修改完成之后如下图所示：

未完待续。。。
新年快乐呀🥰💫🙌🙌🙌🙌🙌🙌

---