摘要：
Web开发发展至今，前后端分离已经成为一种大趋势。今天我就以JavaWeb为示例来讲解一下前后端分离项目的构建、运行与开发。示例项目的技术：前端–Vue... Web开发发展至今，前后端分离已经成为一种大趋势。今天我就以JavaWeb为示例来讲解一下前后端分离项目的构建、运行与开发。
示例项目的技术：
项目源码地址：springboot-examples/ssm_vue
注：由于最近在调整Git上的项目，导致本节指向的示例项目暂时不可以访问了。
有关前后端分离的一些思考（此部分可略过）
首先我们需要理解一个东西：一个常见的项目被启动后，通常是占用一个特定的端口号的，比如说8080。而如果项目被划分成前端项目与后端项目时，它们是如何划分的呢？占用的还是一个端口么？前端项目又是如何被启动的？
下面由我细细道来。
首先，前后端划分的标准很简单，所有页面部分（html，js，css）这些东西归前端，其他部分归后端。
就项目启动看，以npm为基础的vue.js项目，前端项目启动后同样是绑定在某个端口上的（这个端口号可以不指定，由系统从8080开始自动进行赋值）。前后端会分别占用操作系统的一个端口。
还有一个问题，前后端项目都启动后，我要如何从前端去请求我的后端接口呢？我要把后端端口号也配置在前端里面以便它去访问？而由此而来的还有一个问题，这就相当于在一个网站中调用另一个网站的内容（注意，这里的第二个网站指的是后端项目），这将导致跨域问题，使得请求失败。
有关这一点，我需要通过某种手段、工具，来让前端去正确地访问后端接口，最好还不需要前端知道我的后端端口号是什么。Nginx可以较为完美地解决以上问题。
下面，让我们来一步步地实现一个简单的前后端分离项目。
构建后端项目——SpringBoot + SSM
参考我的另一篇博客：SpringBoot项目创建与第一个SSM项目示例
这篇博客详细描述了如何使用STS（springtoolsuite，一个eclipse的变种）来构建一个SpringBoot下的SSM项目。使用IDEA创建的步骤也基本一致。
启动这个项目，控制台如下：
下面我们来创建一个vue.js项目作为独立的前端项目。
构建前端项目——Vue.js
参考我的另一篇博客：vue.js环境配置到项目创建与第一个示例
这篇博客主要描述了如何从零开始去创建一个vue.js项目并启动运行它。为了方便测试，添加一个登录页面到项目中——详细代码到我的Git仓库查看：
你可以使用npm命令行创建该项目，也可以使用如webstorm之类的开发工具来创建。
打开浏览器，输入localhost:8080，界面如下：
这表示我们的前端项目已经成功启动了。
下面我们还差一个步骤，如何让我们的前端项目能够访问到后端接口呢。
我使用nginx代理来解决这个问题，同时，使用nginx还能避免跨域问题的出现。
让前端访问后端接口&Nginx解决跨域问题
习惯于前后端统一开发的人可能很少遇到跨域问题，可以先看看这篇博客：什么是跨域？怎么解决跨域问题？
简单来说呢，跨域就是在一个网站里，直接地去访问另外一个网站的数据，由于域名、IP、端口的不同，根据浏览器的安全策略，产生了跨域问题，这将导致你是无法直接用前端去调用后端接口的，控制台将产生如下错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource.
然后来看一下如何使用Nginx代理转发前端请求和后端请求：Nginx配置前后端分离项目代理–解决跨域问题
比如对于我的示例项目，是如下配置的：
server {
listen 8988;
server_name 127.0.0.1;
location / {
proxy_pass http://127.0.0.1:8090;
}
location /api {
proxy_pass http://127.0.0.1:8181;
proxy_set_header Host $http_host;
}
}
配置完成后，启动nginx。在浏览器中输入nginx监听的端口：localhost:8988，界面如下：
可以看到这个界面和上面直接使用localhost:8080访问前端项目的效果相同。输入数据库中对应的账户信息，点击登录，可以看到成功跳转至首页：
至此，我们已经成功创建了一个前后端分离的项目，并且使用代理解决了前后端请求的问题。
一个完整的Demo与源码地址
项目源码地址：springboot-examples/ssm_vue
目录下分为ssm_demo和vue_demo两个项目，另附一份nginx.conf配置文件。
若要启动该示例，首先需要建立ssm_demo数据库，导入项目下的user.sql表。
然后分别启动ssm_demo和vue_demo两个项目，再启动nginx即可。
配置Nginx，使用Nginx配置中监听的端口（如示例中的8888）进行访问。
加入微信群
添加我的个人微信，备注 加群 即可。欢迎大家加入，一起分享学习和开发中遇到的问题！
