前后端分离项目初体验——手把手教程+实例Demo

Web开发发展至今，前后端分离已经成为一种大趋势。今天我就以JavaWeb为示例来讲解一下前后端分离项目的构建、运行与开发。

示例项目的技术：

• 前端–Vue.js
• 后端–SpringBoot2.0 + SSM框架
• 使用Nginx解决请求转接与跨域问题

项目源码地址：springboot-examples/ssm_vue

有关前后端分离的一些思考（此部分可略过）

首先我们需要理解一个东西：一个常见的项目被启动后，通常是占用一个特定的端口号的，比如说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）进行访问。

---