一个实际的案例介绍Spring Boot + Vue 前后端分离

2017-11-19 本文已影响10209人有点胖的小乐乐

介绍

最近在工作中做个新项目，后端选用Spring Boot，前端选用Vue技术。众所周知现在开发都是前后端分离，本文就将介绍一种前后端分离方式。

常规的开发方式

采用Spring Boot 开发项目开发项目常规的方式其实很简单，无非还是采用原来Spring Mvc那一套，建控制器（Controller）然后建方法（action）再添加模板引擎（spring boot 推荐使用thymeleaf）这样开发开起来其实也没有大问题，毕竟是采用了MVC的思想，在一定程度上开发起来还是很方便的。但是如果在分工很细的情况下，这里前端后端是是分离开的，那么假如前端的同学需要加个页面那么就要找后端得到同学给他加，想想一个复杂的项目，好多页面，这样开发方式肯定不是一个好的方案，如何解决这个问题呢？让我们慢慢的一步一步的深入解答。

MVVM

什么是MVVM？其实这是一个前端概念，本人是后端开发，其实对前端不是很了解，但是本人也是.Net开发人员，.Net中的WPF中其中一个核心是MVVM，最近手上一个项目也在用WPF，所以对MVVM还是有点个人的理解。从表面上理解Model-View-ViewModel那就是实体-视图-视图实体，好像有点明白，是不是实体可以到视图，视图也可以到实体，在想下，是不是数据可以从实体到视图，也可以从视图到实体，在用一个高大上的名字，那就是数据双向绑定。是的MVVM其实就是一种数据双向绑定的思想。

SPA(Single Page Application)

SPA翻译成中文就是单页面应用，其实从名字也可以看出来，所谓的单页面应用，就是整个web项目只需要一个页面就可以，这个怎么实现的呢。我想起了我之前用jquery的时候（似乎现在说写jquery有点被鄙视，哈哈），用jquery写过瀑布流，瀑布流的思想很简单，就是下拉触发一个事件，在这个事件里面请求一个后台接口，然后得到结果，将结果append到页面上。那单页面是不是跟append效果类似。可能优化了性能。（前端的同学可能要喷我，本来高大上的东西，被我说的这么low）。我已知的前端的单页面框架有：vue，AngularJS。我们使用的是vue，这个东西不管前端还是后端估计不知道的人很少了。

Spring Boot + Vue 使前后端分离

之前说过了，常规的spring mvc 开发其实也很难完全的前后端分离。前端的同学要加页面需要找后端的同学给加。那么我们可以只建一个页面，前端使用vue，构建一个单页面应用。这样前端可以完全不用依赖后端了，在项目创建的时候，就创建一个页面，也不需要把js，css等静态资源加到spring boot项目里面，把静态资源放到静态资源服务器上（可以放到CDN上），前端去维护静态资源就好了。那么其实只要在我们创建的一个页面上加上一个总的JS，总的CSS，再在js里面引用其他的js或者css，这样在一个页面上其实加的东西不多，这样做前端对后端的依赖大大减少。那么问题来了，就是都这样，为何不干脆不完全的把前端和后端分离开，后端连一个页面都不用了，只提供接口。前端自己弄个服务来承载就好了。其实这样行不行？
其实也行，但是至少需要考虑两点：1.单独为前端开一个服务来承载是不是合算2.解决接口调用跨域问题（其实就是在配个nginx转发，但是增加发布配置）。其实还有可能遇到不得不用后端模板引擎来控制的情况。其实我觉得完全的前后端分离在我看来并不是一个合适的方案。所以我们仍然选用在后端提供一个页面来供前端使用，前端在这个页面上做单页面应用的方式。前面为什么介绍MVVM，个人观点vue搭配mvvm会不会很爽（本人没试过，但是写wpf mvvm超级爽，所以推荐）。

Show Code

俗话说的好，别总BB，show your code。下面我开始搭建一个demo。在搭建之前先来在讨论下vue，vue开发的时候需要自建一个服务，来开发调试，开发完成了可以将vue打包编译成普通的静态资源js或者css。在正式的项目中将打包编译后的静态资源放到静态资源服务器上或者cnd上，我们直接用打包编译后的静态资源就好了。这样在开发的时候，前端需要开启一个服务来开发和测试，那么在开发调试的时候要调用后端的接口，就会出现跨域情况，所以在开发过程需要解决跨域问题。这在后面会配置一个nginx用以解决跨域问题。

后端搭建

创建Spring boot 项目我就不说了。我直接搭建展示目录。

后端目录

直接运行结果：

后端运行

vue项目搭建

关于vue项目搭建我直接百度的（哈哈）。我在这装X总结下。

安装node.js
安装淘宝镜像（不然会慢的一X）
全局安装webpack cnpm install webpack -g
全局安装vue-cli (cnpm install -g vue-cli)
(用webpack模板来创建一个vue项目)vue init webpack my-project
安装项目依赖 cd my-project / cnpm install
启动项目
编译vue为静态文件(npm run build)

如下图是我创建后的vue项目，已经运行结果。

vue项目目录

运行结果

编译之后的文件路径：

编译之后的

我们看下index.html的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>front</title>
<link href=/static/css/app.46520b505f33694e3eee33aba78b61eb.css rel=stylesheet>
</head><body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.3322ba91290e7480ffb3.js>
</script>
<script type=text/javascript src=/static/js/vendor.13ccb5cb8cfc8644879c.js></script>
<script type=text/javascript src=/static/js/app.3c073d6bceb68d30b32f.js></script>
</body>
</html>

其实就是引用js或者css文件,没有其他的，这相当与vue项目的入口，只引用一些主要的js或者的css，其他的js或者css，会在主要的js里面import（java里面叫添加包，其实应该是类似的概念）

反正文件都是这样的，据说可以设置。
以上相当于一个vue的Hello World。（有学一门新语言的感觉）

在spring boot 引入静态文件

为了演示一个静态资源服务器，我在本机开启一个nginx，来承载静态资源。
对nginx进行了简单的配置，直接将根目录指向vue生成的目录

server {

        listen 80;
        server_name localhost;
        root   D:\xxx\xxx\xxx\springboot-vue-sample\front\dist;
        index  index.php index.html index.htm;
        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;
        #rewrite_log on;
    }

运行一下看下效果：