若依框架部署

一、若依介绍

1.1 低代码开发平台

低代码诞生的目的是将可`重复性的编程`工作通过`平台实现`，将开发人员从没有技术含量的`增删改查`开发中解放出来，让其专注于更有价值的开发工作

例如：**数据库设计、流程设计、API核心开发、业务逻辑**开发等工作。所以，低代码开发平台可以提高开发效率。

常见产品有：

- 明道云、Noohle（怒吼）、简道云

- 若依/RuoYi、 jeecg-boot、人人开源 / renren-fast

1.2 若依简介

**RuoYi-Vue** 是一个轻量级快速开发平台，毫无保留给个人及企业免费使用。基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue、Element）内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。

1）若依提供了企业级后台管理系统基础通用的功能，免去开发者去搭建和配置繁琐项目环境

2）提供了代码生成技术：通过数据库表就可以自动生成（java后端代码，前端vue页面）

1.3 特点

功能特性：

• 完善的权限管理
• 开发支持多语言
• 丰富的前端插件
• 强大代码生成器

使用最流行的技术

• RuoYi（SpringBoot+Bootstrap）
• RuoYi-Vue（SpringBoot+Vue）
• RuoYi-Cloud（SpringCloud+Vue）
• RuoYi-App（Uniapp+Vue）
• 完全响应式布局
• 支持电脑、平板、手机等所有主流设备
• 提供多种不同风格的皮肤
• 使用最流行的的扁平化设计
• 集成多款国内优秀插件

1.4 优缺点

优点：

• 高度集成的开发框架，支持快速开发和部署
• 代码简单清晰明了，易于维护
• 提供了自定义组件等功能，可满足各种需求
• 采用前后端分离的设计思路，使应用更加灵活，易于扩展

缺点：

• 使用ruoyi框架需要一定的JavaWeb开发经验，在没有JavaWeb基础的情况下，上手可能会困难
• 提供的代码生成器可能不能满足需求，并且代码生成的质量还需要另加一定的开发工作
• 支持的功能还比较简单，但是这也使得它更加轻量级，通用性更好

二、项目部署

2.1 准备工作

(1) 基本环境要求

- JDK >= 1.8

- MySQL >= 5.7

- Maven >= 3.0

- Node >= 12

- Redis >= 3

(2) 本地环境

- JDK = 1.8.0_131

- MySQL = 8.0.21

- Maven = 3.8.3

- Node = 18.16.0

- Redis = 5.0.14.1

(3) 软件

Navicat（数据可视化）

IDEA

2.2 开发环境配置

2.2.1 Mysql

(1) 下载zip安装包：

下载链接：https://www.mysql.com/downloads/，我们下载的是mysql8.0.21

(2) 解压到自定义目录

下载完成后，将zip包解压到自定义目录，我的解压目录是 D:\soft\mysql-8.0.21-winx64。

(3) 配置环境变量

顺序打开：控制面板->系统->高级系统设置->环境变量，在“系统变量”中找到“Path”，编辑，添加一行mysql刚刚解压的目录下的bin的目录。

 

(4) 创建配置文件

在mysql解压目录下创建my.ini的配置文件，文件内容如下

[mysql]

# 设置mysql客户端默认字符集

default-character-set=utf8

 

[mysqld]

# 绑定IPv4

bind-address=0.0.0.0

# 设置端口号

port=3306

# 设置mysql的安装目录，即解压目录

basedir=D:\\soft\\mysql-8.0.21-winx64

# 设置数据库的数据存放目录

datadir=D:\\soft\\mysql-8.0.21-winx64\\data

# 设置允许最大连接数

max_connections=200

# 设置允许连接失败次数

max_connect_errors=10

# 设置服务端的默认字符集

character-set-server=utf8

# 创建表使用的默认存储引擎

default-storage-engine=INNODB

(5) 安装mysql服务

cmd管理员模式进入mysql安装目录bin目录下，执行命令mysqld -install

(6) 初始化数据文件

执行命令mysqld --initialize-insecure --user=mysql

(7) 启动MySQL服务

执行命令net start mysql

(8) Navicat建立Mysql连接

2.2.2 JDK及Maven安装

JDK和Maven的安装配置不做重点介绍，我使用的JDK版本是1.8.0_131，Maven版本是3.8.3。

  

在IDEA中依次点击“File—Project Structure—SDKs—+JDK”，配置安装好的JDK。

在IDEA中依次点击“File—Settings—Build,Execution,Deployment—Bulid Tools—Maven”，在Maven home directory中配置安装好的Maven。

 

 

 

2.2.3 Node.js安装

(1) 下载安装包：Node.js官方安装包及源码下载地址：https://nodejs.org/en/。

根据自己电脑系统及位数选择，我这里选择windows64位.zip格式安装包。

(2) 下载完成后，双击安装包开始安装，一直点next即可，安装路径我修改到了：F:\soft\NVM\nodejs，安装完成如图所示。

