Home Spring boot Registration Form in Spring boot with Vue.js

Registration Form in Spring boot with Vue.js

11 min read
0
0
561

In this tutorials will teach you spring boot with vue.js how to do the Restful API to add the records in to the mysql database .Spring Boot with vue.js use to create a full-stack web application.how to insert the records into mysql database step by step via spring boot  layer architecture process using industrial standards.

Create the Package entity inside the package create the class Employee

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="address", length = 255)
    private String address;

    @Column(name="mobile", length = 20)
    private int mobile;

    public Employee(int employeeid, String employeename, String address, int mobile) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.address = address;
        this.mobile = mobile;
    }

    public Employee() {
    }

    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 getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "Employee{" +
                "employeeid=" + employeeid +
                ", employeename='" + employeename + '\'' +
                ", address='" + address + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

Create the Package Dt0 inside the package create the class EmployeeDTO

EmployeeDTO

package com.example.Registation.Dto;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

public class EmployeeDTO {


    private int employeeid;
    private String employeename;
    private String address;
    private int mobile;

    public EmployeeDTO(int employeeid, String employeename, String address, int mobile) {
        this.employeeid = employeeid;
        this.employeename = employeename;
        this.address = address;
        this.mobile = mobile;
    }

    public EmployeeDTO() {
    }

    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 getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public int getMobile() {
        return mobile;
    }

    public void setMobile(int mobile) {
        this.mobile = mobile;
    }

    @Override
    public String toString() {
        return "EmployeeDTO{" +
                "employeeid=" + employeeid +
                ", employeename='" + employeename + '\'' +
                ", address='" + address + '\'' +
                ", mobile=" + mobile +
                '}';
    }
}

Create the Package Controller inside the package create the class EmployeeController

EmployeeController

package com.example.Registation.EmployeeController;
import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin
@RequestMapping("api/v1/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @PostMapping(path = "/save")
    public String saveEmployee(@RequestBody EmployeeDTO employeeDTO)
    {
        String id = employeeService.addEmployee(employeeDTO);
        return id;
    }
}

Create the Package Service inside the package create the one class EmployeeServiceIMPL and create one interface EmployeeService

Employee Service

package com.example.Registation.Service;

import com.example.Registation.Dto.EmployeeDTO;

public interface EmployeeService {
    String addEmployee(EmployeeDTO employeeDTO);
}

EmployeeServiceIMPL

then run the Back-end Spring Boot Application.

Vuejs

Vuejs is a single page frond-end application.

Install Vuejs

npm install -g vue-cli

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

Type the Below command to create the new project

vue init webpack Registationfrontend

After enter all the details and press enter key your project all dependencies get installed.

after the open your project on the vs code Editor

open the src folder inside the folder has folder routes folder inside the folder has file
index.js .here  i am going to link the new component Router.

import Vue from 'vue'
import Router from 'vue-router'
import Registation from '@/components/Registation'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Registation',
      component: Registation
    }
  ]
})

After that create the new component Registation.vue

in this component i have created the Registation form.

<template>
<div class="row">

    <h2 align="center">Employee Registation</h2>

 <div class="col-sm-6">

<form @submit.prevent="saveData">
  <div class="form-group" align="left">
    <label>Employee Name</label>
    <input type="text" v-model="employee.employeename" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
   
  </div>

  <div class="form-group" align="left">
    <label>Address</label>
    <input type="text" v-model="employee.address" class="form-control" id="exampleInputEmail1" placeholder="Enter Address">
   
  </div>

 <div class="form-group" align="left">
    <label>mobile</label>
    <input type="text" v-model="employee.mobile" class="form-control" id="exampleInputEmail1" placeholder="Enter Mobile">
   
  </div>

  <br>
  <button type="submit" class="btn btn-primary">Submit</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:{
                   id: '',
                   employeename: '',
                   address: '',
                   mobile: ''
        }
      }
    },
    created() { 
    },
    mounted() {
          console.log("mounted() called.......");
      },
    methods: {
           saveData()
           {
            axios.post("http://localhost:8085/api/v1/employee/save", this.employee)
            .then(
              ({data})=>{
                alert("saveddddd");
              }
            )
           }
      }
  }

</script>

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

    Load More Related Articles
    Load More By admin
    Load More In Spring boot

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Check Also

    Build Crud App with Laravel 11 and Vue.js

    In this tutorial will teach Vue Laravel 10 CRUD using Vite step by step. Laravel  10 CRUD …