RuoYi 学习笔记 3：二次开发

准备工作

进行二次开发前最好先修改一下项目中的包名和子模块名称，可以使用一个工具------若依框架修改器。

将后端代码打包后使用修改器修改包名等：

修改完后重新用 idea 打开加载，处理依赖后启动，以检查是否正常。

添加业务代码

新编写的业务代码最好单独一个模块。

添加 maven 类型的子模块sky-merchant，pom 文件中添加对框架核心模块的依赖：

xml 复制代码

<dependencies>
    <dependency>
        <groupId>com.sky</groupId>
        <artifactId>sky-framework</artifactId>
    </dependency>
</dependencies>

在最外层的父模块的 pom 文件中添加对这个子模块的版本管理：

xml 复制代码

<dependency>
    <groupId>com.sky</groupId>
    <artifactId>sky-merchant</artifactId>
    <version>${sky.version}</version>
</dependency>

在 sky-admin 模块的 pom 文件中添加对新模块的引用，以加载新模块：

xml 复制代码

<dependency>
    <groupId>com.sky</groupId>
    <artifactId>sky-merchant</artifactId>
</dependency>

导入菜品管理的表结构和数据。

通过代码生成工具生成代码，并添加到工程目录，具体可以观看视频。

还需要对页面部分代码进行调整，详情可以看视频。

调整页面展示

替换浏览器标签，位于public\favicon.ico。

修改页面标题，位于.env.development：

复制代码

# 页面标题
VITE_APP_TITLE = 外卖管理系统

替换菜单栏的 Logo，位于src\assets\logo\logo.png。

去除右上的文档地址和源码地址链接，位于src\layout\components\Navbar.vue：

xml 复制代码

<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
  <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>

<el-tooltip content="文档地址" effect="dark" placement="bottom">
  <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> -->

使用自定义菜单图标。

通过阿里图标矢量库创建 svg 图标，拷贝到图标目录src\assets\icons\svg。

这样就可以在菜单管理中通过编辑给菜单添加自定义图标了。

登录页

替换背景图片，位于src\assets\images\login-background.jpg。

调整登录表单，向右对齐：

css 复制代码

.login {
  display: flex;
  justify-content: right;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}

部署

后端

后端代码使用 Maven 打包：

生成的 jar 包位于 sky-admin/target/sky-admin.jar。

上传到服务器运行：

bash 复制代码

java -jar sky-admin.jar

最好使用 root 帐号运行，因为若依框架会自动生成一些目录，比如/home/ruoyi等，非root帐号会报不能创建目录的错误。

查看是否对相应端口已经监听：

bash 复制代码

sudo netstat -tulnp | grep :8080
[sudo] icexmoon 的密码：
tcp6       0      0 :::8080                 :::*                    LISTEN      20590/java

前端

前端代码的打包命令定义在package.json：

json 复制代码

"scripts": {
    "dev": "vite",
    "build:prod": "vite build",
    "build:stage": "vite build --mode staging",
    "preview": "vite preview"
},

默认只有打包生产环境（build:prod）与预生产环境（build:stage）两个命令，可以添加一个打包预生产环境的命令：

bash 复制代码

"build": "vite build --mode staging",

打包：

bash 复制代码

npm run build

前端代码会打包到 dist 目录下，压缩该目录并上传到服务器。解压到指定目录，比如/var/www/sky。

Nginx

需要服务器安装 Nginx，如果未安装，可以参考这篇文章。

Nginx 配置：

conf 复制代码

server {
    listen       80;
    server_name  localhost;
    
    # 前端页面
    location / {
        root   /var/www/sky/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    
    # 将前端页面接口请求反向代理到 spring
    location /stage-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8080/;
    }
}

重启 Nginx 后访问 192.168.0.88/stage-api/

如果一切正常，会显示：

复制代码

欢迎使用RuoYi后台管理框架，当前版本：v3.9.0，请通过前端地址访问。

错误排查

如果遇到问题，可以查看以下日志排查问题：

Nginx 错误日志：/usr/local/nginx/logs/error.log
RuoYi 错误日志：/home/ruoyi/logs/sys-error.log

The End.

RuoYi 学习笔记 3：二次开发