转载

SpringBoot-vue —— 高效全栈 Java 开发实践

背景

如今Web开发领域，当有人提到Java时，总会让人觉得臃肿、古老而过时且开发效率没有某些动态语言高效，甚至在此之前还有人高喊 “Java 已死！”，但是事实真是如此吗？其实如果你一直关注着Java，那你的感悟会更深，尽管它有很多的缺点和啰嗦，但不可否认，Java依然是工业界中最优秀的语言，而且它一直保持着与时俱进。本项目将使用SpringBoot + Vue2 ＋ Webpack2 配合最简单CRUD的逻辑来展示一个基于Java的微服务全栈快速开发实践的Demo。

在某些时候，其开发效率已经并不比某些动态语言低。

这份小礼物，将献给所有刚走出校园、献给和我一样即将步入不惑之年、献给所有热爱开源的伙伴们，也纪念我入行6周年，Our Freedom～！

为什么是SpringBoot

首先先来简单的介绍一下Spring，它是目前Java生态中最广为人知、流行的企业级Web框架。不像其他一些框架仅聚焦在某个领域，Spring框架通过其容器化组件式管理及开发，可提供或定制各式各样的功能来满足企业化需求。

那么相较于Spring，Spring Boot的目标是更加容易的创建Spring应用、建立自动化、最少人为干预的生产级配置，真正意义做到开箱即用，并且对于新用户及Spring平台的用户极易上手，快速开发。

下图主要展示了Spring Boot在Spring庞大的生态圈中的层级关系

SpringBoot-vue —— 高效全栈 Java 开发实践

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);
    }

}

为什么是MVVM

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

第一阶段: 网页三剑客，生猛的通过原生javascript直接操作Dom树;
第二阶段: JQuery诞生，配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;
第三阶段: 后端架构升级为MVC，前后端分工更清晰，前端工程化、ECMAScript规范开始崭露头角;
第四阶段: 后端架构进入了微服务时代，前端架构不仅升级为MVVM，ES6更是成为目前事实上的标准;

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

低开销
易维护
可重用

为什么选择Vue.js

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

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

SpringBoot-vue —— 高效全栈 Java 开发实践

Webpack是什么

Webpack提供了一整套前端工程自动化的解决方案

Demo

一个简单的“上海人员信息查询系统”作为例子

SpringBoot-vue —— 高效全栈 Java 开发实践

本项目主要技术栈

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

SpringBoot-vue —— 高效全栈 Java 开发实践

运行前端服务

  cd springboot_vue/frontend

  npm run dev

你也可以在生产环境中运行 cd springboot_vue/frontend;npm run build 进行编译并配合Nginx

未来计划

本项目可以作为工作参考、学习或者教学演示，之后将陆续以版本的形式，即每个版本都会新增不同的功能演示项，不定期进行发布更新，有以下功能已经在计划之中：

用户认证
引入更高级的vuex组件通信机制
演示vue-route的使用
加入docker部署环境
新增针对yarn的支持 ... ...

原文 https://www.oschina.net/p/springboot-vue-

正文到此结束

所属分类： Spring 编程技术

本文标签： 定制 ip 安全 API Docker build id 编译 cat 管理 json example IO 服务器 mail find UI DOM 企业 JavaScript Nginx maven tar jquery App 开源 IOS web 自动化配置设计模式开发 SQLite java db 纪念安装需求 REST http spring node js map 代码 value entity springboot 认证 https sql Node.js XML src Spring Boot
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

SpringBoot-vue —— 高效全栈 Java 开发实践

背景

为什么是SpringBoot

为什么是MVVM

为什么选择Vue.js

Webpack是什么

Demo

本项目主要技术栈

准备工作

安装

使用

未来计划

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流