Packt+ | Advance your knowledge in tech

You're reading from Building Applications with Spring 5 and Vue.js 2

Product type Book

Published in Oct 2018

Publisher Packt

ISBN-13 9781788836968

Pages 590 pages

Edition 1st Edition

Languages

Java

Concepts

Full Stack Web Development

Author (1):

James J. Ye

Table of Contents (23) Chapters

Title Page

Dedication

About Packt

Contributors

Preface

1. Modern Web Application Development - This Is a New Era

2. Vue.js 2 - It Works in the Way You Expected

3. Spring 5 - The Right Stack for the Job at Hand

4. TaskAgile - A Trello-like Task Management Tool

5. Data Modeling - Designing the Foundation of the Application

6. Code Design - Designing for Stability and Extensibility

7. RESTful API Design - Building Language Between Frontend and Backend

8. Creating the Application Scaffold - Taking off Like a Rocket

9. Forms and Validation - Starting with the Register Page

10. Spring Security - Making Our Application Secure

11. State Management and i18n - Building a Home Page

12. Flexbox Layout and Real-Time Updates with WebSocket - Creating Boards

13. File Processing and Scalability - Playing with Cards

14. Health Checking, System Monitoring - Getting Ready for Production

15. Deploying to the Cloud with Jenkins - Ship It Continuously

1. Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Building home page frontend

Different from the login and the register pages, which are mostly about form and validation, the frontend of the home page is more about how to render items, how to manage app state, and how to support internationalization (i18n).

UI of the home page

First of all, let's take a look at the UI of the home page to see what we are building in this chapter. Figure 11.4 shows a blank home page. This is how the application will look after a user logs in:

Figure 11.4: Blank home page

At the top of this page is the page header, which includes a logo, a boards menu, a search box, and a profile menu. On the boards menu, all of the boards that the user has access to will be listed. Users can use this menu to navigate among boards easily. The search box at the center of the header is for searching boards and cards globally. The main area of this page is for showing a list of boards that the user has access to, and the boards will be grouped by teams. Those personal boards that...