Book Image

Building Applications with Spring 5 and Vue.js 2

By : James J. Ye
Book Image

Building Applications with Spring 5 and Vue.js 2

By: James J. Ye

Overview of this book

Building Applications with Spring 5 and Vue.js 2, with its practical approach, helps you become a full-stack web developer. As well as knowing how to write frontend and backend code, a developer has to tackle all problems encountered in the application development life cycle – starting from the simple idea of an application, to the UI and technical designs, and all the way to implementation, testing, production deployment, and monitoring. With the help of this book, you'll get to grips with Spring 5 and Vue.js 2 as you learn how to develop a web application. From the initial structuring to full deployment, you’ll be guided at every step of developing a web application from scratch with Vue.js 2 and Spring 5. You’ll learn how to create different components of your application as you progress through each chapter, followed by exploring different tools in these frameworks to expedite your development cycle. By the end of this book, you’ll have gained a complete understanding of the key design patterns and best practices that underpin professional full-stack web development.

Related Content you might be interested in

Current Title:

Small book image
Building Applications with Spring 5 and Vue.js 2
James J. Ye
Oct, 2018 | 590 pages
Small book image
Building Web Apps with Spring 5 and Angular 4
Ajitesh Kumar Shukla
Aug, 2017 | 370 pages
Small book image
Spring Boot 2 Fundamentals
Michael Piefel | Patrick Cornelien | Alexander Sparkowsky
Nov, 2018 | 288 pages
Small book image
Hands-On High Performance with Spring 5
Chintan Mehta | Dinesh Radadiya | Pritesh Shah | Subhash Shah | Prashant Goswami
Jun, 2018 | 408 pages
Table of Contents (23 chapters)
Title Page
Title Page
Copyright and Credits
Copyright and Credits
Dedication
Dedication
About Packt
About Packt
Contributors
Contributors
Preface
Preface
Free Chapter
1
Modern Web Application Development - This Is a New Era
Modern Web Application Development - This Is a New Era
Introduction
JavaScript from a Java developer's viewpoint
ES6 basics
Summary
2
Vue.js 2 - It Works in the Way You Expected
Vue.js 2 - It Works in the Way You Expected
Fundamental concepts
Behind the scene
Summary
3
Spring 5 - The Right Stack for the Job at Hand
Spring 5 - The Right Stack for the Job at Hand
Spring IoC and dependency injection
Spring MVC
Spring JDBC and JPA
Spring AOP
Spring transaction management
Spring Boot
Put it together
Summary
4
TaskAgile - A Trello-like Task Management Tool
TaskAgile - A Trello-like Task Management Tool
Managing requirements in an Agile way
Writing effective user stories
Creating wireframes
Understanding Agile
Full-stack developer skillsets
Summary
5
Data Modeling - Designing the Foundation of the Application
Data Modeling - Designing the Foundation of the Application
Introduction to data modeling
Goals of data modeling
Conceptual data modeling with ER diagrams
Logical data modeling
Physical data modeling for RDBMS
Physical data modeling for MongoDB
Summary
6
Code Design - Designing for Stability and Extensibility
Code Design - Designing for Stability and Extensibility
Agile code design
Design principles and design patterns
TaskAgile code design
Summary
7
RESTful API Design - Building Language Between Frontend and Backend
RESTful API Design - Building Language Between Frontend and Backend
RESTful API characteristics
RESTful API design procedure
RESTful API implementation in Spring MVC
RESTful API consuming
RESTful API testing
Summary
8
Creating the Application Scaffold - Taking off Like a Rocket
Creating the Application Scaffold - Taking off Like a Rocket
Setting up the development environment
Creating the backend scaffold with Spring Initializr
Creating the frontend scaffold
Putting two ends together
Introducing vue-router
Fixes at the end
Summary
9
Forms and Validation - Starting with the Register Page
Forms and Validation - Starting with the Register Page
Building a UI with Bootstrap 4
Build registration forms with Vue.js
Validation on the frontend
Validation on the backend
Implement registration in domain model
Fixes at the end
Summary
10
Spring Security - Making Our Application Secure
Spring Security - Making Our Application Secure
How to secure a web application
Introducing Spring Security
Spring Security deep dive
Building the login page
Sending emails using JavaMail
Performing end-to-end integration tests
Fixes at the end
Summary
11
State Management and i18n - Building a Home Page
State Management and i18n - Building a Home Page
State management with Vuex
Building home page frontend
Building the home page backend
Adding i18n support with Vue-i18n
Logging SQL queries and performance tuning
Fixes at the end
Summary
12
Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards
Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards
Building the frontend of the board page
Building the backend of the board page
Implementing real-time updates with WebSocket
Fixes at the end
Summary
13
File Processing and Scalability - Playing with Cards
File Processing and Scalability - Playing with Cards
Building the frontend of the card modal
Building the backend of the card modal
Tracking activity asynchronously with AMQP
Fixes at the end
Summary
14
Health Checking, System Monitoring - Getting Ready for Production
Health Checking, System Monitoring - Getting Ready for Production
Installing as a service
Spring Profile
Spring Boot Actuator
Monitoring with Icinga 2
Fixes at the end
Summary
15
Deploying to the Cloud with Jenkins - Ship It Continuously
Deploying to the Cloud with Jenkins - Ship It Continuously
Continuous delivery
Last fix before rolling out
Let's ship it
Summary
Further reading
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Index
Index

Creating the backend scaffold with Spring Initializr

To generate the backend scaffold, instead of creating Maven's pom.xml file manually from scratch, we can use Spring Initializr to generate a Spring Boot application for us. To do that, let's go to https://start.spring.io and switch to the full version by clicking the Switch to the full version link, and then fill in form with the following parameters:

  • Group: com.taskagile
  • Artifact: app
  • Name: TaskAgile
  • Description: Open source task management tool
  • Package Name: com.taskagile
  • Dependencies: Web, Thymeleaf, JPA, and DevTools

After that, all we need to do is click the Generate Project button, as shown in Figure 8.1:

Figure 8.1: Spring Initializr

File structure

Once Spring Initializr finishes the generation of the skeleton of the backend of our TaskAgile application, we can see the following structure:

.
├── .gitignore
├── .mvn
│ └── wrapper
│ ├── maven-wrapper.jar
│ └── maven-wrapper.properties
├── mvnw
├── mvnw.cmd
├── pom.xml
└── src
    ├── main
 ...
Previous Section
End of Section 3
Next Section