标签：解压 Maven 框架 部署 数据库 配置 js 若依 mysql

一、若依介绍

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

 

 

 

 

 

 

 

标签：解压,Maven,框架,部署,数据库,配置,js,若依,mysql
From： https://www.cnblogs.com/znjy/p/17980434