碼上快樂

相關內容    簡體    繁體

SpringBoot vue

本文轉載自   查看原文   2017-12-21 11:13   1072    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:

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?

@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.

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.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

SpringBoot ＋ 前端MVVM 基於Java的微服務全棧快速開發實踐

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

背景

如今Web開發領域，當有人提到Java時，總會讓人覺得臃腫、古老而過時且開發效率沒有某些動態語言高效，甚至在此之前還有人高喊“Java 已死！”，但是事實真是如此嗎？其實如果你一直關注着Java，那你的感悟會更深，盡管它有很多的缺點和啰嗦，但不可否認，Java依然是工業界中最優秀的語言，而且它一直保持着與時俱進。本項目將使用SpringBoot + Vue2 ＋ Webpack2 配合最簡單CRUD的邏輯來展示一個基於Java的微服務全棧快速開發實踐的Demo。

在某些時候，其開發效率已經並不比某些動態語言低。

為什么是SpringBoot

首先先來簡單的介紹一下Spring，它是目前Java生態中最廣為人知、流行的企業級Web框架。不像其他一些框架僅聚焦在某個領域，Spring框架通過其容器化組件式管理及開發，可提供或定制各式各樣的功能來滿足企業化需求。

那么相較於Spring，Spring Boot的目標是更加容易的創建Spring應用、建立自動化、最少人為干預的生產級配置，真正意義做到開箱即用，並且對於新用戶及Spring平台的用戶極易上手，快速開發。

下圖主要展示了Spring Boot在Spring龐大的生態圈中的層級關系

spring_vue

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中的“單文件組件”特性，更靈活的定義組件，不僅使代碼結構更清晰，而且能與任何其他組件進行隨意組合，更具復用性。

sanic_vue

Webpack是什么

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

Demo

一個簡單的“上海人員信息查詢系統”作為例子

demo-image

具備的功能(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

相關項目

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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 部署springboot , vue Springboot + Rabbitmq + WebSocet + vue springboot 集成 vue springboot vue簡單整合 springboot+vue+keyclock WebSocket的使用（基於VUE與SpringBoot） springboot與vue集成 SpringBoot+Vue 簡單的springboot + vue springboot整合多個VUE項目
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM