鄙人写该文也是记录自己踩过的坑,写的东西比较基础没什么高深的地方,如果能帮到一部分新手和学习到一些高人的指点也是一种缘分

若依的项目对想从事前端开发行业的新手是很好的跳板,其学习和使用需要不少前端要用到的基础知识:vue,node.js,java,redis,数据库等等

本教程是window10系统的教程和使用chrome浏览器,因为不同的操作系统的步骤方法都不同,写教程还是要说清楚自己用的什么系统才能让学习者能够复现出来

这里会提供搭建若依环境必要流程,其中夹杂着搭建若依环境必要的几个软件的配置,好吧,往下看

一、首先是准备工具和环境

使用若依项目需要准备以下工具和对应的基础知识,这里推荐了菜鸟教程和how2j里的安装教程的链接,新手可以根据教程慢慢来安装并学会简单的使用方法

MySql数据库(要求大于5.5,最好用5.7。过低版本一定要卸载干净重装高级版本)和数据库可视化工具(这里用的Navicat)

(建议从官网https://dev.mysql.com/downloads/mysql/5.7.html下载5.7版本然后按照下文提供的how2j的网站教程安装)

下图是官网下载5.7版本的流程:

ios前后端分离 前后端分离教程_eclipse

ios前后端分离 前后端分离教程_ios前后端分离_02

(mysql的安装教程:https://how2j.cn/k/mysql/mysql-install/377.html#step7029 里面提供了mysql5.5版本可以不用下载,用上面提供的5.7版本的资源,按照教程来学就好)

数据库可视化工具很多:navicat是其中一种,属于收费产品官网下载可以试用,这里用的是破解版就不宣传网站了,在百度搜navicat破解版安装就好。(程序员要自己学会怎么用百度,嗯)

 

Redis(下载提供和安装教程:https://how2j.cn/k/redis/redis-download-install/1367.html)

node.js (下载提供和安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html)

Maven(下载提供和安装教程:https://how2j.cn/k/maven/maven-download-config/1329.html)记得安装后配置好仓库位置和下载路径

JDK8(非常推荐用jdk8,有些软件和应用都和8兼容反而不兼容后续版本,8以上的版本要添加依赖,会麻烦点。在本文结尾会说) 和Eclipse(用其他java编译环境也可以,本教程为基于eclipse的)(两者的下载提供和安装教程:https://how2j.cn/k/helloworld/helloworld-jdk/141.html)

以上是使用若依系统需要用到的工具软件,本教程会对这些工具软件介绍安装网站,新手小白最好学习下以上工具的基本使用方法,避免踩坑。

 

二、下载若依源码

运行若依首先要下载若依源码,进入http://ruoyi.vip/选择下载版本,再下载源码,会有一个源码压缩包,解压出来放置好,在源码中doc文件夹里有具体教程,虽然不全但可以参考。

接下来先讲解准备工具的安装和配置,会有一些坑,我一点点说明

 

下载若依分离版压缩包: 

 

ios前后端分离 前后端分离教程_ios前后端分离_03

压缩包解压得到若依源码

ios前后端分离 前后端分离教程_数据库_04

其中的doc文件夹中有官方的说明手册,里面说明粗略且没有说全,像redis启动也没说,但可以拿来参考看看,毕竟没有这个我还搭不出来环境:

ios前后端分离 前后端分离教程_redis_05

 

如果在使用若依框架时遇到的问题可以在issue中搜索答案或提出问题,就在下载压缩包的页面上,作为一个开源系统还是有很多技术大牛愿意互相学习交流

ios前后端分离 前后端分离教程_数据库_06

三、启动后端

1.首先打开数据库可视化软件(这里是navicat),创建一个mysql连接,连接名随意,设置数据库ip和端口号,登录的用户名和密码按照安装数据库时设置的填进去,错误会连接不上。

(这里的localhost和127.0.0.1同义,是网络知识的基础。端口号设置一个不被其他应用占用的端口号,通常按默认的来没问题。)

设置完按左下角的连接测试可以测试是否可以连接,正常连接上点确定就行,这里的连接起名叫ry

ios前后端分离 前后端分离教程_数据库_07

ios前后端分离 前后端分离教程_eclipse_08

打开刚刚建立的连接ry

ios前后端分离 前后端分离教程_redis_09

打开连接后,右键新建一个数据库,数据库名要记住后面配置若依会用,字符集和排序规则一定要utf8mb4别搞错,也就是图片里的样式来,错误的格式会导致若依系统的功能不能正常使用,写错也没关系删掉重建一个数据库就好,这里数据库起名叫ry-vue

ios前后端分离 前后端分离教程_eclipse_10

ios前后端分离 前后端分离教程_数据库_11

如果想更改密码可以点击用户,选择你连接数据库的用户名,来更改密码。更改后记得保存

ios前后端分离 前后端分离教程_redis_12

ios前后端分离 前后端分离教程_eclipse_13

2.之前的解压出来的若依源码派上用场了,在新数据库ry-vue中右键运行sql文件导入若依源码的sql文件夹中的两个sql文件:先导入ry_20201021.sql,后导入quartz.sql

都导入成功后刷新可以看到数据库的表中有新增的若干表格。

ios前后端分离 前后端分离教程_数据库_14

ios前后端分离 前后端分离教程_数据库_15

ios前后端分离 前后端分离教程_redis_16

导入成功后右键刷新会看到数据库的表里面新增了若依里会用到的表

ios前后端分离 前后端分离教程_eclipse_17

ios前后端分离 前后端分离教程_数据库_18

ios前后端分离 前后端分离教程_ios前后端分离_19

3.数据库保持连接状态,继续接下来的操作,以后要打开若依系统都要先连接数据库才能使用若依

4.接下来运行redis服务器redis-server.exe

打开redis的服务后确认服务器的端口号,默认是6379。

也要记住redis服务器的端口号,后面配置要用。

这是一个坑点,官方手册里没讲要运行redis,切记要打开redis服务才能启用若依后端服务

图片是成功运行redis的界面,标记的地方是redis服务器端口号,后面会用在若依配置上

ios前后端分离 前后端分离教程_ios前后端分离_20

5.打开eclipse,首先要配置好maven,按照前面maven的教程配置好eclipse中的仓库路径,进入Window->Preferences->Maven->User Settings和Installations页面配置,这部分若依说明手册有可以按着来

ios前后端分离 前后端分离教程_eclipse_21

ios前后端分离 前后端分离教程_redis_22

然后进入Window->Preferences->Validation页面,如图勾选“Suspend all validators”和"show a confirmation dialog when performing manual validations",关闭校验.像如图只勾选2、4项就好了

ios前后端分离 前后端分离教程_eclipse_23

6.开始导入工程,在eclipse中左上角File->import,

ios前后端分离 前后端分离教程_ios前后端分离_24

选择Maven->Existing Maven Projects,

ios前后端分离 前后端分离教程_ios前后端分离_25

next后Browse选择若依源码的文件夹,可以看到其中的多个模块,点击finish全部导入即可,

ios前后端分离 前后端分离教程_eclipse_26

成功会看到左侧栏导入的各个模块文件夹

ios前后端分离 前后端分离教程_redis_27

7.看到导入的很多模块不用慌,先配置两个文件,

在eclipse中找ruoyi-admin\src\main\resources中的application.yml和application-druid.yml文件,

点击右键open with-> text editor打开就好,

ios前后端分离 前后端分离教程_eclipse_28

这里有个坑就是导入后要在eclipse中改配置文件才有效,在外面用记事本打开配置文件更改是不会生效的,要移除eclipse的若依项目重新导入才会生效,这样费事。

首先是配置application.yml

更改服务器的端口为8080,有的系统默认后端端口为80,如果之后打不开后端在这更改为80试试看,也可以自己定义端口,不限制。

(这里紧跟#后面的一行内容都是注释,是用来提示使用者的,系统不会读取所以不用动)

ios前后端分离 前后端分离教程_数据库_29

更改redis的端口号和地址,将之前的redis服务的端口号和地址填进去即可,默认为6379和localhost

ios前后端分离 前后端分离教程_数据库_30

然后是配置application-druid.yml,

更改连接数据库的用户名和密码以及数据库名字,这里的信息上面都提到过,用户名是root,密码是admin,数据库名是ry-vue,数据库ip地址和端口是localhost:3306,其他按照默认,不用更改也能搭起来环境。

ios前后端分离 前后端分离教程_ios前后端分离_31

到这里确认redis服务器开启中数据库连接中配置文件的内容匹配,接下来就能启动后端了

8.在eclipse导入的项目中按路径\ruoyi-admin\src\main\java\com\ruoyi找到RuoYiApplication.java

ios前后端分离 前后端分离教程_ios前后端分离_32

右键run as->java application启动后端,第一次启动会慢一点耐心等待,出现如下标识就表示后端启动成功了!

ios前后端分离 前后端分离教程_数据库_33

(可忽略)可以在浏览器输入http://localhost:8080/captchaImage 验证后端是否启动,如果有返回代码则后端在正常运行

ios前后端分离 前后端分离教程_eclipse_34

四、启动前端

1.启动后端以后才能开启前端

2.打开命令提示符(cmd),路径选择进入若依源码中的\RuoYi-Vue\ruoyi-ui文件夹,

win10系统路径选择非系统盘的路径要先改主盘才能改路径,例如我的若依源码放在d盘就先输入D:进入D盘,然后再cd ruoyi-ui的路径才能进入,如图

ios前后端分离 前后端分离教程_数据库_35

这属于操作系统最基础的操作内容,其他系统的方法也大同小异,不会的百度自学下,做技术的就是会不断的遇到问题解决问题,不论大小。

3.进入路径后,首次运行若依前端要输入npm install --registry=https://registry.npm.taobao.org 安装必要的运行环境。需要联网等待安装成功,成功会有提示

(补充:国内用npm install会比较慢,建议用cnpm install的国内淘宝镜像安装更快:

在命令行先输入npm install -g cnpm --registry=https://registry.npm.taobao.org安装cnpm,

安装完成后以后npm install有关的命令改成cnpm install就可以了,

像这里可以cnpm install -g cnpm --registry=https://registry.npm.taobao.org安装必要的运行环境)

ios前后端分离 前后端分离教程_eclipse_36

4.输入npm run dev启动前端,等待加载完成后出现登录页面。以后要打开前端,像上面一样命令行进入ruoyi-ui路径并运行命令npm run dev即可

ios前后端分离 前后端分离教程_ios前后端分离_37

 

5.启动成功。登录若依输入默认的用户名:admin和 密码:admin123  以及验证码登录

ios前后端分离 前后端分离教程_ios前后端分离_38

 登入成功界面

 

至此搭建若依前后端分离版环境完成并启动成功。

 

 

补充:

JDK8以后的版本,诸如JDK11启动若依失败怎么办?

这种情况在登录若依系统时会报错handler dispatch failed,如图

ios前后端分离 前后端分离教程_数据库_39

有2种解决方法:

1.卸载JDK11,安装JDK8

2.添加JDK的依赖:

打开ruoyi-admin目录下的pom.xml文件

添加依赖字段:

<dependency>
	<groupId>javax.xml.bind</groupId>
	<artifactId>jaxb-api</artifactId>
	<version>2.3.0</version>
</dependency>
<dependency>
	<groupId>com.sun.xml.bind</groupId>
	<artifactId>jaxb-impl</artifactId>
	<version>2.3.0</version>
</dependency>
<dependency>
	<groupId>com.sun.xml.bind</groupId>
	<artifactId>jaxb-core</artifactId>
	<version>2.3.0</version>
</dependency>
<dependency>
	<groupId>javax.activation</groupId>
	<artifactId>activation</artifactId>
	<version>1.1.1</version>
</dependency>

在如图位置

ios前后端分离 前后端分离教程_redis_40

注意该依赖是对jdk11的依赖,如果是jdk9,则是将<version>1.1.1</version>改成<version>1.0.9</version>,以此类推