Restful API Web Services With Spring Boot And Vue JS + Vuex

Install Java 11+ to set up your development environment for building restful API web services with Spring Boot and Vue JS and Vuex.

download and install MySQL by visiting the community server downloads page and selecting the version for your operating system, then set the passwords and keep credentials for future operations.

Install IntelliJ IDEA and compare its ease of use with alternatives like Eclipse, VS Code, and NetBeans. Download the free community version and install with default settings.

Download and install Postman to test API endpoints in your project, calling GET, POST, PUT, PATCH, and other methods, and set authorization headers as needed.

Install Lombok for the server side by installing the library and enabling annotation processing in the settings.

Discover Lombok, a Java library that auto-generates getters, setters, and equals and hashCode, with data and value annotations; create immutable classes and provide no-args and all-args constructors.

Explore how Spring Boot enables dependency injection to decouple services from repositories, using constructor, setter, or field injection, and manage beans with component, service, controller, and configuration annotations.

Download the latest stable version of Node.js from the official downloads page, selecting the version that matches your operating system. Install it with default configurations.

Install the Vue CLI by locating it on Google and completing the installation using MBA OK.

Explore JavaScript fundamentals, including types, generic types, var/let/const scoping, array and object destructuring, constructors and parameter ordering, and strict equality operators.

Learn the vue js overview: build components with template, script, and style, manage data with props, computed properties, methods, and watch, and navigate the component lifecycle from creation to destruction.

Develop RESTful API services with Spring Boot, using get, post, put, and patch, secured by Spring Security, and map via Hibernate ORM with Lombok in an MVC structure.

Create a spring boot project with Gradle and Java 11, add web, security, persistence, rest repositories, Lombok, and validation, import to IntelliJ, and enable Lombok annotation processing.

Configure application properties by setting data source credentials, UTC server time zone, and auto create database; enable public key retrieval, and apply Hibernate auto configuration for create, update, or validate.

Explore Hibernate, an object-relational mapping tool, with entity, table, column, id, and generated value annotations, and model one-to-one, one-to-many, many-to-one, and many-to-many relationships using eager and lazy fetch types.

Create a user model class as a jpa entity under model package, with id (generated), unique username, password, and role (user or admin), using lombok @Data for getters and equals.

Explore the Java Persistence API repository overview, extend a repository with an entity and id to perform create, read, update, and delete operations, and use derived methods and @Query.

Create a user repository interface extending JpaRepository to enable automatic save, update, and find by queries, such as find by username or find by password.

Build a Spring service for user management by implementing a user service interface and its class, injecting the repository, encoding passwords, and providing create, update, find, and list methods.

Explore how Spring security secures login and REST API calls, implement user details service, use password encryption, and define authorized and unauthorized paths for a safe web app.

Implement a custom user details service in a new spring security package, loading users by username from a repository and assigning roles with granted authorities.

Explore Spring Security default configurations, including form login, logout, CSRF protection, and session handling, and learn how to customize authorization filters and access rules for secure restful APIs.

Discover how Spring Security authenticates users via filters and basic authentication tokens, using a provider manager to delegate to authentication providers and load users from the database.

Explains Spring Security authorization architecture, including permit all, deny all, role-based, and authenticated access; and details the access decision manager and voters with default/affirmative-based and consensus-based strategies.

Learn to implement and customize Spring Security for a rest API, including CORS configuration, basic authentication, stateless sessions, and a user details service for admin and API users.

Learn how a Spring Boot rest controller handles HTTP requests, processes parameters and payloads, and returns responses via ResponseEntity using get, post, put, and patch mappings.

Create a user data transfer object and a user detail class under a detail package with username and password fields, getters, Lombok, and convert the dto to a user model.

Create a user controller and implement post mapping for registration, inject the user service, and return conflict when a username exists, or created on success.

Learn login authentication using get mappings, manage user control in the user controller, and leverage security principal for authorization headers and basic authorization, tested with postman.

learn how to implement a put mapping in a spring boot rest controller to change a user’s role via api/users/{username}, and test it using postman.

Create an admin controller in Spring Boot with get all users and delete user endpoints, secured for admin roles via basic authorization and dependency injection of the user service.

Implement a rest exception handler using controller advice to map exceptions to http statuses, handle validation errors, and test the flow with postman.

Integrate the backend with the frontend by consuming REST API endpoints through HTTP requests, handling backend data in the frontend, with no additional configuration required.

Create a Vue project with the Vue CLI using manual mode on the command line, configure Babel, dependencies, and progressive web apps, and prep the project for coding.

Install and configure dependencies for a real Vue project, including axios for http requests, bootstrap for responsive styling, and font-awesome icons.

Create twelve page templates by removing default components and build login, register, profile, home, and error pages as template components with templates for estimator forms, separate controllers, and styles.

Configure Vue routers with four main routes: login, register, profile, and home, using lazy loading, plus 404 and 401 error routes and a catch-all fallback.

Explore how Vuex centralizes app state into a single source of truth, and how actions, mutations, and subscriptions update the store to keep components in sync.

Understand Vuex store concepts—actions, mutations, and getters—managing state in a central object and persisting user data to local storage.

This lesson implements user and role models on the client, creating user and role classes in a models package, using constructors to define fields, mirroring the server side approach.

Create 404 not found and 401 unauthorized error pages using a container and bootstrap components, add a return home link, and adapt the not found template to the unauthorized page.

Implement an authentication guard for router navigation using beforeEach, reading current user roles from the store, redirecting unauthenticated users to login, and restricting routes to admins and users.

Explore how http requests reach server API endpoints and fetch data for browser apps, using services as injectable classes and axios, with promises and observables handling asynchronous results.

Implement a default user service with axios, exposing login, logout, registration, and update methods via REST API paths in a Spring Boot and Vue.js app.

Create a template page with a bootstrap navigation bar that handles login, register, profile display, and logout by connecting to the user service and updating the current user automatically.

Implement a login page in a Vue.js app using a user service; build a login form, validate input, call login, manage current user with Vuex, and redirect to profile page.

Implement the user register component and register form using the existing login page template, calling the user service’s register method, and navigate to the login page after registration.

Implement a user profile page by importing the user service and Wix to fetch the current user, add update and role-change methods, and display details with a bootstrap email template.

Implement the admin service to handle REST API calls, create authorization headers with the current user for rule-based authentication, and support get current user, delete user, and get all users.

Test the system with operations by running the server side from Sprint main, then use the client side to register, log in, view user details, list users, and delete users.