Home React JS Spring boot React Tailwind CSS FullStack
React JS Reactjs Spring boot

Spring boot React Tailwind CSS FullStack

By admin
Posted on July 31, 2023
21 min read
0
0
791

This  tutorial will teach you how to do the full stack development application using Spring boot React Tailwind CSS. that are CREATE, RETIEVE, UPDATE and DELETE and SEARCH using mysql Database. The INSERT, SELECT, UPDATE and DELETE statements can be used in any database system, because this is support by all relational database systems.

Crud function how to perform the RESTful Web Service let discuss with following annotations.

@PostMapping:  annotation which used to create new record.
@GetMapping:   annotation which used to reads a record.
@RequestMapping: annotation which used to search the record.
@PutMapping:   annotation which used to update the existing record.
@DeleteMapping:  annotation which used to delete the record.

Lets Started Project

Spring Boot – Back End Application

tailwindcss– Front End Application

Spring Boot

Create the Package Student Controller

Inside the Package create the class StudentController.java

StudentController.java

package com.studentapp.studentapplication.controller;

import com.studentapp.studentapplication.dto.StudentDTO;
import com.studentapp.studentapplication.dto.StudentSaveDTO;
import com.studentapp.studentapplication.dto.StudentUpdateDTO;
import com.studentapp.studentapplication.entity.Student;
import com.studentapp.studentapplication.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("api/v1/student")
public class StudentController {


    @Autowired
    private StudentService studentService;

    @PostMapping(path = "/save")
    public String saveStudent(@RequestBody StudentSaveDTO studentSaveDTO)
    {
        String id = studentService.addStudent(studentSaveDTO);
        return id;
    }

    @GetMapping(path = "/getAllStudents")
    public List<StudentDTO> getAllStudent()
    {
        List<StudentDTO> allStudents = studentService.getAllStudents();
        return allStudents;
    }


    @PutMapping(path = "/update")
    public String updateStudent(@RequestBody StudentUpdateDTO studentUpdateDTO)
    {
        String id = studentService.updateStudent(studentUpdateDTO);
        return id;
    }


    @DeleteMapping(path = "/deletestudentid/{id}")
    public String deleteStudent(@PathVariable(value = "id")int id)
    {
        boolean deletestudent = studentService.deleteStudent(id);
        return "deleteddd!!!!!";
    }

}

Create the Package entity

Inside the Package create the class Student

Student

package com.studentapp.studentapplication.entity;

import jakarta.persistence.*;


@Entity
@Table(name="student")
public class Student {

    @Id
    @Column(name="student_id",length = 50)
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int studentid;

    @Column(name="student_name",length = 50)
    private String studentname;


    @Column(name="address",length = 100)
    private String address;

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


    @Column(name="active",columnDefinition = "TINYINT default 1")
    private boolean  active;


    public Student(int studentid, String studentname, String address, int mobile, boolean active) {
        this.studentid = studentid;
        this.studentname = studentname;
        this.address = address;
        this.mobile = mobile;
        this.active = active;
    }

    public Student (String studentname, String address, int mobile, boolean active) {

        this.studentname = studentname;
        this.address = address;
        this.mobile = mobile;
        this.active = active;
    }




    public Student() {
    }


    public int getStudentid() {
        return studentid;
    }

    public void setStudentid(int studentid) {
        this.studentid = studentid;
    }

    public String getStudentname() {
        return studentname;
    }

    public void setStudentname(String studentname) {
        this.studentname = studentname;
    }

    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;
    }

    public boolean isActive() {
        return active;
    }

    public void setActive(boolean active) {
        this.active = active;
    }


    @Override
    public String toString() {
        return "Student{" +
                "studentid=" + studentid +
                ", studentname='" + studentname + '\'' +
                ", address='" + address + '\'' +
                ", mobile=" + mobile +
                ", active=" + active +
                '}';
    }
}

Create the Package DTO

Inside the Package create the class StudentDTO and StudentSaveDTO and
StudentUpdateDTO

StudentDTO .java

package com.studentapp.studentapplication.dto;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data

public class StudentDTO 
{
    private int studentid;
    private String studentname;
    private String address;
    private int  mobile;
    private boolean  active;
    
}

StudentSaveDTO

