Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +bootstrap 之一vue和spring boot整合
来源:互联网 发布:深圳小拨网络 skype 编辑:程序博客网 时间:2024/05/01 08:53
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格式文件端视图解析器为FreeMarkerViewResolverpublic 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#/
阅读全文
0 0
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +bootstrap 之一vue和spring boot整合
- spring boot 整合swagger
- Spring boot 整合Swagger
- spring boot整合shiro
- spring boot shiro整合
- spring boot vue Thymeleaf
- Spring Boot 整合 Mybatis 和 MySQL
- spring boot +mybatis+shiro
- spring boot和mybatis整合
- 【Spring Cloud】spring boot搭建+swagger-ui
- Spring Boot整合MyBatis
- spring boot 整合mybatis
- Spring Boot整合MyBatis
- Spring-boot整合Mybatis
- Spring Boot整合MyBatis
- spring boot 整合mybatis
- Spring Boot整合Mybatis
- spring boot mybatis整合
- 用profile协助程序性能优化
- 同态滤波用于光照不均匀校正
- 字节、字、bit、byte的关系
- CSS选择器的权重问题
- C语言各种操作符介绍
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +bootstrap 之一vue和spring boot整合
- 大型网站图片服务器架构的演进
- 人工智能,离我们还远么?
- 方法重载
- python3 cPickle
- 成功是可以复制的
- JavaScript中的工厂方法、构造函数与class
- MongoDB的地理位置搜索GeoSearch使用方法探索
- lintcode--132模式