首页 前端知识 基于SpringBoot和vue的若依后台管理系统 部署

基于SpringBoot和vue的若依后台管理系统 部署

2024-02-01 12:02:22 前端知识 前端哥 899 307 我要收藏

RuoYi-Vue是一款前后端分离的极速后台开发框架,基于SpringBoot和Vue。

目录

一、准备

二、启动前端项目

解决报错:digital envelope routines::unsupported

【测试】

三、启动后端项目

四、运行数据库sql文件建表

五、开启redis缓存服务

【redis测试】

【测试】 


一、准备

(1)下载若依管理系统(前后端分离Vue),在以下gitee地址上进行下载若依管理系统zip文件压缩包,(或者使用git克隆到本地)

gitee地址:RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 (gitee.com)

(2)

前端系统使用的是Vue框架,所以需要使用Node.js环境, 官网下载 Node.js LTS长期支持版,安装过程比较简单, 除了修改安装路径,其他都是一直Next即可。 

在官网下载安装node.js后,就已经自带npm(包管理工具),不需要另外再进行安装npm了。

使用管理员身份打开CMD,输入 node -v 和 npm -v,显示版本号即安装成功。

(3)使用cmd命令行进入项目下的ui文件夹的所在路径,在命令行输入:

安装依赖,建议不要用直接使用cnpm安装,会有各种奇怪的bug,可以通过重新制定registry来解决npm安装速度慢的问题。

npm install --registry=https://registry.npm.taobao.org

按回车开始安装依赖,耐心等待相关依赖安装完毕。安装完毕之后可以看到,本地文件夹ruoyi-ui中会出现一个 node_modules的文件夹,

二、启动前端项目

(1)在vscode通过终端输入命令行来启动前端项目

进入前端项目所在的文件夹后,输入vue项目启动命令: 

npm run dev

解决报错:digital envelope routines::unsupported

场景:启动vue项目,运行npm run dev,但是报错了digital envelope routines::unsupported

原因:node.js 的版本问题,是nodejs新版本引起的。

解决方法

(1)推荐:修改package.json,在相关构建命令之前加入SET NODE_OPTIONS=--openssl-legacy-provider,

"scripts": {
   "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
   "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},

这种可以一劳永逸,以后直接通过npm执行scripts里面的命令即可。不管是项目迭代,还是团队开发,这种都比较有效。

(2)当次运行的命令窗口有效:在你当前文件的cmd命令窗口输入:

SET NODE_OPTIONS=--openssl-legacy-provider

回车后输入 npm运行命令。

这种做法,就是每次运行都要输入SET NODE_OPTIONS=--openssl-legacy-provider,来告诉nodejs,别使用最新的SSL3.0,还是使用以前旧版本的。

(3)还有,就是nodejs版本回退到16版本,这样就可以直接运行了。

此处,我采用的是第2种方法,

重新运行命令npm run dev启动vue项目,

ok,问题解决。

(2)加载完毕自动打开浏览器,跳转到登录界面。

(注意:这时候虽然前端页面能打开,但是无法访问到后台系统,会提示系统端口错误)

  • 这里我们还没开启后端;
  • 连接不到redis,还需要安装,启动redis;

【测试】

此时,浏览器页面效果如下:

三、启动后端项目

(1)在IDEA里安装Vue.js, File->Settings->plugins 在搜索栏输入Vue,点击“install”进行安装,

后端系统就是Springboot。点击open,打开本地项目文件,将后端代码导入IDEA中,等待依赖加载完成,

四、运行数据库sql文件建表

(1)打开数据库连接工具(我这里使用的Navicat Prenium 16),连接到本地的mysql之后,新建一个数据库【ry-vue】,

(2)然后,在sql文件夹下找到这两个sql文件,如下图所示,依次运行两个sql文件,

运行sql文件成功之后,然后刷新数据库,就可以看到创建的表字段了,

(3)将项目里的application.yml配置文件,关于数据库的参数修改为自己本地的,

  • 检查数据源连接是否与mysql数据库名一致为: ry_vue
  • 用户名 root 密码 123456

保存好文件之后关闭。

五、开启redis缓存服务

(1)这里我是在GitHub中下载window用的 5.0 版本,

然后将下载的压缩包解压到指定的文件夹中,如:D:\my_ruanjian\Redis,内容如下:

 (2)在Redis的安装目录下打开cmd窗口,

直接在Redis目录路径处输入cmd回车就可以进入命令窗口切换到redis目录,按回车,

然后,在redis目录路径下的cmd里,执行以下命令来启动redis服务:

redis-server.exe redis.windows.conf

 

默认端口为6379,出现图上的图标说明redis服务启动成功。命令里面的 redis.windows.conf 可以省略,省略后,使用redis-server.exe命令会使用默认的配置。 

为了方便,建议把Redis路径配置到系统变量Path值中,这样就省得再输路径了。

(3)原来的Redis启动窗口不要关闭!!! 

重新打开一个cmd窗口,进入redis安装目录的路径下,我们使用redis-cli.exe命令来打开Redis客户端:

redis-cli.exe -h 127.0.0.1 -p 6379

在命令中输入ping命令来检测redis服务器与redis客户端的连通性,返回PONG则说明连接成功了。

如果出现连接不成功,注意服务打开以后,另启一个 cmd 窗口到Redis所在的目录执行命令,原来的Redis启动窗口不要关闭,不然就无法访问服务端了。

如果连接成功,到此Redis的安装和部署也就完成了。

【redis测试】

下面我们可以来进行一些基础操作来进行测试

Redis默认拥有16个数据库,初始默认使用0号库,在命令行中通过select命令将数据库切换到8号数据库:

select 8 

在命令中通过set命令设置键值,通过get命令取出键值:

在命令中通过shutdown命令来关闭redis服务。然后,在命令中通过shutdown命令来关闭redis服务:

  (4)修改application.yml配置文件中的相关Redis配置信息:

 

【测试】 

用户账号登录之后,可以看到,

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1036.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!