Web开发发展至今,前后端分离已经成为一种大趋势。今天我就以JavaWeb为示例来讲解一下前后端分离项目的构建、运行与开发。
示例项目的技术:
Vue.js
SpringBoot2.0
+ SSM
框架Nginx
解决请求转接与跨域问题项目源码地址:springboot-examples/ssm_vue
首先我们需要理解一个东西:一个常见的项目被启动后,通常是占用一个特定的端口号的,比如说8080。而如果项目被划分成前端项目与后端项目时,它们是如何划分的呢?占用的还是一个端口么?前端项目又是如何被启动的?
下面由我细细道来。
首先,前后端划分的标准很简单,所有页面部分(html,js,css)这些东西归前端,其他部分归后端。
就项目启动看,以npm为基础的vue.js项目,前端项目启动后同样是绑定在某个端口上的(这个端口号可以不指定,由系统从8080开始自动进行赋值)。前后端会分别占用操作系统的一个端口。
还有一个问题,前后端项目都启动后,我要如何从前端去请求我的后端接口呢?我要把后端端口号也配置在前端里面以便它去访问?而由此而来的还有一个问题,这就相当于在一个网站中调用另一个网站的内容(注意,这里的第二个网站指的是后端项目),这将导致跨域问题,使得请求失败。
有关这一点,我需要通过某种手段、工具,来让前端去正确地访问后端接口,最好还不需要前端知道我的后端端口号是什么。Nginx
可以较为完美地解决以上问题。
下面,让我们来一步步地实现一个简单的前后端分离项目。
参考我的另一篇博客:SpringBoot项目创建与第一个SSM项目示例
这篇博客详细描述了如何使用STS(springtoolsuite,一个eclipse的变种)来构建一个SpringBoot下的SSM项目。使用IDEA创建的步骤也基本一致。
下面我们来创建一个vue.js项目作为独立的前端项目。
参考我的另一篇博客:vue.js环境配置到项目创建与第一个示例
这篇博客主要描述了如何从零开始去创建一个vue.js项目并启动运行它。为了方便测试,添加一个登录页面到项目中——详细代码到我的Git仓库查看:
你可以使用npm命令行创建该项目,也可以使用如webstorm之类的开发工具来创建。
这表示我们的前端项目已经成功启动了。
下面我们还差一个步骤,如何让我们的前端项目能够访问到后端接口呢。
我使用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
访问前端项目的效果相同。输入数据库中对应的账户信息,点击登录,可以看到成功跳转至首页:
至此,我们已经成功创建了一个前后端分离的项目,并且使用代理解决了前后端请求的问题。
项目源码地址:springboot-examples/ssm_vue
目录下分为ssm_demo
和vue_demo
两个项目,另附一份nginx.conf
配置文件。
若要启动该示例,首先需要建立ssm_demo
数据库,导入项目下的user.sql
表。
然后分别启动ssm_demo
和vue_demo
两个项目,再启动nginx
即可。
配置Nginx
,使用Nginx
配置中监听的端口(如示例中的8888)进行访问。