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#/

你可能感兴趣的:(架构设计,互联网技术栈,商户管理后台架构师设计)