如今Web开发领域,当有人提到Java时,总会让人觉得臃肿、古老而过时且开发效率没有某些动态语言高效,甚至在此之前还有人高喊 “Java 已死!”,但是事实真是如此吗?其实如果你一直关注着Java,那你的感悟会更深,尽管它有很多的缺点和啰嗦,但不可否认,Java依然是工业界中最优秀的语言,而且它一直保持着与时俱进。本项目将使用SpringBoot + Vue2 + Webpack2 配合最简单CRUD的逻辑来展示一个基于Java的微服务全栈快速开发实践的Demo。
在某些时候,其开发效率已经并不比某些动态语言低。
这份小礼物,将献给所有刚走出校园、献给和我一样即将步入不惑之年、献给所有热爱开源的伙伴们,也纪念我入行6周年,Our Freedom~!
首先先来简单的介绍一下Spring,它是目前Java生态中最广为人知、流行的企业级Web框架。不像其他一些框架仅聚焦在某个领域,Spring框架通过其容器化组件式管理及开发,可提供或定制各式各样的功能来满足企业化需求。
那么相较于Spring,Spring Boot的目标是更加容易的创建Spring应用、建立自动化、最少人为干预的生产级配置,真正意义做到开箱即用,并且对于新用户及Spring平台的用户极易上手,快速开发。
下图主要展示了Spring Boot在Spring庞大的生态圈中的层级关系
SpringBoot的目标主要:
为所有Spring开发提供一个从根本上更快,且随处可得的入门体验。
开箱即用,但通过不采用默认设置可以快速摆脱这种方式。
提供一系列大型项目常用的非功能性特征,比如:内嵌服务器,安全,指标,健康检测,外部化配置。
绝对没有代码生成,也不需要XML配置。
下面展示的是本项目的SpringBoot相关代码片段,你觉得简单么?
@RestController @RequestMapping("/api/persons") public class MainController { @RequestMapping( value = "/detail/{id}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE ) public ResponseEntity<Persons> getUserDetail(@PathVariable Long id) { /* * @api {GET} /api/persons/detail/:id details info * @apiName GetPersonDetails * @apiGroup Info Manage * @apiVersion 1.0.0 * * @apiExample {httpie} Example usage: * * http GET http://127.0.0.1:8000/api/persons/detail/1 * * @apiSuccess {String} email * @apiSuccess {String} id * @apiSuccess {String} phone * @apiSuccess {String} sex * @apiSuccess {String} username * @apiSuccess {String} zone */ Persons user = personsRepository.findById(id); return new ResponseEntity<>(user, HttpStatus.OK); } }
那么在我继续之前,我也想和大家回顾一下Web开发的发展简史:
第一阶段: 网页三剑客,生猛的通过原生javascript直接操作Dom树;
第二阶段: JQuery诞生,配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;
第三阶段: 后端架构升级为MVC,前后端分工更清晰,前端工程化、ECMAScript规范开始崭露头角;
第四阶段: 后端架构进入了微服务时代,前端架构不仅升级为MVVM,ES6更是成为目前事实上的标准;
在这里,我不想过于神化MVVM有多么的先进,JQuery为代表的MVC有多么的落后,但确实MVVM有着很多先进的特性:
低开销
易维护
可重用
Vue.js是MVVM设计模式中目前最火热的一个前端框架之一,除了性能表现优异之外,与类似React相比,更轻量级、更容易上手。
通过Vue中的“单文件组件”特性,更灵活的定义组件,不仅使代码结构更清晰,而且能与任何其他组件进行随意组合,更具复用性。
Webpack提供了一整套前端工程自动化的解决方案
一个简单的“上海人员信息查询系统”作为例子
Java 1.7
Spring Boot 1.5.x
Maven
sqlite (not recommend, only convenience example)
vueJS 2.x
webpack 2.x
element ui
axios
安装JDK1.7或更新的版本
安装Node.js/NPM
编译前端开发环境
cd springboot_vue/frontend npm install
运行Spring Boot后端服务
cd springboot_vue/target/ java -jar springboot_vue-0.0.1-SNAPSHOT.jar
运行前端服务
cd springboot_vue/frontend npm run dev
你也可以在生产环境中运行 cd springboot_vue/frontend;npm run build
进行编译并配合Nginx
本项目可以作为工作参考、学习或者教学演示,之后将陆续以版本的形式,即每个版本都会新增不同的功能演示项,不定期进行发布更新,有以下功能已经在计划之中:
用户认证
引入更高级的vuex组件通信机制
演示vue-route的使用
加入docker部署环境
新增针对yarn的支持 ... ...