SpringBoot vue

springboot 整合vue就行前后端完全分离，监听器，过滤器，拦截器 https://github.com/ninuxGithub/spring-boot-vue-separate
A blog built up with Spring Boot in the back end and Vue.js in the front-end  https://github.com/arocketman/SpringBlog  (thymeleaf vue ，没有前后端分离)

overview

Now about Web develop fields. It's very bloated, outmoded and some development efficiency have a lower with each other than other dynamic language when people refers to Java. Even before somebody shouts loudly ‘Java was died’. But is this really the case? In fact, If you often attention to Java in long time, your feel is too deep. Though it's many disadvantages and verbose. It couldn't be denied that Java is still best language in industry member, and advance with the times. This project is a CRUD demo example base Spring Boot with Vue2 + webpack2. I hope pass thought this project for express Java microservice fast full stack base web practice.

Why Spring Boot

Spring is a very popular Java-based framework for building web and enterprise applications. Unlike many other frameworks, which focus on only one area, Spring framework provides a wide verity of features addressing the modern business needs via its portfolio projects.

In relation to Spring, Spring Boot aims to make it easy to create Spring-powered, production-grade applications and services with minimum fuss. It takes an opinionated view of the Spring platform so that new and existing users can quickly get to the bits they need.

The diagram below shows Spring Boot as a point of focus on the larger Spring ecosystem:

The primary goals of Spring Boot are:

• To provide a radically faster and widely accessible ‘getting started’ experience for all Spring development.

• To be opinionated out of the box, but get out of the way quickly as requirements start to diverge from the defaults.

• To provide a range of non-functional features that are common to large classes of projects (e.g. embedded servers, security, metrics, health checks, externalized configuration).

Spring Boot does not generate code and there is absolutely no requirement for XML configuration.

Below are this project code snippet. Do you think simple?

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

}

Why MVVM

Although it seems similar to MVC (except with a "view model" object in place of the controller), there's one major difference — the view owns the view model. Unlike a controller, a view model has no knowledge of the specific view that's using it.

This seemingly minor change offers huge benefits:

1. View models are testable. Since they don't need a view to do their work, presentation behavior can be tested without any UI automation or stubbing.

2. View models can be used like models. If desired, view models can be copied or serialized just like a domain model. This can be used to quickly implement UI restoration and similar behaviors.

3. View models are (mostly) platform-agnostic. Since the actual UI code lives in the view, well-designed view models can be used on the iPhone, iPad, and Mac, with only minor tweaking for each platform.

4. Views and view controllers are simpler. Once the important logic is moved elsewhere, views and VCs become dumb UI objects. This makes them easier to understand and redesign. In short, replacing MVC with MVVM can lead to more versatile and rigorous UI code.

In short, replacing MVC with MVVM can lead to more versatile and rigorous UI code.

Why to choose Vue.js

Vue.js is relatively new and is gaining lot of traction among the community of developers. VueJs works with MVVM design paradigm and has a very simple API. Vue is inspired by AngularJS, ReactiveJs and updates model and view via two way data binding.

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to.

What's Webpack

Webpack is a powerful tool that bundles your app source code efficiently and loads that code from a server into a browser. It‘s excellent solution in frontend automation project.

Demo

This's a sample ShangHai people information system as example demo.

Feature (v0.1)

• Spring Boot (Back-end)

  • Build RestFul-API on SpringBoot with @RequestMapping and base CRUD logic implementation

  • Handle CORS(Cross-origin resource sharing)

  • Unit test on SpringBoot

  • Support hot reload

  • Add interface documents about it's rest-api

  • Pagination implementation of RestFul-API with JPA and SpringBoot

