前言

现在，开发系统是一个很火的潮流，尤其是随着数据的越来越大，前后端分离就变得势在必行，这两天刚好要开题，就跑了一个前后端分离的代码。首先我们介绍后端的流程

后端的相关操作

我们后端运行的框架就是流行的SSM(SpringMVC+Spring+mybatis )框架。这个框架下的代码示意图如图所示：

一、运行前准备：

1、首先下载jdk，然后将其在自己电脑上进行配置环境变量，配置过程网上很多，因此就不多说了。最后配置好之后，一定要进行检查，结果如图所示：

2、接着安装eclipse或者IDEA。

3、通过eclipse或者IDEA工具上安装Apache-maven。

4、在官网下载安装mysql5.7。

5、由于在启动项目时，需要redis作为数据缓存，因此我们还的下载redis

到此为止，我们后端的环境就已经搭好了，这里需要注意的是：我们安装的相关服务必须装在全英文的路径下，系统不识别中文，否则有可能会报错。接下来就要配置我们的服务了。将该项目导入eclipse中。找到src/main/resources包下的application.yml配置文件，具体位置如图所示：

然后找到mysql的地方，将数据库名和密码换成自己对应的，否则是连不上的。具体如图所示：

一般到此我们就可以运行了，不过也有少部分人将自己的redis设置密码，这个时候还得在配置文件设置自己的密码。具体如下图所示：

二、启动后台服务

1、在redis所在的地方启动redis

2、在你项目所在的位置将其打包，例如我的项目位置在

F:java_progressnlp_backendnlp_backend

然后利用win+R快捷键启动该黑屏终端。然后再该黑屏终端输入如下命令：

mvn cleanmnv install

具体操作如下：

运行成功之后会出现一个target包，如图所示：

我们进入该target包，然后再次打开黑屏终端，输入如下命令启动后台：

java -jar xxx.jar  //这里为了以防输入拼写错误，我们最好输入前三个字母后，按Tab键自动将其补全

但是在启动之前，确保你的redis和mysql服务是开启的，否则会报拒绝连接的错误。具体操作如下：

上面黄色字体大家可能看不清楚，意思是只要后台出现Started SpringBootStartUp in 13.897 seconds字样时，就说明我们后台启动成功了。接下来不能关了后台，因为运行前端代码，后台必须开启。接下来我们开启前端服务。

前端的相关操作

我们前端采用的是流行的HTML+Vue框架，运行的环境是nodejs。同样的，我们首先看前端的框架，具体框架如图所示：

一、运行前准备：

1、首先在官网下载并安装nginx，并且将tomcat配置进去。首先我们打开nginx所在目录，并且利用start nginx启动nginx。接下来打来nginx.conf配置文件将其对应的后端配置upstream以及相应的location。具体输入以下命令：

upstream backend {          server 127.0.0.1:8000;      }location ^~ /my_app/ {                proxy_pass http://backend;        }

具体配置如下图所示：

这里需要注意的是：upstream的名字必须与你后端的名字一致；并且在location配置的时候也是必须要写你后端项目的名字。然后保存该配置，重新启动nginx服务。

2、接下来下载并安装以及配置nodejs。配置好之后一定要检查。在黑屏终端中输入如下命令

node -vnpm -v

具体过程如下图

3、用npm安装cnpm库，并且要将其配置环境变量。安装完成后检查如下：

cnpm -v

到此为止，我们前端运行环境搭建完毕，同样需要注意的是，我们的所安装的路径必须是全英文的。接下来我们启动前端。

二、启动前台系统

1、在启动之前确保nginx启动成功。并且保证后台服务器开启正常。

2、在前端项目所在位置打开黑屏终端，输入以下命令：

cnpm clearcnpm install

具体效果如下图：

运行完成该命令后，该项目路径下会出现一个node_modules包，如下图所示：

3、接下来在该项目的路径下打开黑屏终端，然后输入以下命令：

启动成功后在浏览器输入localhost:8080打开网页。具体如下图所示：

到此为止，前台启动成功。

总结

随着数据不断增大，客户的需求也来越复杂，系统的结构也会很多，因此，前后端分离是大势所趋，借此机会，大致学了如何启动一个前后端分离的web项目以及相关的环境搭建，谨以此作为笔记供自己观看，同时也希望能够给学web开发的小伙伴们带来一点启发，如果以后有时间会随时更新的。