基于RuoYi框架快速搭建自己的后台管理系统

RuoYi的介绍

        RuoYi是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。

Ruo的生态系统

  • RuoYi-fast:单应用的后台管理系统
  • RuoYi:多模块的后台管理系统,从RuoYi3.0开始,进行模块拆分,本文基于此来搭建自己的后台管理系统
  • RuoYi-Vue:Vue分离版本
  • RuoYi-Cloud:Cloud微服务版本
  • RuoYi的项目扩展

在线体验   

系统需求

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0

启动流程

        1.拉取项目到本地并在IDE工具中打开

                这里我选择的工具是IDEA,RuoYi后台管理系统版本是v4.7.1,RuoYi提供的使用手册使用的工具是eclipse,工具打开项目类似,你们可基于自己的情况选择。

        IDEA打开项目:在File中选择Open,然后找到项目打开

        2.更换项目名及目录名称

├── xxxxx
│       └── xxxxx-admin
│       └── xxxxx-common
│       └── xxxxx-framework
│       └── xxxxx-generator
│       └── xxxxx-quartz
│       └── xxxxx-system
│       └── pom.xml

        3.更换顶级目录中的pom.xml

<modules>
	<module>xxxxx-admin</module>
	<module>xxxxx-framework</module>
	<module>xxxxx-system</module>
	<module>xxxxx-quartz</module>
	<module>xxxxx-generator</module>
	<module>xxxxx-common</module>
</modules>

  4.更换项目所有包名称com.ruoyi.xxx换成com.xxxxx.xxx

  5.更换各目录中的pom.xml
     顶级目录pom.xml
:

    <groupId>com.xxxxx</groupId>
    <artifactId>xxx</artifactId>
    <version>x.x.x</version>

    <name>xxx</name>
    <url>xxx</url>
    <description>xxx</description>
    
    <!-- 把ruoyi改成自己的 -->
    <properties>
        <xxx.version>x.x.x</xxx.version>
    </properties>

        <!-- 依赖声明 -->
    <dependencyManagement>
        <dependencies>

          ......

            <!-- 定时任务-->
            <dependency>
                <groupId>com.xxxxx</groupId>
                <artifactId>xxx-quartz</artifactId>
                <version>${xxx.version}</version>
            </dependency>

            <!-- 代码生成-->
            <dependency>
                <groupId>com.xxxxx</groupId>
                <artifactId>xxx-generator</artifactId>
                <version>${xxx.version}</version>
            </dependency>

            <!-- 核心模块-->
            <dependency>
                <groupId>com.xxxxx</groupId>
                <artifactId>xxx-framework</artifactId>
                <version>${xxx.version}</version>
            </dependency>

            <!-- 系统模块-->
            <dependency>
                <groupId>com.xxxxx</groupId>
                <artifactId>xxx-system</artifactId>
                <version>${xxx.version}</version>
            </dependency>

            <!-- 通用工具-->
            <dependency>
                <groupId>com.xxxxx</groupId>
                <artifactId>xxx-common</artifactId>
                <version>${xxx.version}</version>
            </dependency>


        </dependencies>
    </dependencyManagement>
    

        xxx-admin目录的pom.xml:

    <parent>
        <groupId>com.xxxxx</groupId>
        <artifactId>xxx</artifactId>
        <version>x.x.x</version>
    </parent>

    <modelVersion>4.0.0</modelVersion>
    <packaging>jar</packaging>
    <artifactId>xxx-admin</artifactId>
    
     <dependencies>

       ......

        <!-- 核心模块-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-framework</artifactId>
        </dependency>

        <!-- 定时任务-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-quartz</artifactId>
        </dependency>

        <!-- 代码生成-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-generator</artifactId>
        </dependency>

    </dependencies>

         xxx-common目录的pom.xml:

    <parent>
        <groupId>com.xxxxx</groupId>
        <artifactId>xxx</artifactId>
        <version>x.x.x</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>xxx-common</artifactId>

        xxx-framework目录的pom.xml:

    <parent>
        <groupId>com.xxxxx</groupId>
        <artifactId>xxx</artifactId>
        <version>x.x.x</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>xxx-framework</artifactId>

     <dependencies>

        <!-- 系统模块-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-system</artifactId>
        </dependency>

    </dependencies>

   xxx-generator的pom.xml:

    <parent>
        <groupId>com.xxxxx</groupId>
        <artifactId>xxx</artifactId>
        <version>x.x.x</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>xxx-generator</artifactId>

     <dependencies>

       ......

        <!-- 通用工具-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-common</artifactId>
        </dependency>

      

    </dependencies>

   xxx-quartz的pom.xml:

    <parent>
        <groupId>com.xxxxx</groupId>
        <artifactId>xxx</artifactId>
        <version>x.x.x</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>xxx-quartz</artifactId>

    <dependencies>

        <!-- 通用工具-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-common</artifactId>
        </dependency>

    </dependencies>

   xxx-system目录的pom.xml:

    <parent>
        <groupId>com.xxxxx</groupId>
        <artifactId>xxx</artifactId>
        <version>x.x.x</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>xxx-system</artifactId>

    <dependencies>

        <!-- 通用工具-->
        <dependency>
            <groupId>com.xxxxx</groupId>
            <artifactId>xxx-common</artifactId>
        </dependency>

    </dependencies>

        6.、更换application.yml指定要扫描的Mapper类的包的路径typeAliasesPackage包路径名称替换com.xxxxx

