Login Registration Form Using Spring boot Vue JS

In this Article explains how to create the login and registration using Spring Boot and Vue js and how to set the hash password for the Security .Spring boot as backend front end Vue js.

Lets follow the following step

First you have add the following dependencies while you configuring the spring initializr

spring jpa
spring web
spring security
mysql

Open the project on the pom.xml

<dependencies>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-data-jpa</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <dependency>
   <groupId>com.mysql</groupId>
   <artifactId>mysql-connector-j</artifactId>
   <scope>runtime</scope>
  </dependency>
  <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-security -->
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-security</artifactId>
   <version>2.7.8</version>
  </dependency>

  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
  </dependency>

you see the dependencies what you added.

Create the Mysql Database and Configure the database connection in the application.properties. this place where connect to Spring boot to Mysql.

application.properties

spring.application.name=Registation
server.port=8085

spring.jpa.hibernate.ddl-auto=create
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver


spring.datasource.url=jdbc:mysql://localhost:3306/dbkms?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.password=root123

#jpa vendor adapter configuration
spring.jpa.database-platform=org.hibernate.dialect.MySQL57Dialect
spring.jpa.generate-ddl=true
spring.jpa.show-sql=true

Create the Entity Employee for represent the employee data in the database.

Employee

package com.example.Registation.Entity;


import javax.persistence.*;

@Entity
@Table(name="employee")
public class Employee {

    @Id
    @Column(name="employee_id", length = 45)
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int employeeid;

    @Column(name="employee_name", length = 255)
    private String employeename;

    @Column(name="email", length = 255)
    private String email;

    @Column(name="password", length = 255)
    private String password;


    public Employee() {
    }

    public Employee(int employeeid, String employeename, String email, String password) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.email = email;
        this.password = password;
    }

//create getters and setters

EmployeeDTO

public class EmployeeDTO {

    private int employeeid;
    private String employeename;
    private String email;
    private String password;

    public EmployeeDTO() {
    }

    public EmployeeDTO(int employeeid, String employeename, String email, String password) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.email = email;
        this.password = password;
    }

} //create getters and setters

LoginDTO

public class LoginDTO 
{
private String email;
private String password;
 
public LoginDTO() {
}
 
public LoginDTO(String email, String password) {
this.email = email;
this.password = password;
} //create getters and setters

Create a EmployeeRepository interface which extends JpaRepository

EmployeeRepo

package com.example.Registation.Repo;
 
import com.example.Registation.Entity.Employee;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.stereotype.Repository;
 import java.util.Optional;
 
@EnableJpaRepositories
@Repository
public interface EmployeeRepo extends JpaRepository<Employee,Integer>
{
      Optional<Employee> findOneByEmailAndPassword(String email, String password);
 
    Employee findByEmail(String email);
}

Create the Employee Service

EmployeeService

package com.example.Registation.Service;

import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Dto.LoginDTO;
import com.example.Registation.payload.response.LoginMesage;

public interface EmployeeService {
    String addEmployee(EmployeeDTO employeeDTO);

    LoginMesage loginEmployee(LoginDTO loginDTO);

}

Create the EmployeeImpl which implements from EmployeeService

EmployeeImpl

package com.example.Registation.Service.impl;

import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Dto.LoginDTO;
import com.example.Registation.Entity.Employee;
import com.example.Registation.Repo.EmployeeRepo;
import com.example.Registation.Service.EmployeeService;
import com.example.Registation.payload.response.LoginMesage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.Optional;

@Service

public class EmployeeIMPL implements EmployeeService {

    @Autowired
    private EmployeeRepo employeeRepo;

    @Autowired
    private PasswordEncoder passwordEncoder;


    @Override
    public String addEmployee(EmployeeDTO employeeDTO) {

        Employee employee = new Employee(

                employeeDTO.getEmployeeid(),
                employeeDTO.getEmployeename(),
                employeeDTO.getEmail(),

               this.passwordEncoder.encode(employeeDTO.getPassword())
        );

        employeeRepo.save(employee);

        return employee.getEmployeename();
    }
    EmployeeDTO employeeDTO;

    @Override
    public LoginMesage  loginEmployee(LoginDTO loginDTO) {
        String msg = "";
        Employee employee1 = employeeRepo.findByEmail(loginDTO.getEmail());
        if (employee1 != null) {
            String password = loginDTO.getPassword();
            String encodedPassword = employee1.getPassword();
            Boolean isPwdRight = passwordEncoder.matches(password, encodedPassword);
            if (isPwdRight) {
                Optional<Employee> employee = employeeRepo.findOneByEmailAndPassword(loginDTO.getEmail(), encodedPassword);
                if (employee.isPresent()) {
                    return new LoginMesage("Login Success", true);
                } else {
                    return new LoginMesage("Login Failed", false);
                }
            } else {

                return new LoginMesage("password Not Match", false);
            }
        }else {
            return new LoginMesage("Email not exits", false);
        }


    }

}

Create a EmployeeController to manage the Restful api requests related to employee login and registration.

package com.example.Registation.Dto;
 
public class EmployeeDTO {
 
    private int employeeid;
    private String employeename;
    private String email;
    private String password;
 
    public EmployeeDTO() {
    }
 
    public EmployeeDTO(int employeeid, String employeename, String email, String password) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.email = email;
        this.password = password;
    }
 
    public int getEmployeeid() {
        return employeeid;
    }
 
    public void setEmployeeid(int employeeid) {
        this.employeeid = employeeid;
    }
 
    public String getEmployeename() {
        return employeename;
    }
 
    public void setEmployeename(String employeename) {
        this.employeename = employeename;
    }
 
    public String getEmail() {
        return email;
    }
 
    public void setEmail(String email) {
        this.email = email;
    }
 
