【RuoYi框架】RuoYi框架学习超简单案例 - 新闻管理系统（附源码）

最新推荐文章于 2025-09-10 16:29:54 发布

原创

最新推荐文章于 2025-09-10 16:29:54 发布 · 7.7w 阅读

648 ·

CC 4.0 BY-SA版权

文章标签：

#java

本文介绍如何使用RuoYi框架快速构建新闻管理系统，涵盖需求分析、数据库设计、代码生成、页面修改等关键步骤，实现新闻内容与菜单的增删改查功能。

文章目录

前言
一、需求
二、数据库设计
- - 1.新闻菜单表（树表）
  - 1.新闻内容表
三、运行RuoYi项目
- - 1.创建数据库，运行sql文件
  - 2.启动运行RuoYi项目
四、生成代码
五、粘贴生成代码
- - 1.执行sql文件
  - 2.粘贴生成代码
六、熟悉项目（新闻内容 + 新闻菜单）
七、修改页面及代码
最后
源码下载

前言

这篇文章将会讲如何用RuoYi框架做一个简单的新闻系统。

RuoYi官网：http://ruoyi.vip/

RuoYi文档：http://doc.ruoyi.vip/

RuoYi源码下载：https://gitee.com/y_project/RuoYi

非常感谢RuoYi框架的作者无私开源！

备注：写下这篇文章时使用的RuoYi 版本为：4.1.0。

该篇文章中使用到的 代码生成 和 文件上传 ，在2020-07-05日时发布的v4.3.1版本有了非常大的优化，所以该篇文章的 代码生成 和 文件上传 并不推荐查阅学习，推荐查阅其他最新的博客总结或官方文档！

一、需求

做一个简单的新闻系统。

每一篇新闻有：所属菜单、标题、内容（内容包含图片和文字）、创建日期、作者。

新闻菜单有（树表）：菜单名称、菜单类型、菜单图标、菜单是否展示

二、数据库设计

注释不要忘记，代码生成的时候会用到注释！（注释时请不要加上我括号里面解释的内容）

1.新闻菜单表（树表）

news_menu_id：编号
news_menu_parent_id：父id
news_menu_name：菜单名称
news_menu_type：菜单类型（菜单有两种类型一种是D（directory目录），另一种是菜单M（menu菜单））
news_menu_icon：菜单图标（菜单的图标，存放的是url地址。）
news_menu_visibel：显示（菜单是否展示，1代表展示，0代表不展示）

记得在表注释中加上 新闻菜单表
在这里插入图片描述

1.新闻内容表

news_content_id：编号
news_content_title：新闻标题
news_content_text：新闻内容
news_menu_id：所属菜单id（一定是M菜单类型的id）

记得在表注释中加上 新闻内容表
在这里插入图片描述

三、运行RuoYi项目

如果运行遇到问题推荐去看RuoYi的官方文档

RuoYi文档环境部署：http://doc.ruoyi.vip/ruoyi/document/hjbs.html#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C

1.创建数据库，运行sql文件

sql文件在RuoYi项目sql目录下，名字分别是：quartz.sql 和 ry_20191122.sql。
在这里插入图片描述

2.启动运行RuoYi项目

我用的是IDEA，用Eclipse的同学需要把每一个模块都导入到Eclipse工作区间中。

记得修改数据库连接池文件中的用户名和密码！
在这里插入图片描述
右键 RuoYiApplication 点击 run。

启动成功！
在这里插入图片描述

四、生成代码

1.添加字典（菜单显示）

注：增加字典是为了一会儿需要用到字典。

点击：系统管理 - 字典管理 - 新增

点击列表

点击新增，增加字典数据（添加菜单显示字典）

2.添加字典（菜单类型）

注：增加字典是为了一会儿需要用到字典。

同上方法，添加菜单类型的字典。

点击：系统管理 - 字典管理 - 新增

点击列表

点击新增，增加字典数据（添加菜单类型字典），添加好后点击确认。