(3) 配置环境变量：右击此电脑选择属性，点击高级系统设置，在系统变量中配置node的环境变量。

(4) 检测是否安装成功：

　　点击开始-运行-cmd（win+R），打开dos，输入“node --version”检查Node.js版本：

 

 

2.2.4 Redis安装

(1) 下载Redis压缩包，解压到自定义目录。

(2) 在redis文件目录输入cmd并回车，弹出命令行。输入redis-server.exe redis.windows.conf回车，如下即表示启动成功。

2.3 项目工程配置

2.3.1 项目下载

若依的源代码是开源的，所以在若依的官方网站即可进行下载，若依的官网是：http://www.ruoyi.vip/，进入官网后，根据系统需求选择框架版本，我们选择的是RuoYi-Vue前端分离版，点击跳转到git，下载即可。

可以选择直接通过git从IDEA进行克隆，也可以下载压缩包手动导入，我采用的第二种方式。

下载解压后的文件如下所示：

打开IDEA，导入解压后的项目。

 

IDEA会自动加载`Maven`依赖包，初次加载会比较慢（根据自身网络情况而定）

2.3.2 Mysql配置

(1) 导入sql

创建数据库`create database ry;`。在连接名上点击鼠标右键，选择新建数据库。

填写数据库名，字符集选择utf-8，排序规则选择utf8_general_ci.

 

 在数据库名上点击鼠标右键，选择【运行SQL文件】。运行上图红框内的两个sql文件。

 

 

 找到sql文件所在的本地路径，选中的后，点击【开始】，执行SQL文件。

 

 分别导入成功后结果如下：

 执行成功后，在【表】上点击鼠标右键，选择【刷新】，刷新完成后，即可显示出所有的表。

 sql文件运行成功。

(2) 配置文件

在`ruoyi-admin`模块下，修改数据库连接，编辑`resources`目录下的`application-druid.yml`

url:修改本地数据库连接

username:修改数据库用户名(root)

password:修改数据库密码

 

2.3.3 开启Redis服务

双击运行redis-server.exe,有图标就是开启成功

2.3.4 项目启动

(1) 后端运行

在`ruoyi-admin`模块下，启动项目`com.ruoyi.RuoYiApplication.java`

 

 

见到这个banner,说明若依后端启动成功。

 

 

(2) 前端运行

IDEA打开前端文件夹ruoyi-ui。

 

 

 

 

点击底部菜单栏中的Terminal命令，执行以下命令：

npm install  # 安装依赖

npm install --registry=https://registry.npmmirror.com  # 通过如下操作解决 npm 下载速度慢的问题

npm run dev  # 启动服务

注意：运行中遇到了以下错误：

 

 

执行命令$env:NODE_OPTIONS="--openssl-legacy-provider"可以解决。

运行成功后，由于项目本身做了重定向功能，因此会自动跳转到对应网址。

 

 

登录成功后的页面如下：

三、源码分析

3.1 前端代码

前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui

├── build                      // 构建相关  

├── bin                        // 执行脚本

├── public                     // 公共文件

│   ├── favicon.ico            // favicon图标

│   └── index.html             // html模板

│   └── robots.txt             // 反爬虫

├── src                        // 源代码

│   ├── api                    // 所有请求

│   ├── assets                 // 主题 字体等静态资源

│   ├── components             // 全局公用组件

│   ├── directive              // 全局指令

│   ├── layout                 // 布局

│   ├── plugins                // 通用方法

│   ├── router                 // 路由

│   ├── store                  // 全局 store管理

│   ├── utils                  // 全局公用方法

│   ├── views                  // view

│   ├── App.vue                // 入口页面

│   ├── main.js                // 入口 加载组件 初始化等

│   ├── permission.js          // 权限管理

│   └── settings.js            // 系统配置

├── .editorconfig              // 编码格式

├── .env.development           // 开发环境配置

├── .env.production            // 生产环境配置

├── .env.staging               // 测试环境配置

├── .eslintignore              // 忽略语法检查

├── .eslintrc.js               // eslint 配置项

├── .gitignore                 // git 忽略项

├── babel.config.js            // babel.config.js

├── package.json               // package.json

└── vue.config.js              // vue.config.js

跨域转发：

浏览器F12抓取登录请求地址，前端获取验证码的请求URL：http://localhost:81/dev-api/captchaImage，若依的后端端口是8080，前端是81，前后端部署在不同的服务器环境中，存在跨域的问题。

 

 

 

若依前端是基于代理转发解决跨域问题的。以下这段代码是在 Vue 项目的配置文件中，用于配置开发服务器的代理设置。

 

 

通过这个配置，我们可以将前端应用发送的请求代理转发到后端 API 服务器，以解决跨域访问的问题。这里使用了一个名为 proxy 的配置项，它的作用是对指定的请求路径进行代理转发。即将/dev-api替换成’’，再映射到http://localhost:8080。前端URL直接通过81端口就能访问到后台。

3.2 后端代码

后端技术栈 SpringBoot、MyBatis、Spring Security、Jwt

 

 