# MyBatis
mybatis:
    # 搜索指定包别名
    typeAliasesPackage: com.你的包名.**.domain

7.更换mapper文件的namespace包路径

ruoyi-system/resources/mapper/system/* 
ruoyi-quartz/resources/mapper/quartz/* 
ruoyi-generator/resources/mapper/generator/*

xml包路径名称替换com.xxxxx

8、更换日志路径

  • 更换application.yml文件logging属性为com.xxxxx: debug
  • 更换logback.xml文件为com.xxxxx

9.在mysql8建数据库然后运行sql文件

        如果不是mysql8,得改application-druid.yml中datasource的type

10、启动项目验证

        访问地址:

                http://localhost/端口号

修改ruoyi系统总结

        1.改ruoyi的界面

                界面在xxx-admin资源文件的templates模板下

      注意:

                核心菜单是在数据库里改的,如系统管理、系统监控、系统工具、若依官网,在sys_menu表中

        2.加自己模块

                先在库里建该模块的表,然后在本地启动项目,在系统工具模块下代码生成部分中,点导入然后选择自己的表,即可生成对应的界面及后端代码,mybatis配置文件也已生成好

     注意:

            生成代码前可先修改对应的记录,修改基本信息、字段信息及生成信息,其中基本信息可修改作者、实体类名称、表描述等,字段信息这个很重要,里面可对性别和证件类型加字典类型,然后显示类型中选择对应的控件,对应的字典类型在系统管理模块的字典管理部分下。

            用户得先在sys_menu中加入自己的模块,具体可参考其他模块,也可以运行生成的代码包中的sql文件,根据我的实践经验运行文件后会生成在系统管理模块下而不是单独一个模块,用户如果想单独一个模块可以自己改。

           加入模块后,把生成的代码加入到对应的目录下

        3.添加基本数据

                用户如果有基本数据的需求,可在系统管理的字典管理部分下,新增即可,在列表中加入数据其中字典标签和字典键值最重要,他们是一一对应的。

                前端使用字典数据:

        1.下拉框显示字典数据

        其中getType下是你选择的对应字典数据的字典类型,这样界面对应字段的下拉框就会显示你添加的字典数据

<li>
    <label>状态:</label>                     
    <select name="state" th:with="type=${@dict.getType('sys_submit_state')}">
        <option value="">所有</option>
        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
    </select>
</li>

当表格显示字典数据字段时你会发现显示的是键值而不是标签,这时或许得进行转换

<script th:inline="javascript">

    ......
 var stateDatas = [[${@dict.getType('sys_submit_state')}]];

......
  columns: [    
                {
                    checkbox: true
                },
                {
                    field: 'state',
                    title: '状态',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(stateDatas, value);
                    },
                    sortable: true
                }

    }]
......
           
</script>

当你的字典数据特别多时,你会发现一个一个添加很不方便而且很容易出错,但可惜的是ruoyi字典管理并没有导入,如果你有这方面需求你可以尝试着改字典管理部分加个导入,这部分我并没尝试,因为基本数据最多也才40个。

如果想实现在表格展示中对字段加一些样式,可参考如下,选择想要的即可:

 

        后端使用基本数据:

@Autowired
private ISysDictDataService iSysDictDataService;

    
//核心代码
SysDictData sysDictData = new SysDictData();
//用户可根据自己的需求,查询对应的数据
//DictType如“sys_user_sex”,DictLabel如"0"
sysDictData.setDictType(dictType);
sysDictData.setDictValue(dictLabel);
List<SysDictData> DictDatas = iSysDictDataService.selectDictDataByLabelType(sysDictData);

其中特别注意,当导出时,你会发现导出的是键值而不是标签,比如你导出的性别是0而不是男

,这时你可以这样做:

在实体类中对应字段上@Excel注解里加 readConverterExp,把对应的键值对都写出来,要是该字段数据特别多用这种方法简直是恶梦,目前我还只试过该方法转换,但我想应该可以在导出对应的一系列方法中改代码改成能够动态的转化

    @Excel(name = "性别", readConverterExp = "0=男,1=女,2=未知")
    private String sex;

4.生成的界面的新增、修改、删除导出等逻辑

        对应的方法ruoyi已经给你封装好呢,你直接调用即可,在ry-ui.js中可找到对应的方法,如以下代码:

<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="xxxxx:xxx:add">
    <i class="fa fa-plus"></i> 添加
</a>

其中onclick对应的方法在ry-ui.js中可找到:

至于该方法中调用的其他方法同样可在js文件中找到

  // 添加信息
  add: function(id) {
      table.set();
      $.modal.open("添加" + table.options.modalName, $.operate.addUrl(id));
  },

至于其他生成的功能的实现也同样如此

如果你想加入自己的方法,你可以按照他的流程在对应的文件中加即可,写好前端后再写一系列层层调用的后端类

5.权限控制

        前端的界面权限控制可通过shiro:hasPermission实现,有该字段内容的才显示,

shiro:hasPermission="admin"  表示只有管理员可显示
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="xxxxx:xxx:add">
    <i class="fa fa-plus"></i> 添加
</a>
后端权限控制可参考如下代码:
@Autowired
private ISysRoleService iSysRoleService;
       
Long userId = ShiroUtils.getUserId();
SysRole sysRole = iSysRoleService.selectRoleById(userId);
if(sysRole!=null){
  if("admin".equals(sysRole.getRoleKey())){
                
  }else{

}

6.如何更好的使用ruoyi

        1.当遇到不会的难题时可查阅ruoyi官方文档

        2.可参考实例演示下的各种功能,当有你需要的时

                对应的代码可在xxx-admin下的system下找到,当你鼠标停在对应的图标时会显示对应的接口,你可按着去找对应的

        3.可去ruoyi社区中看别人有没有对应的问题

        

总结:

       写这篇文章时我对ruoyi的使用还不是很多然后我也只想到这些,等以后用到ruoyi更有趣的地方时再来分享, ruoyi的所有实现都可在项目中找到代码,只不过在一些框架上又做了封装然后你可直接用,当你的需求ruoyi现有的没法实现时你可先看ruoyi代码逻辑,然后在该基础上加自己的代码实现自己需求,也可直接修改ruoyi的代码,你感觉你实现的需求还不错时可以考虑贡献你的代码然后丰富ruoyi,也可贡献你的系统,前提是你自己写的或已经得到授权,这样别人也可基于你的系统快速完成他的需求,赠人玫瑰,手有余香!

        

  • 17
    点赞
  • 182
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

像向日葵一样~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值