package com.studentapp.studentapplication.dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data

public class StudentSaveDTO {


    private String studentname;
    private String address;
    private int  mobile;
    private boolean  active;
}

StudentUpdateDTO

package com.studentapp.studentapplication.dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data

public class StudentUpdateDTO {
    private int studentid;
    private String studentname;
    private String address;
    private int  mobile;
    private boolean  active;
}

 

Create the Package Customer Service

Inside the Package create the interface CustomerService.java and CustomerServiceIMPL

CustomerService.java

package com.studentapp.studentapplication.service;

import com.studentapp.studentapplication.dto.StudentDTO;
import com.studentapp.studentapplication.dto.StudentSaveDTO;
import com.studentapp.studentapplication.dto.StudentUpdateDTO;

import java.util.List;

public interface StudentService {
    String addStudent(StudentSaveDTO studentSaveDTO);

    List<StudentDTO> getAllStudents();

    String updateStudent(StudentUpdateDTO studentUpdateDTO);

    boolean deleteStudent(int id);
}

CustomerServiceIMPL.java

package com.studentapp.studentapplication.service.IMPL;

import com.studentapp.studentapplication.dto.StudentDTO;
import com.studentapp.studentapplication.dto.StudentSaveDTO;
import com.studentapp.studentapplication.dto.StudentUpdateDTO;
import com.studentapp.studentapplication.entity.Student;
import com.studentapp.studentapplication.repo.StudentRepo;
import com.studentapp.studentapplication.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service
public class StudentIMPL implements StudentService {


    @Autowired
    private StudentRepo studentRepo;

    @Override
    public String addStudent(StudentSaveDTO studentSaveDTO) {

        Student student = new Student(
                studentSaveDTO.getStudentname(),
                studentSaveDTO.getAddress(),
                studentSaveDTO.getMobile(),
                studentSaveDTO.isActive()
        );

        studentRepo.save(student);

        return student.getStudentname();
    }

    @Override
    public List<StudentDTO> getAllStudents() {

        List<Student> getStudents = studentRepo.findAll();
        List<StudentDTO> studentDTOList = new ArrayList<>();

        for(Student s:getStudents)
        {
            StudentDTO studentDTO = new StudentDTO(

                    s.getStudentid(),
                    s.getStudentname(),
                    s.getAddress(),
                    s.getMobile(),
                    s.isActive()

            );
            studentDTOList.add(studentDTO);
        }




        return studentDTOList;

    }

    @Override
    public String updateStudent(StudentUpdateDTO studentUpdateDTO) {

        if(studentRepo.existsById(studentUpdateDTO.getStudentid())) {

            Student student = studentRepo.getById(studentUpdateDTO.getStudentid());

            student.setStudentname(studentUpdateDTO.getStudentname());
            student.setAddress(studentUpdateDTO.getAddress());
            student.setMobile(studentUpdateDTO.getMobile());
            student.setActive(studentUpdateDTO.isActive());

            studentRepo.save(student);

        }
        else
        {
            System.out.println("Student ID no Exist");
        }


        return null;
    }

    @Override
    public boolean deleteStudent(int id) {

        if(studentRepo.existsById(id)) {
            studentRepo.deleteById(id);
        }
        else{
            System.out.println("Student ID no Exist");
        }

        return false;
    }
}

Create the Package Repo

Inside the Package create the interface StudentRepo.java

StudentRepo.java

package com.studentapp.studentapplication.repo;

import com.studentapp.studentapplication.entity.Student;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.stereotype.Repository;

@EnableJpaRepositories
@Repository
public interface StudentRepo extends JpaRepository<Student,Integer> {
}

Do the Database Configuration in application.properties 

spring.application.name=StudentApplication
server.port=8075
spring.jpa.hibernate.ddl-auto=update
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/bvcschool?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

Tailwind CSS + React

Installing  Tailwindcss + React

Following the Guide line here to configure the Tailwindcss + React Click here

After complete the installation and run the project using following command.

now you can see the following file structure

Load More Related Articles
Load More By admin
Load More In React JS
Click To Comment

Leave a Reply

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

Check Also

Laravel 11 CRUD Application

In this tutorial will teach Laravel 11 CRUD Application step by step. Laravel  11 CRUD App…