In this post, we will learn how to create your first web application todo list using spring boot and react js with mysql as database and deployement with docker.
Before begin we should have java 11 or 8 with nodejs installed in our machine.

First we create back end app :

For creating our spring application we can use the web site to init our project : Link
and chose the dependency we want as define in the next picture :

.Lombok :
for use the annotion to create getter,setter and constructors.
.Spring web :
for building a REST FULL api.
.Spring data JPA:
for persisting data to sql using JPA
.Mysql driver :
for connection to database MYSQL

Open the project in our IDE :

I use Intellij IDE , if you want to use eclipse it doesn't matter, just after dowlnload the zip file, extracted and open it in IDE that you use.
After that create 3 packages :

Entitie : adding the entities that will be use to persist data
Repository : adding repository
Service : create our services
Controller : create the controllers for the end point.

Let's create our classes :

Entity

As we know , we want to create a todo list application so we will create a class Todo :

@Entity()
@NoArgsConstructor()
@AllArgsConstructor()
@Getter
@Setter()
@ToString()
public class Todo {
    @Id()
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String task;
    private boolean isCompleted;

    public Todo(String task, boolean isCompleted) {
        this.task = task;
        this.isCompleted = isCompleted;
    }
}

Repository

The repository is Interface implement JpaRepository and have many fonction for persisting data .

@RepositoryRestResource
public interface TodoRepository extends JpaRepository<Todo, Long> {
}

Service

The service represent service layer that contains the application proccessing

@Service
public class TodoService {
    private final TodoRepository todoRepository;

    public TodoService(TodoRepository todoRepository) {
        this.todoRepository = todoRepository;
    }

    public List<Todo> getAllTodos() {
        return todoRepository.findAll();
    }

    public Optional<Todo> getTodo(Long id) {
        return todoRepository.findById(id);
    }

    public Todo UpdateTodo(Long id, Todo todo) {
        todo.setId(id);
        return todoRepository.save(todo);
    }

    public Todo addTodo(Todo todo) {
        return todoRepository.save(todo);
    }

    public void deleteTodo(Long id) {
        todoRepository.deleteById(id);
    }

}

Controller

The controller represente the web layer of application, the class annotaded with @RestController to tell spring container to init the class as class contains the end point for the application .

@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
public class TodoRestController {
    private final TodoService todoService;


    public TodoRestController(TodoService todoService) {
        this.todoService = todoService;
    }

    @GetMapping("/listTodos")
    public List<Todo> getAllTodos() {
        return todoService.getAllTodos();
    }

    @GetMapping("/todo/{id}")
    public Todo getTodo(@PathVariable("id") Long id) {
        return todoService.getTodo(id).isPresent() ? todoService.getTodo(id).get() : null;
    }

    @PutMapping("/updateTodo/{id}")
    public Todo UpdateTodo(@PathVariable("id") Long id, @RequestBody Todo todo) {
        todo.setId(id);
        return todoService.UpdateTodo(id, todo);
    }

    @PostMapping("/addTodo")
    public Todo addTodo(@RequestBody Todo todo) {
        return todoService.addTodo(todo);
    }

    @DeleteMapping("/deleteTodo/{id}")
    public void deleteTodo(@PathVariable("id") Long id) {
        todoService.deleteTodo(id);
    }

}

Config data Source

The most popular adventege of spring is autoconfiguration thatway for connecting to the database we must implemnt the properties in application.propertie .

spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/SPRING_DB
spring.datasource.username=root
spring.datasource.password=root

RUN application

If you use maven in terminal you can run your application using this commande :
mvn spring-boot:run but first create your instance of mysql

Blog

Create your first spring / react application

Abdelouahedd

First we create back end app :

Open the project in our IDE :

Let's create our classes :

Entity

Repository

Service

Controller

Config data Source

RUN application

Test the application :

Add todo :

update todo :

List of todo :

Delete Todo :

Join Our Newsletter. No Spam, Only the good stuff.

Related