    public String getPassword() {
        return password;
    }
 
    public void setPassword(String password) {
        this.password = password;
    }
 
    @Override
    public String toString() {
        return "EmployeeDTO{" +
                "employeeid=" + employeeid +
                ", employeename='" + employeename + '\'' +
                ", email='" + email + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

Security measures need to implemented

Create a file SecurityConfig for managing the Security password

package com.example.Registation.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

@Configuration
public class SecurityConfig {
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

Create LoginResponse Page for displaying Messages while testing

LoginResponse

public class LoginMesage {
    String message;
    Boolean status;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Boolean getStatus() {
        return status;
    }

    public void setStatus(Boolean status) {
        this.status = status;
    }

    public LoginMesage(String message, Boolean status) {
        this.message = message;
        this.status = status;
    }
}

After competed the Back End.Let’s start the front-end Vue JS.

Vue.js

Install Vue.js CLI

npm install –g vue–cli

After installed successfully create the vue.js project using following command

vue init webpack frontend

Bootstrap

add the bootstrap css on index.html inside the head tag go to the respective website here

you have to wait until the installation process complete.after install successfully.

Open project into vscode editor.

First Step
Create the component Register.vue.

Register.vue

<template>
       <div class="card" align="left">
            <div class="card-header">Register Form</div>
            <div class="card-body"> 
            
                <form  @submit.prevent="saveData">
                
                <label>Employee Name</label>
                <input type="text" v-model="employee.employeename" name="employeename" id="employeename" class ="form-control"/> 
    
          
                <label>Email</label>
                <input type="email" v-model="employee.email" name="email" id="email" class ="form-control"/>
    
                <label>Password</label>
                <input type="password" v-model="employee.password" name="password" id="password" class ="form-control"/> 
    
    
                <input type="submit" value="Save" class="btn btn-success"> 
    
    
                </form>
            </div>
        </div>
</template>

   <script>
           import Vue from 'vue';
           import axios from 'axios';
           Vue.use(axios)

         export default {
           name: 'Register',
           data () {
             return {
               result: {},
               employee:{
                          employeename: '',
                          email: '',
                          password: ''
               }
             }
           },
           created() { 
           },
           mounted() {
                 console.log("mounted() called.......");
             },
           methods: {
                  saveData()
                  {
                   axios.post("http://localhost:8085/api/v1/employee/save", this.employee)
                   .then(
                     ({data})=>{
                      console.log(data);
                       try 
                         {
                            alert("Employee Registation Successfully");
                            
                          } 
                      catch(err) 
                          {
                            alert("failed");
                          }    
                     }
                   )
                  }
             }
         }
         </script>

Login.vue

<template>

    <div class="row">
    
    <div class="col-sm-4" >
     <h2 align="center"> Login</h2>
   
     <form @submit.prevent="LoginData">
     
   
     <div class="form-group" align="left">
       <label>Email</label>
       <input type="email" v-model="employee.email" class="form-control"  placeholder="Email">
     </div>


    <div class="form-group" align="left">
    <label>Password</label>
    <input type="password" v-model="employee.password" class="form-control"  placeholder="Password">
  </div>
  <br/>

     <button type="submit" class="btn btn-primary">Login</button>
     </form>
   </div>
   </div>

</template>
   
   <script>
       import Vue from 'vue';
       import axios from 'axios';
   
     Vue.use(axios)
     export default {
       name: 'Registation',
       data () {
         return {
           result: {},
           employee:{
                      email: '',
                      password: ''
           }
         }
       },
       created() { 
       },
       mounted() {
             console.log("mounted() called.......");
         },
       methods: {
              LoginData()
              {
               axios.post("http://localhost:8085/api/v1/employee/login", this.employee)
               .then(
                 ({data})=>{
                  console.log(data);
                  try {
                  if (data.message === "Email not exits") 
                      {
                       alert("Email not exits");
                       
                        }
                         else if(data.message == "Login Success")
                        {
                       
                         this.$router.push({ name: 'Home' })
                        }
                         else 
                        { 
                            alert("Incorrect Email and Password not match");
                        }

                        } catch (err) {
                        alert("Error, please try again");
                        }    
                 }
               )
              }
         }
     }
     </script>

HelloWorld.vue

<template>
  <div>
      <h1>Welcome to Home Page</h1>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Routes

all routes manage in vuejs by inside the routes folder index.js

import Vue from 'vue'
import Router from 'vue-router'
import Register from '@/components/Register'
import Login from '@/components/Login'
import Home from '@/components/Home'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }

  ]
})

i have attached the video link below. which will do this tutorials step by step.

admin

Next Registration Form using Node js Angular Mongodb »

Previous « Login Registration Form Using Spring Boot React

Tesla Pi Phone: Is This the Next Super-Phone? Full Review & Details

What Is the Tesla Pi Phone? Imagine if Tesla, the company that makes famous…

3 weeks ago

React JS

Tailwind CSS Inventory Management POS Project (Free Source Code)

Inventory Management POS systems are now an essential part of modern businesses such as bookshops,…

1 month ago

Java

Build Simple Water System Calculator in Java Using Swing

If you're just beginning to learn Java GUI programming creating an Water System Calculator is a fantastic project for…

5 months ago

Uncategorized

GitHub Copilot vs Microsoft Copilot Best AI Tool to Use in 2025

GitHub is a powerful tool used by teams and developers around the globe. This guide is…

6 months ago

Uncategorized

Chat with Claude AI Free – Your Super-Smart AI Buddy

It's like having a super-smart buddy that is always there to help you write stories,…

6 months ago

Uncategorized

Best Festivals UK 2025 [Free Guide Included]

The UK is known for its rich history, diverse culture, and most of all its…

6 months ago

Tutusfunny