前后端分离项目全环境搭建（Ruoyi框架）

已于 2022-12-01 13:46:40 修改
阅读量4.6k 收藏 38
点赞数 6
分类专栏： 前后端分离项目入门全环境搭建 汇报用的 文章标签： vue.js vscode 后端 java spring boot
于 2022-09-05 14:15:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39367410/article/details/126703562
版权

记录一下在全新的电脑上搭建前后端分离项目的全过程，方便下次继续Copy。（以Ruoyi框架为例子进行操作）

目录

前端

1、VsCode

2、NodeJs

后端

JDK

 idea

Tomcat

Maven

Redis

mysql

 跑Sql文件的办法有三种：

推荐：Navicat（公司不让用）

IDEA自带的database（安全值得相信）

直接用mysql的自带的直接走cmd来操作数据库（不能可视化，不推荐）

Git

Idea配置tomcat

idea配置maven

总结 

前端

1、VsCode

首先下载vscode，我习惯用vscode编写前端代码，直接所有默认安装就行了。
vscode下载网址如下:
Download Visual Studio Code - Mac, Linux, Windows

2、NodeJs

搭建前端必备环境：nodejs，nodejs官网网址：
Download | Node.js

在这里插入图片描述

 这里提示一下，大部分软件都有msi模式和zip模式，msi为镜像文件，通过安装使用，zip是压缩的二进制文件，直接解压就可以使用，不过通常要配置环境变量。环境变量的配置很简单，而且大部分都一样，自行百度各种软件的环境变量配置方法。这里演示nodejs的配置方法，我的所有软件都放置在D盘的soft中，如下所示：
在这里插入图片描述

因此我的nodejs环境变量配置成如下，记得把NODE_PATH也配置到系统的path中去，NODE_PATH是npm的路径，如下：在这里插入图片描述 

在这里插入图片描述

在这里插入图片描述

配置完每一个功能，检查是否配置成功很关键，win + R 打开命令提示符，输入node -v查看版本，显示如下说明配置成功，如果报npm不是内部可执行命令，一般就是node的环境变量没有配置对，检查一下。

在这里插入图片描述

打开vscode，点击file-》open folder -》ruoyi-ui，打开若依的前端代码，然后打开src，在app.vue上右键，点击open in integrated terminal

在这里插入图片描述

在这里插入图片描述

 然后输入 npm run dev 便可启动前端，成功的前端界面如下所示：

在这里插入图片描述

这里的二维码显示不出来，并且会报404，因为我们的后端还没起来，到这里前端的环境就配置好了。

后端

JDK

安装jdk就很简单了，直接去官网下：Java Downloads | Oracle
需要注意的也是环境变量的配置，检查是否配置成功，直接去cmd中输入java -version查看是否出现版本信息，如果出现了，代表配置成功。

在这里插入图片描述

 idea

下载直接就在官网下载就行了

使用方式：

1、自用版（适合各种学校、自学小伙伴）：
百度自己找把第一个就是

2、购买版本（因为在公司不让用自用版，所以在淘宝买的1年10块钱，放一个链接吧）：

Idea购买链接（淘宝，无广）

3、常用的IDEA插件

IDEA必备插件_pingcode的博客-CSDN博客_idea插件

Tomcat

tomcat安装请参考这篇博客，讲解的非常详细。

Tomcat的下载与安装配置 - 知乎

Maven

maven也一样，下载，配置环境变量。
Maven – Download Apache Maven

Redis

redis也一样，下载，配置环境变量。

下载链接：

https://github.com/tporadowski/redis/releases

配置链接：

若依ruoyi前后端分离版本部署全过程_天地神仙的博客-CSDN博客_ruoyi前后端分离部署

mysql

主要有安装版和免安装版两种，我都用过了，还是感觉安装版的是那个老味道。

mysql安装教程【安装版】_超级小的大西瓜的博客-CSDN博客_mysql安装教程

安装之后记得把sql文件跑起来，就是这个文件夹里的quartz.sql跟ry_20220822.sql这俩文件

 跑Sql文件的办法有三种：

推荐：Navicat（因为版权原因，公司不让用）

navicat下载安装

IDEA自带的database（安全值得相信）

使用IDEA进行数据库操作_Little_Sirius的博客-CSDN博客_idea 数据库