D代表directory目录

点击新增，增加字典数据（添加菜单类型字典），添加好后点击确认。

M代表menu菜单

2.代码生成

点击 系统工具 - 代码生成 。然后点击导入，勾选刚创建的两个表（news_content和news_menu表），点击确定。

2.1 修改生成配置（字段信息）

点击 新闻菜单表 的编辑，用来修改生成配置。

点击字段 news_menu_visibel 的字典类型，然后选择字典类型。（这就是我们刚刚新增的字典！）选择好后点击确认。

菜单类型同理。选择字典。

2.2 修改生成配置（生成信息）

点击 新闻内容表 的编辑，修改生成配置。

2.3 修改生成配置（生成信息）

点击 新闻菜单表 的编辑，修改生成配置。

修改为树表，其他信息也按照图片填写完整

2.4 代码生成

选中刚才导入的两条记录，然后点击生成。

网站将会自动生成一个zip压缩包，里面就是生成的代码。一会儿直接复制粘贴到项目里面，然后重启项目即可。

压缩包中生成的代码文件夹解释：

五、粘贴生成代码

1.执行sql文件

将下面两个生成的sql文件到数据库中执行。
在这里插入图片描述
运行sql文件

sql文件运行成功后，刷新页面应该可以看到 系统工具 中多出两个菜单了，分别是 新闻内容 和 新闻菜单
（404是因为我们还没粘贴java、xml和页面文件呢！）

2.粘贴生成代码

粘贴生成的代码到项目中。（注意，请去IDE中粘贴，就是你开发的界面中粘贴。）

然后重启项目，运行。

注意：此时如果提示你某个类不存在，请检查是否粘贴完整。如果确认是粘贴完整的，请重启IDE，因为多半是IDE卡了。重启下IDE就不会再报错了。

六、熟悉项目（新闻内容 + 新闻菜单）

运行成功！

此时项目已经完成了简单的增删改查 + 导出。你需要做的就是熟悉项目。比如上面那个 新闻内容 页面是属于什么页面的。调用的是什么接口，点击添加修改又是什么页面。这些是你需要了解的。

随便添加几个数据，查看一下。

等熟悉完页面后就可以去修改页面代码，改成我们想要的页面了。

七、修改页面及代码

1.修改新闻菜单页面

1.1 修改新增页面（add.html）

修改templates - news - menu文件夹下的add.html

新增页面参考代码：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增新闻菜单')" />
    <!-- 文件上传css导入 -->
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-menu-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">父id：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="treeId" name="newsMenuParentId" type="hidden" th:value="${newsMenu?.newsMenuId}"/>
                        <input class="form-control" type="text" onclick="selectMenuTree()" id="treeName" readonly="true" th:value="${newsMenu?.newsMenuName}">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">菜单名称：</label>
                <div class="col-sm-8">
                    <input name="newsMenuName" class="form-control" type="text" required maxlength="20">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">菜单类型：</label>
                <div class="col-sm-8">
                    <select name="newsMenuType" class="form-control m-b" th:with="type=${@dict.getType('news_menu_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">显示：</label>
                <div class="col-sm-8">
                    <select name="newsMenuVisibel" class="form-control m-b" th:with="type=${@dict.getType('news_menu_visible')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <!-- 注释原本的菜单图标输入框 -->
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">菜单图标：</label>
                <div class="col-sm-8">
                    <input name="newsMenuIcon" class="form-control" type="text">
                </div>
            </div>-->
            <!-- 使用RuoYi框架自带的文件上传(页面：实例演示 - 表单 - 文件上传。源码：templates - demo - form - upload.html) -->
            <div class="form-group">
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <img id="menuIconImg" src="/news/default_images/dir.png" alt="图标加载失败" style="width-max: 100px;max-height: 50px;margin-right: 50px">
                    <button class="btn btn-primary" type="button" onclick="uploadIconBtn(this)" id="uploadButton">
                        <i class

最低0.47元/天解锁文章