springboot>> SpringBoot-vue>> 返回
项目作者： boylegu

项目描述 ：
一个示例演示基础SpringBooot与vueJS2.x + webpack2.x作为Java完整堆栈Web实践
高级语言： Java
项目地址: git://github.com/boylegu/SpringBoot-vue.git
创建时间： 2017-06-20T07:07:19Z
项目社区：https://github.com/boylegu/SpringBoot-vue
开源协议：
下载


jdkversions
vueversions
es2015
ver
MIT


spring_vue


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

Chinese README[中文]

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 project. The main goal of the Spring Boot framework is to reduce overall development time and increase efficiency by having a default setup for unit and integration tests.

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:


spring_vue

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? 

  1. @RestController
  2. @RequestMapping("/api/persons")
  3. public class MainController {
  5.     @RequestMapping(
  6.             value = "/detail/{id}", 
  7.             method = RequestMethod.GET, 
  8.             produces = MediaType.APPLICATION_JSON_VALUE
  9.             )
  10.     public ResponseEntity<Persons> getUserDetail(@PathVariable Long id) {
  12.         /*
  13.         *    @api {GET} /api/persons/detail/:id  details info
  14.         *    @apiName GetPersonDetails
  15.         *    @apiGroup Info Manage
  16.         *    @apiVersion 1.0.0
  17.         *
  18.         *    @apiExample {httpie} Example usage:
  19.         *
  20.         *        http GET http://127.0.0.1:8000/api/persons/detail/1
  21.         *
  22.         *    @apiSuccess {String} email
  23.         *    @apiSuccess {String} id
  24.         *    @apiSuccess {String} phone
  25.         *    @apiSuccess {String} sex
  26.         *    @apiSuccess {String} username
  27.         *    @apiSuccess {String} zone
  28.         */
  30.         Persons user = personsRepository.findById(id);
  32.         return new ResponseEntity<>(user, HttpStatus.OK);
  33.     }
  35. }

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.


spring_vue

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.

demo-image

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.8+
  • 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.8 or even higher version
  • install Node.js / NPM

  • Clone Repository

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

Installation

  • Build front-end environment

    1.   cd springboot_vue/frontend
    3.   npm install

Usage

  • Run back-end server

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

  • Run Front-end Web Page

    1.   cd springboot_vue/frontend
    3.   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 increment 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

My Final Thoughts

  1.       .   ____          _
  2.      /\\ / ___'_ __ _ _(_)_ __  __ _
  3.     ( ( )\___ | '_ | '_| | '_ \/ _` |
  4.      \\/  ___)| |_)| | | | | || (_| |
  5.       '  |____| .__|_| |_|_| |_\__, |
  6. \  ===========|_|==============|___/== ▀
  7. \- ▌          SpringBoot-vue             ▀
  8.  - ▌                            (o)        ▀
  9. /- ▌            Go Go Go !               ▀
  10. /  =================================== ▀
  11.                     ██