直接用mysql的自带的直接走cmd来操作数据库（不能可视化，不推荐）

mysql执行sql脚本文件-mysql教程-PHP中文网

小技巧：一个文件的位置不用输入，直接把文件拖到cmd里就可以

Git

gitee最详细使用教程，汇总了全网，看这一篇就够了_编程图一乐的博客-CSDN博客_gitee使用教程

Idea配置tomcat

IDEA 2020 配置Tomcat_你不懂、、、的博客-CSDN博客_idea配置tomcat

idea配置maven

在IDEA中配置及使用Maven的全过程 - 知乎

配置完之后，在idea中打开若依的后端代码，修改数据库配置，修改成为如下：

在这里插入图片描述

 然后在这里执行启动操作：

在这里插入图片描述

进入vscode，按住ctrl 然后鼠标左键点击local的网址，进入登陆界面：

在这里插入图片描述

在这里插入图片描述

总结 

各个软件环环相扣，基本上一个不行就都不行，一定要注意每次安装好一个都要测试可用性，我觉得最麻烦的就是那个mysql了各种出现问题。最后附上一张我的安装图吧。

迷人的小松子
关注
  • 6
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 1万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
若依框架(RuoYi)系列视频教程 RuoYi-Vue前后端分离版本 118集
06-10
├──01 项目概述.mp4 82.26M ├──02 项目运行.mp4 54.43M ├──03 构建发布到Linux.mp4 41.68M ├──04 系统菜单介绍.mp4 64.41M ├──05 开发环境运行.mp4 34.77M ├──06 表结构介绍.mp4 76.26M ├──07 目录文件介绍.mp4 65.53M ├──08 主配置文件介绍.mp4 69.64M ├──09 Spring Boot 简介.mp4 32.75M ├──10 Spring Security 简介.mp4 18.37M ├──100 主子表代码生成详解.mp4 32.85M ├──101 3.4.0版本更新介绍.mp4 122.82M ├──102 使用undertow容器.mp4 23.32M ├──103 实现优雅关闭应用.mp4 13.40M ├──104 实现swagger文档增强.mp4 14.83M ├──105 实现excel表格增强.mp4 45.81M ├──106 实现mybatis增强.mp4 67.43M ├──107 实现离线IP地址定位.mp4 35.40M
ruoyi框架前后端交互教程.docx
03-05
ruoyi框架前后端交互的细节分析，帮助你入门....
【系统功能开发篇】若依开源项目RuoYi-Cloud前端技术介绍
最新发布
分享是一种境界，勤于分享，乐于分享！
03-30 765
由于本专栏项目实战学习，是以若依开源项目RuoYi-Cloud为示例。所以，本文介绍一下若依开源项目RuoYi-Cloud前端技术；若依项目RuoYi-Cloud简介若依项目RuoYi-Cloud 是一个 Java EE 企业级的开源免费的快速开发平台，是一个基于Spring Boot、Spring Cloud & Alibaba的微服务的权限管理系统。如果想快速的开发一个Java EE 企业级项目，可以在若依项目的基础上，开发定制自己的项目。
Docker容器部署RuoYi-Vue前后端分离项目
06-06
Docker容器部署RuoYi-Vue前后端分离项目 此次部署项目是我亲身经历，而且是一次性部署成功，没有部署超过两次甚至多次的情况，过程虽然很艰难，但结果还是很满意的，我希望大家用心去部署这个项目，你会发现部署这个项目其实不难
RuoYi前后端不分离项目整合LDAP
07-06
基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合 基于RuoYi框架，使用的是ruoyi前后端不分离的版本，实现对LDAP的整合
前后端分离：springboot+vue
01-22
自己整理的一套非常好的前后端分离项目，后端用springboot，前端用vue
若依前后端分离版部署
qq_48049033的博客
07-02 4149
若依部署
前后端分离项目-后端接口入门开发手记
jl15988
11-01 4747
在我们的业务逻辑中，可能需要自定义异常来抛出，由全局异常处理类来处理，这个时候考虑到返回的状态码和异常信息的不同，我们需要自定义异常类来配合全局异常处理在com.myblog包下创建common.lang包，并创建MyBlogException类，如下/**super(msg);super(msg);super(msg);} }然后我们就可以使用自定义的异常类来抛出异常了，如修改list接口。
手把手教你部署ruoyi前后端分离版本并解决部署到服务器上的Nginx后页面登录后点击注销显示Nginx404页面
qq3892997的博客
02-12 1万+
手把手教你部署ruoyi前后端分离版本+注意事项
若依框架部署从零开始2023版（前后端分离）
美好的事情即将发生！
03-11 4304
电脑最近重装了一次系统，目前什么都没有安装，记录一下从零开始部署前后端分离版本的若依框架系统先去官网把若依源码拉下来。
JAVA著名免费框架若依前后端分离项目详细部署文档
08-21
第一部分：部署linux + nginx 第二部分：部署Windows+tomcat 第三部分：调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发，使用代码生成器可以一键生成前后端代码。）
若依前后端分离项目部署文档（完整版）
04-07
第一部分：部署linux + nginx 第二部分：部署Windows+tomcat 第三部分：调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发，使用代码生成器可以一键生成前后端代码。）
RuoYi-Vue-fast-master_ruoyi项目_vuefast_若依前后端分离项目_
10-03
测试上传
详解vue.js+UEditor集成 [前后端分离项目]
12-09
虽然是后端的管理项目，但整体项目，是采用前后端分离的方式完成，这样做的目的也是产品化的需求； 前端，vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建，其中用到了superUI来作为后端登陆之后的主...
Centos7 部署若依前后端分离项目
01-09
nginx配置文件二、Centos7 环境准备2.1. 安装mysql并启动2.2. 安装redis并启动2.3. 安装nginx 和配置nginx.conf文件三、测试验证3.1. 上传准备好的文件3.2. 启动后端项目3.3. 登录验证.附上完整的nginx配置文件 一...
云服务器部署前后端分离项目（若依）详细教程
热门推荐
m0_60028455的博客
05-11 1万+
镜像下载、域名解析、时间同步请点击 阿里云开源镜像站 第一次在Linux云服务器上部署前后端分离项目，查了很多资料和视频，踩了许多坑。成功实现部署若依的前后端分离项目后，想记录一下前后端部署的过程，供学习的小伙伴参考。 1.环境准备 一定要在开始前先准备好以下工具和环境（可以上网查找安装的方法），后续还会对其进行修改： 购买一个云服务器，例如阿里云等等，操作系统为Linux centos7.x 在云服务器上安装Nodejs（之前的博客有安装方法） 在云服务器上安装Nginx 在云服务器上安装jdk1.8+
【前后端分离项目】搭建前后端分离项目框架（vue前端）
m0_57082679的博客
05-10 885
nodejs中自带了npm包，npm负责管理依赖，将nodejs下载完成后，即可使用npm创建工程以及下载依赖。下载完成后，在创建的文件夹地址栏中，输入cmd命令，进入黑窗口，查看自己的nodejs版本以及npm版本。继续回车，输入n(表示不保存这次的配置)，当出现如下图的两行，表示项目已经创建好了，并且依赖也配好了。在package.json文件中，找到serve，输入–open，即可实现自启动。输入之后点击回车，出现如下界面，选择最后一项：手动选择功能，继续回车。继续回车，选择3版本。
SpringBoot+Security+Vue前后端分离开发权限管理系统
04-10
适用人群所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring Boot2MVC框架 开发的一站式解决方案Spring Security5 认证和授权框架MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架MyBatisCode工具生成 MyBatis 相关代码Jackson提供了处理 JSON 数据的工具Lombok简化对象封装工具 Druid   数据库连接池 【前端技术】Vue       互联网最火的前端框架Vue Router路由框架Vuex全局状态管理框架Axios前端 HTTP 框架Element UI前端 UI 框架Vue Element Admin前端模板Antv  蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV【开发工具】IntelliJ IDEA开发 IDESQLyog数据库连接客户端PostmanHTTP 请求工具【开发环境】工具版本JDK1.8MySQL5.7
若依框架前后端分离版
07-27
要搭建若依框架前后端分离版，需要满足以下环境要求： - JDK >= 1.8 (推荐1.8版本) - MySQL >= 5.7.0 (推荐5.7版本) - Maven >= 3.0 - Node >= 12.0 - Redis >= 5\[2\] 在搭建环境完成后，可以执行相应的命令来启动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值