• VueJS & webpack (front-end)

  • Follow ECMAScript 6

  • What about coding by single file components in vueJS

  • Simple none parent-child communication and parent-child communication

  • Interworking is between data and back-end

  • How grace import third JS package in vue

  • Handle format datetime

  • Pagination implementation

  • Reusable components

    • DbHeader.vue
    • DbFooter.vue (sticky footer)
    • DbFilterinput.vue
    • DbModal.vue
    • DbSidebar.vue
    • DbTable.vue

  • Config front-end env on webpack2 (include in vue2, handle static file, build different environment...... with webpack2)

Main technology stack

• Java 1.7
• Spring Boot 1.5.x
• Maven
• sqlite (not recommend, only convenience example)
• vueJS 2.x
• webpack 2.x
• element ui
• axios

Preparation

• Please must install Java 1.7 or even higher version

• install Node.js / NPM

• Clone Repository

    git clone https://github.com/boylegu/SpringBoot-vue.git
  
    cd springboot_vue
  

Installation

• Build front-end environment

    cd springboot_vue/frontend
  
    npm install
  

Usage

• Run back-end server

    cd springboot_vue/target/
  
    java -jar springboot_vue-0.0.1-SNAPSHOT.jar
  

• Run Front-end Web Page

    cd springboot_vue/frontend
  
    npm run dev
  

You can also run cd springboot_vue/frontend;npm run build and it's with Nginx in the production environment

Future Plan

This project can be reference,study or teaching demonstration. After, I will update at every increme version in succession. In future,I have already some plan to below:

1. User Authentication
2. state manage with vuex
3. use vue-route
4. add docker deploy method
5. support yarn ... ...

Support

1. Github Issue

2. To e-mail: gubaoer@hotmail.com

3. You can also join to QQ Group: 315308272

Related projects

• Sanic-Vue for Python

SpringBoot ＋ 前端MVVM 基于Java的微服务全栈快速开发实践

Convenient & efficient and better performance for Java microservice full stack.

Commemorate the 6 anniversary of enter the profession.

Give beginner as a present.

———————By Boyle Gu

背景

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

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

为什么是SpringBoot

首先先来简单的介绍一下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);
    }

}

为什么是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提供了一整套前端工程自动化的解决方案

Demo

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

具备的功能(v0.1)

• Spring Boot (后端)

  • 通过在Spring Boot中建立基于RestFul-API并使用@ RequestMapping实现一个基本的CRUD逻辑

  • 处理CORS(跨域资源共享)

  • 在Spring Boot中进行单元测试

  • 支持热加载

  • 增加api接口文档

  • 通过SpringBoot配合JPA来实现RestFul-API的分页

• VueJS & webpack (前端)

  • 遵循ECMAScript 6 规范

  • 如何在vue中使用‘单文件组件’进行开发编码

  • 演示‘非父子组件’如何进行简单的通信以及‘父子组件’之间如何传递数据

  • 如何和后端进行数据交互

  • 如何在vue中优雅的引入第三方JS库

  • 格式化时间

  • 分页实现

  • 可复用组件

    • DbHeader.vue
    • DbFooter.vue (sticky footer)
    • DbFilterinput.vue
    • DbModal.vue
    • DbSidebar.vue
    • DbTable.vue

    得益于类似vue、react等MVVM模式，本项目的任何组件，只要您觉得合适，都可以复用在您的任何项目中，避免重复造轮子。

  • 如何通过webpack2配置来自动化构建前端环境(包括如何配置vue2、处理静态文件,构建不同环境等等)

本项目主要技术栈

• 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

• 克隆仓库

    git clone https://github.com/boylegu/SpringBoot-vue.git
  
    cd springboot_vue
  

安装

• 编译前端开发环境

    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

未来计划

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

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

技术、教学支持

由于个人时间暂时有限，关于Spring、Vue、webpack等所有的核心的议题内容非常庞大，因此我将以以下形式来回答和解释关于本项目Demo问题：

1. 以Github Issue的形式进行提问
2. 电子邮件的形式 gubaoer@hotmail.com
3. QQ群：315308272

相关项目

• Sanic-Vue for Python

https://github.com/boylegu/SpringBoot-vue/blob/master/README-CN.md