Olá a todos. Minha duvida é como eu posso implementar um formulário feito em HTML CSS e os frameworks Thymeleaf e bootStrap.
Eu consigo fazer o relacionamento de chave primaria e estrangeira sem problemas no Back-End. Mas em um formulario só é possivel atribuir os valores somente de uma entidade. Exemplo: O thymeleaf pega somente um objeto por vez para a criação de um registro ao banco de dados, se pessoa tiver uma chave estrangeira de Cidade, ou seja, aonde ela mora ele não consegue vincular no front-end porque a chamada de objeto é somente para um, tipo pessoa. Irei colocar meu codigo para melhor entendimendo do problema.
OBS.: Estrou começamdo meus estudos em desenvolvimento Front-end.
Front-end em html e usando o framework thymeleaf para a chamada do objeto e seus atributos:
<!DOCTYPE html>
<html lang="pt-br" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
<title>Pessoa</title>
<meta name="autor" content="Jameplay"/>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/006642858d.js"></script>
</head>
<body>
<div th:replace="fragmentos/fragmentos :: cabecalho"></div>
<section class ="neo-section" style="background-image: url(#)">
<h4 class="cadastro" style="margin-top: 50px;margin-left: 70px">Cadastro</h4> <!-- fata responsividade -->
<hr>
<div class="container-Form">
<form method="post" action="/InserirPessoas" th:object="${pessoa}">
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('nome')}">
<label class="validation-message" th:errors="*{nome}"></label>
</div>
<label>Nome:</label>
<input placeholder="Ex: Maria Fernandes" th:field="*{nome}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('cpf')}">
<label class="validation-message" th:errors="*{cpf}"></label>
</div>
<label>CPF:</label>
<input placeholder="Exemplo: 000.000.000-00 " th:field="*{cpf}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('rg')}">
<label class="validation-message" th:errors="*{rg}"></label>
</div>
<label>RG:</label>
<input placeholder="Exemplo: 000.000-00" th:field="*{rg}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('rua')}">
<label class="validation-message" th:errors="*{rua}"></label>
</div>
<div class="container">
<label>Selecione o Tipo</label>
<select class="form-control">
<option th:each="identificarPessoa :${T(br.pro.james.Enums.IdentificarPessoa).values()}"
th:value="${identificarPessoa}" th:text="${identificarPessoa}">
</option>
</select>
</div>
<label>Rua:</label>
<input placeholder="Exemplo: Rua Estrada Rj 14" th:field="*{rua}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('numero')}">
<label class="validation-message" th:errors="*{numero}"></label>
</div>
<label>Numero:</label>
<input placeholder="Exemplo: 270" th:field="*{numero}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('bairro')}">
<label class="validation-message" th:errors="*{bairro}"></label>
</div>
<label>Bairro:</label>
<input placeholder="Exemplo: Bairro Cicília" th:field="*{bairro}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('cep')}">
<label class="validation-message" th:errors="*{cep}"></label>
</div>
<label>CEP:</label>
<input placeholder="Exemplo: 00000-000" th:field="*{cep}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('complemento')}">
<label class="validation-message" th:errors="*{complemento}"></label>
</div>
<label>Complemento:</label>
<input placeholder="Exemplo: casa 5" th:field="*{complemento}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('telefone')}">
<label class="validation-message" th:errors="*{telefone}"></label>
</div>
<label>Telefone:</label>
<input placeholder="Exemplo: 0000-0000" th:field="*{telefone}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('celular')}">
<label class="validation-message" th:errors="*{celular}"></label>
</div>
<label>Celular:</label>
<input placeholder="Exemplo:(21) 00000-0000" th:field="*{celular}">
</div>
</div>
<div class="row">
<div class="col-md-6 form-group offset-md-3">
<div class ="alert alert-danger" role="alert" th:if="${#fields.hasErrors('email')}">
<label class="validation-message" th:errors="*{email}"></label>
</div>
<label>Email:</label>
<input placeholder="Exemplo: joãodaSilva@gmail.com" th:field="*{email}">
</div>
</div>
<div class="row">
<div class ="col-md-6 form-group offset-md-3">
<button type="submit" class="btn-save btn-primary">Salvar</button>
</div>
</div>
</form>
</div>
</section>
<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Back-end de iteração:
package br.pro.james.drogaria.controller;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import br.pro.james.drogaria.domain.Pessoa;
import br.pro.james.drogaria.domain.Produto;
import br.pro.james.drogaria.repository.ProdutoRepository;
@RestController
public class ProdutoController {
@Autowired
private ProdutoRepository produtoRepository;
@GetMapping("/inserirProdutos")
public ModelAndView InserirProdutos(Produto produto) {
ModelAndView mv = new ModelAndView();
mv.setViewName("Produto/formProduto");
mv.addObject("produto",new Produto());
return mv;
}
@PostMapping("InserirProdutos")
public ModelAndView inserirProdutos(@Valid Produto produto, BindingResult br) throws Exception {
ModelAndView mv = new ModelAndView();
if (br.hasErrors()) {
mv.setViewName("Produto/formProduto");
// mv.addObject("msg", "Já existe um produto com a mesma descrição");
} else {
mv.setViewName("Produto/formProduto");
mv.addObject("msg","Salvo ");
produtoRepository.save(produto);
// mv.setViewName("redirect:/listagem-produtos");
}
return mv;
}
@GetMapping("listagem-produtos")
public ModelAndView listagemProdutos(Produto produto) {
ModelAndView mv = new ModelAndView();
mv.setViewName("Produto/listProdutos");
mv.addObject("listProdutos",produtoRepository.findAll());
return mv;
}
@GetMapping("/editarProduto/{codigo}")
public ModelAndView alterar(@PathVariable("codigo") Short codigo) {
ModelAndView mv = new ModelAndView();
mv.setViewName("Produto/editarProduto");
Produto produto = produtoRepository.getById(codigo);
mv.addObject("produto",produto);
return mv;
}
@PostMapping("/editarProduto")
public ModelAndView alterar(@Valid Produto produto, BindingResult br) {
ModelAndView mv = new ModelAndView();
if (br.hasErrors()) {
mv.setViewName("Produto/editarProduto");
mv.addObject("produto");
} else {
mv.setViewName("redirect:/listagem-produtos");
produtoRepository.save(produto);
}
return mv;
}
@GetMapping("excluirProduto/{codigo}")
public ModelAndView excluirProduto(@PathVariable("codigo") Short codigo) {
ModelAndView mv = new ModelAndView();
produtoRepository.deleteById(codigo);
mv.setViewName("redirect:/listagem-produtos");
return mv;
}
}