Building Applications with Spring 5 and Vue.js 2

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.

Title Page

Copyright and Credits

Copyright and Credits

Dedication

About Packt

Contributors

Preface

Free Chapter

Modern Web Application Development - This Is a New Era

Modern Web Application Development - This Is a New Era

JavaScript from a Java developer's viewpoint

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

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 JDBC and JPA

Spring transaction management

Put it together

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

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

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

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

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

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

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

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

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

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

Health Checking, System Monitoring - Getting Ready for Production

Health Checking, System Monitoring - Getting Ready for Production

Installing as a service

Spring Boot Actuator

Monitoring with Icinga 2

Fixes at the end

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

Further reading

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Building the backend of the card modal

Now, let's focus on implementing the backend of the card modal window, and start with the API handlers.

APIs for the card modal

The following are the APIs that we will need to create for the card modal window:

The API to get a card
The API to change the card title
The API to change the card description
The API to add comments to a card
The API to get the activities from a card
The API to add attachments to a card
The API to get attachments from a card

Let's take a look at the individual APIs:

Get card API

This will be a GET request sent to /api/cards/{cardId}. Through this API, we will get the following card information:

{
  "id": 4,
  "title": "Increase my handcraft skill",
  "boardId": 1,
  "description": "",
  "cardListId": 1
}

Change card title API

This will be a PUT request sent to /api/cards/{cardId}/title with a payload similar to the following:

{
  "title": "This is a new card title"
}

The response of the API will be simply an HTTP status of 200 when the change...