启动Spring Boot+vue前后端分离的若依(RuoYi)项目

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

下载好的项目目录结构

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第1张图片

这是前端项目,其余为后端

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第2张图片

启动后端项目,需要完成以下步骤

1.连接本地数据库

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第3张图片

新建数据库

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第4张图片

导入这两张表

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第5张图片

键数据库,运行SQL文件...

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第6张图片

表结构

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第7张图片

2.启动redis

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第8张图片

下载Redis:Download | Redis

打开Redis安装路径,地址栏输入cmd,弹出命令行窗口,输入命令:redis-server.exe redis.windows.conf

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第9张图片

如有报错,查看博文:启动Spring Boot+vue前后端分离的若依(RuoYi)项目-CSDN博客

redis启动成功后,不要关闭

启动后端项目,运行RuoyiAppliction

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第10张图片

启动成功

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第11张图片

到浏览器输入:http://localhost:9090  (9090是我设置的端口,具体端口号查看application.yml文件中的serve.port)

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第12张图片

启动前端项目

打开编辑器,我用的是VSCode,打开ruoyi-ui项目

打开README.md文件,查看操作命令

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第13张图片

打开终端,输入命令 npm install 或 npm i  下载依赖包 

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第14张图片

下载完成

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第15张图片

由于我改动了后端端口号,故启动项目之前,需要改动一个地方 vue.config.js

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第16张图片

启动前端项目,在终端中执行命令:npm ren dev

运行成功

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第17张图片

到浏览器输入地址

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第18张图片

在此期间,遇到了两个问题

1.后端报Redis异常

Error in execution; nested exception is io.lettuce.core.RedisCommandExecutionException: 
MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk.
Commands that may modify the data set are disabled. Please check Redis logs for details about the error.

我的解决方法是:先结束Redis运行,Ctrl+C结束Redis运行,再次执行redis启动命令:redis-server.exe redis.windows.conf,后再次启动后端项目

2.启动前端项目出现异常

据官方所说,获取token失败,是版本问题

获取用户信息异常'JWT strings must contain exactly 2 period characters. Found: 0'

启动Spring Boot+vue前后端分离的若依(RuoYi)项目_第19张图片

解决方法是:删除浏览器缓存,关闭浏览器,再次输入地址http://localhost:80/

你可能感兴趣的:(vue.js,spring,boot,前端)