前后端分离项目如何部署_前后端分离怎么实现[通俗易懂]

记录一下在全新的电脑上搭建前后端分离项目的全过程，方便下次继续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了各种出现问题。最后附上一张我的安装图吧。

今天的文章前后端分离项目如何部署_前后端分离怎么实现[通俗易懂]分享到此就结束了，感谢您的阅读。