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

Performing end-to-end integration tests

Now, we've finished both the register and login feature of the User module. It's time to work on the end-to-end test now. Before we continue, let's review our current end-to-end test. By now, we only have a very basic login.e2e.js, which only tests against http://localhost:3000 and does not use Page Objects. In this section, we will make the following improvements to our end-to-end test:

Correct the port so that tests can be run against http://localhost:8080 during a Maven build
Use Page Objects in tests
Automatically generate a user's test data, which can be shared across tests
Execute multiple tests in a specific order

Let's go through these one by one.

Correcting the port

In order to run the test against the URL through port 8080, we will need to ask @vue/cli-service to not start the dev server by providing a --url parameter to the command, like the following:

"scripts": {
  ...
  "test:e2e": "vue-cli-service test:e2e",
  "test:integration": "vue-cli-service...