Quero montar o front-end um programa java, posso fazer em JavaScript? se sim como seria essa interação?

Programação Java
#1

Como eu posso fazer a comunicação do meu backend Java e meu front em JS?

#2

Vc usaria o JavaWeb (Spring Boot) como backend, e no javascript vc usaria as endpoints, por exemplo,

pra salvar os usuarios: POST http://localhost:1010/minha-api/cadastrar-usuario

Pra listar os usuários: GET http://localhost:1010/minha-api/usuarios

mas eu acho muito mais fácil vc fazer tudo em javascript, node (server) + front (de sua escolha)

#3

pode ser, mas é que eu já fiz o back em Java só queria por uma interface tipo de banco digital, tentei JavaFx, mas ta impossivel, to desde 3 da manhã tentando montar isso no JavaFx, com react é bem mais fácil, mas tava sem saber fazer essa comunicação.

2 curtidas
#4

JavaFx é nadar contra a maré.

#5

tlgd, essa ferramenta é um inferno, mas era só um projetinho pessoal, fiz uma simulação de banco com tudo que aprendi até agr, não é muita coisa, mas queria deixar legalzinho pra eu ir adicionando novas coisas, pra aprendizado

#6

com react voce vai usar o axios, e chamar seus endpoints usando o hook useEffect() ao carregar seus componentes para acessar a API

import React, { useState, useEffect } from 'react';

import api from '../../services/api';

import ContentHeader from '../common/template/contentHeader';
import Content from '../common/template/content';


export default function ListagemAptos({ history }) {
    const [assistidos, setAssistidos] = useState([]);

    useEffect(() => {
        async function loadAssistidos() {
            const response = await api.get('/assistidos/aptos');
            setAssistidos(response.data);
        }
        loadAssistidos();
        return () => setAssistidos([])
    }, []);

    async function handleEfetuarCadastro(codigo) {
        const response = await api.put(`/assistidos/cadastrar/${codigo}`);
        if (response.status === 204) {
            setAssistidos(assistidos.filter(assistido => assistido.id !== codigo))
        }
    }

    return (
        <>
            <ContentHeader title="Assistidos aptos" small="efetuar cadastro" />
            <Content>
                <table className="table table-stripped">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Ponto</th>
                            <th className="table-actions">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {assistidos.map(assistido => (
                            <tr key={assistido.id}>
                                <td>{assistido.nome}</td>
                                <td className="text-center">{assistido.ponto.id}</td>
                                <td className="text-center">
                                    <button type="button"
                                        className="btn btn-xs btn-success"
                                        onClick={() => handleEfetuarCadastro(assistido.id)}>
                                        <i className="fa fa-check"></i>
                                    </button>
                                </td>
                            </tr>
                        ))}
                        {assistidos.length===0 && <tr><td colSpan="3">Nenhum assistido apto para cadastro</td></tr>}
                    </tbody>
                </table>
            </Content>
        </>
    )
}
1 curtida