Java / React / Spring

CRUD – Spring Boot + ReactJS + API Rest + MySQL #2 Components view

- por Artyom - Dejar un comentario

Spring – Backend

Controller

src/main/java/com/tutofox/demo/controllers/HomeController.java

package com.tutofox.demo.controllers;
/../

@Controller
public class HomeController {
	
/...../

	@RequestMapping(value= {"/employee", "/employee/index", "/employee/form", "/employee/edit/{id}"},
			method=RequestMethod.GET) 
	public ModelAndView employee() {
		ModelAndView model = new ModelAndView();
		model.setViewName("Employee");
		return model;
	}

}

View

src/main/resources/templates/Employee.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Welcome to CodeIgniter 4 + React.js!</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<style> .navbar{margin-bottom: 20px;} </style>
</head>
<body>
<div class="container" style="padding:20px;">
	<h1 style="text-align:center;">
		<a href="/employee">
			Full Stack - Spring Boot & React.js 
		</a>
	</h1>
	<hr> 
  
  <div id="main-employee"></div>
  <script src="/built/bundle.js"></script>
  
</div> 
</body>
</html>

ReactJS – Frontend

React router

npm install react-router-dom

src/main/resources/js/app.js

require('./components/Main');

src/main/resources/js/components/Main.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Nav from "./Nav"
import Form from "./employee/Form"
import List from "./employee/List"
import Edit from "./employee/Edit"

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

export default class Main extends Component {
  render() {
    return (
      <Router>
        <main>
          <Nav/>
          <Switch>
            <Route path="/employee/index" exact component={List} />
            <Route path="/employee/form"  component={Form} />
            <Route path="/employee/edit/:id" component={Edit} />
          </Switch>
        </main>
      </Router>
    )
  }
}
// for <div id="main-customer"></div>
ReactDOM.render(<Main />, document.getElementById('main-employee'));

src/main/resources/js/components/Nav.js

import React, { Component } from 'react'; 
import { Link } from "react-router-dom";
export default class Nav extends Component {
  render() {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
        <div class="collapse navbar-collapse" id="navbarsExample09">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <Link class="nav-link" to="/employee/index">List  </Link>
            </li>
            <li class="nav-item">
              <Link class="nav-link" to="/employee/form">Create</Link>
            </li>
            <li class="nav-item">
              <Link class="nav-link" to="/employee/edit/5">Edit</Link>
            </li>
          </ul>
        </div>
      </nav>
    )
  }
}

src/main/resources/js/components/employee/List.js

import React, { Component } from 'react'; 
export default class List extends Component {
  render() {
    return (
      <section>
        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Address</th>
              <th scope="col">Phone</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>John Doe</td>
              <td>john@example.com</td>
              <td>California Cll 100</td>
              <td>3101111111</td>
              <td>
                <a href="#" class="btn btn-light"> Edit </a>
                <a href="#" class="btn btn-danger"> Delete </a>
              </td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>John Doe</td>
              <td>john@example.com</td>
              <td>California Cll 100</td>
              <td>3101111111</td>
              <td>
                <a href="#" class="btn btn-light"> Edit </a>
                <a href="#" class="btn btn-danger"> Delete </a>
              </td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>John Doe</td>
              <td>john@example.com</td>
              <td>California Cll 100</td>
              <td>3101111111</td>
              <td>
                <a href="#" class="btn btn-light"> Edit </a>
                <a href="#" class="btn btn-danger"> Delete </a>
              </td>
            </tr>

          </tbody>
        </table>
      </section>
    )
  }
}

src/main/resources/js/components/employee/Form.js

import React, { Component } from 'react';

export default class Form extends Component {
  render() {
    return (
      <div>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">Name employee</label>
            <input type="text" class="form-control" placeholder="Name" />
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="email">Email</label>
	          <input type="email" class="form-control" placeholder="you@example.com" />
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="address">Address</label>
	          <input type="text" class="form-control" placeholder="1234 Main St" />
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="phone">Phone </label>
	          <input type="text" class="form-control" placeholder="123467890" />
          </div>
        </div>

				<div class="row">
					<div class="col-md-6 mb-3">
		      	<button class="btn btn-primary btn-block" type="submit">Save</button>
					</div>
				</div>
      </div>
    )
  }
}

src/main/resources/js/components/employee/Edit.js

import React, { Component } from 'react';

export default class Edit extends Component {
  render() {

    let userId = this.props.match.params.id;

    return (
      <div>
        <h4>Edit customer {userId} </h4>
        <hr />
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">Name employee</label>
            <input type="text" class="form-control"/>
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="email">Email</label>
	          <input type="email" class="form-control" placeholder="you@example.com" />
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="address">Address</label>
	          <input type="text" class="form-control" placeholder="1234 Main St" />
          </div>
        </div>

				<div class="row">
          <div class="col-md-6 mb-3">
						<label for="address">Phone </label>
	          <input type="text" class="form-control" placeholder="123467890" />
          </div>
        </div>

				<div class="row">
					<div class="col-md-6 mb-3">
		      	<button class="btn btn-primary btn-block" type="submit">Save</button>
					</div>
				</div>
      </div>
    )
  }
}

Entradas relacionadas

Tutorial Fullstack: React Typescript + Spring Boot + PostgreSQL

Tutorial Fullstack: React Typescript + Spring Boot + MySQL

Spring Boot JPA CRUD REST API

Acerca de Artyom

Ver todas las entradas de Artyom →

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *