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.flowplatformgroupId>
   <artifactId>flow-platform-manage-htmlartifactId>
   <version>0.0.1-SNAPSHOTversion>
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#/