空夜

前后端分离项目初体验——手把手教程+实例Demo
Web开发发展至今,前后端分离已经成为一种大趋势。今天我就以JavaWeb为示例来讲解一下前后端分离项目的构建、运...
扫描右侧二维码阅读全文
28
2019/02

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

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

示例项目的技术:

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

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

首先我们需要理解一个东西:一个常见的项目被启动后,通常是占用一个特定的端口号的,比如说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_demovue_demo两个项目,另附一份nginx.conf配置文件。

若要启动该示例,首先需要建立ssm_demo数据库,导入项目下的user.sql表。
然后分别启动ssm_demovue_demo两个项目,再启动nginx即可。
配置Nginx,使用Nginx配置中监听的端口(如示例中的8888)进行访问。


Last modification:February 28th, 2019 at 09:45 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment