Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之一vue和spring boot整合

1 为什么是vue+spring boot

技术选型
核心框架：Spring Boot 1.5
安全框架：Apache Shiro 1.3
视图框架：Spring MVC 4.3
持久层框架：MyBatis 3.3
定时器：Quartz 2.3
数据库连接池：Druid 1.0
日志管理：SLF4J 1.7、Log4j
页面交互：Vue2.x

为什么是MVVM

那么在我继续之前，我也想和大家回顾一下Web开发的发展简史：

第一阶段: 网页三剑客，生猛的通过原生javascript直接操作Dom树;

第二阶段: JQuery诞生，配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;

第三阶段: 后端架构升级为MVC，前后端分工更清晰，前端工程化、ECMAScript规范开始崭露头角;

第四阶段: 后端架构进入了微服务时代，前端架构不仅升级为MVVM，ES6更是成为目前事实上的标准;

在这里，我不想过于神化MVVM有多么的先进，JQuery为代表的MVC有多么的落后，但确实MVVM有着很多先进的特性:

低开销

易维护

可重用

为什么选择Vue.js

Vue.js是MVVM设计模式中目前最火热的一个前端框架之一，除了性能表现优异之外，与类似React相比，更轻量级、更容易上手。

通过Vue中的“单文件组件”特性，更灵活的定义组件，不仅使代码结构更清晰，而且能与任何其他组件进行随意组合，更具复用性。

Webpack是什么

Webpack提供了一整套前端工程自动化的解决方案
使用vue官方的脚手架创建单独的前端工程项目，做到和后端完全独立开发和部署，后端单独部署一个纯restful的服务，而前端直接采用nginx来部署，这种称为完全的前后端分离架构开发模式，但是在分离中有很多api权限的问题需要解决，包括部署后的vue router路由需要在nginx中配置rewrite规则。

针对这种情况这里采用的在开发中做到前后端独立开发，整个开发方式和上面提到的第二种方式是相同的，但是在后端springboot打包发布时将前端的构建输出一起打入，最后只需部署springboot的项目即可，无需再安装nginx服务器

2. spring boot + vue 实战分析

项目采用前后端分离，并行开发，前端工程为flow-platform-manage-html，后端项目为flow-platform-manage。

前端： Vue+webpack

后端：spring boot +spring MVC+swagger-UI+mybatis +Shiro

 maven依赖，前端项目打进后端项目

<dependency>
<groupId>com.puhui.flowplatform</groupId>
<artifactId>flow-platform-manage-html</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>

 复写静态资源访问，前端工程部署后会生成到dist目录下，稍后分析前端项目打包具体过程

@Override

//静态资源
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/swagger-ui.html").addResourceLocations(
ResourceUtils.CLASSPATH_URL_PREFIX + "/META-INF/resources/");
registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/",
ResourceUtils.CLASSPATH_URL_PREFIX + "/dist/static/");
registry.addResourceHandler("/page/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/dist/");
super.addResourceHandlers(registry);
}

@Bean

//指定ftl格式文件端视图解析器为FreeMarkerViewResolver
public ViewResolver viewResolver() {
FreeMarkerViewResolver resolver = new FreeMarkerViewResolver();
resolver.setCache(true);
resolver.setPrefix(ResourceUtils.CLASSPATH_URL_PREFIX + "templates/");
resolver.setSuffix(".ftl");
resolver.setContentType("text/html; charset=UTF-8");
return resolver;
}

启动spring boot 项目 http://localhost:8080/page/index.html#/