一、若依介绍
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