四、项目开发

4.1 菜单配置

根据业务新建“病虫害管理”新菜单。点击【系统管理】—【菜单管理】—【新增】—填写主要信息—【确定】。 

 

手动刷新后可以看到新增的主菜单，如下：

 

4.2 建表语句

在我们的业务逻辑中，会用到资讯分类表、资讯信息表、玉米病虫害信息表、识别历史记录表。

资讯分类表主要用来存储资讯的类别信息，建表语句如下：

DROP TABLE IF EXISTS `news_category`;

CREATE TABLE `news_category` (

  `category_id` bigint NOT NULL AUTO_INCREMENT COMMENT '分类ID',

  `category_name` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '分类名称',

  `status` int DEFAULT NULL COMMENT '分类状态（0代表禁用 1代表启用）',

  `create_by` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT '' COMMENT '创建者',

  `create_time` datetime DEFAULT NULL COMMENT '创建时间',

  `update_by` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT '' COMMENT '更新者',

  `update_time` datetime DEFAULT NULL COMMENT '更新时间',

  `remark` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '备注',

  PRIMARY KEY (`category_id`) USING BTREE

) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC COMMENT='新闻分类';

资讯信息表主要用来存储从网易新闻、腾讯新闻等网站爬取的关于玉米的资讯信息，建表语句如下：

DROP TABLE IF EXISTS `news_core`;

CREATE TABLE `news_core` (

  `news_id` bigint NOT NULL AUTO_INCREMENT COMMENT '新闻ID',

  `title` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '标题',

  `content` text CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '内容',

  `img_url` varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '封面',

  `author` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '作者',

  `category_id` bigint NOT NULL COMMENT '分类ID',

  `category_name` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '分类名称',

  `main_url` varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '新闻链接',

  `create_by` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '发布者',

  `create_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '发布时间',

  `update_by` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '更新者',

  `update_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',

  `remark` varchar(500) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '备注',

  PRIMARY KEY (`news_id`) USING BTREE

) ENGINE=InnoDB AUTO_INCREMENT=134 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='新闻资讯';

病虫害信息表主要用来存储从中国作物种质信息网爬取的玉米常见的病虫害信息，建表语句如下：

DROP TABLE IF EXISTS `core_disease`;

CREATE TABLE `core_disease` (

  `id` int NOT NULL AUTO_INCREMENT COMMENT '病虫害ID',

  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '病虫害名称',

  `img` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '病虫害图片链接',

  `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '病虫害链接',

  `create_by` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '创建者',

  `create_time` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '创建时间',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=49 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='病虫害信息';

历史记录表存储了农户拍照识别玉米叶片病虫害的历史记录，以便管理员进行分析，建表语句如下：

DROP TABLE IF EXISTS `core_history`;

CREATE TABLE `core_history` (

  `id` int NOT NULL AUTO_INCREMENT COMMENT '历史记录ID',

  `userId` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户ID',

  `date` datetime NOT NULL COMMENT '识别日期',

  `img` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '上传图像',

  `disease` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '识别结果',

  `score` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '识别准确率',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='历史记录';

4.3 代码生成

4.3.1 业务表导入数据库

在ry数据库中执行以上建表语句，建立数据库表。

 

 

4.3.2 导入对应表

在网站中的【系统工具】 -> 【代码生成】 下点击导入，选择刚才新建的数据表。

 

4.3.3 编辑业务表

代码生成列表中找到需要表可使用预览、编辑、生成代码等功能。根据业务需要对数据表进行简单的改造。

 

 

以资讯分类表为例，创建者、创建时间、更新者和更新时间是由后台生成的，在前端表单中不需要这四个字段，所以点击操作栏中的【编辑】，取消相应对勾。此外，分类状态（0代表禁用 1代表启用）需要将前端设为下拉框的类型。实现下拉框需要提供对应的数据字典。

 

 

点击生成信息，资讯分类表是对单表的增删改查，可以对生成代码的包路径、业务名等信息进行编辑。

 

 

对于资讯信息表、病虫害信息表和历史记录表等都进行修改编辑。

 

 

4.3.4 数据字典

（1）在网站中的【系统管理】 -> 【字典管理】 下点击新增，添加字典类型。

 

（2）点击生成的数据字典，新增资讯类别状态下拉框对应的字典数据。

 

这时返回代码生成界面，可以将下拉框设置为刚才设置的数据字典。

 

 

4.3.5 点击生成

使用【生成代码】功能生成所需要的代码。解压下载后的文件后得到sql文件、main目录和vue目录。

 

 

4.4 代码导入

4.4.1 导入sql

在数据库ry中使用【运行sql文件】功能，运行后可看到前端展示生成的菜单。

 

 

4.4.2 导入前端

生成的前端代码分别导入前端ruoyi-ui下src的api和views中

 

4.4.3 导入后端

生成代码时我们新建了core包，所以将main中的文件直接粘贴到对应的目录下。

 

4.5 结果展示