SpringMVC: Autenticação com Spring Security, API REST e AJAX , Falha ao enviar oferta ao banco de dados | Spring MVC: autenticação com Spring Security, API Rest e AJAX

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso Spring MVC: autenticação com Spring Security, API Rest e AJAX, no capítulo Validações com Vue.js e atividade Criando ofertas

por Natan Andrade De Lima

| 115.8k xp | 13 posts

<!-- o logo ta no arquivo base.html -->
<div th:replace="~{base :: logo}"></div>

<!-- o menu ta no arquivo base.html -->
<div th:replace="~{base :: menu}"></div>

<div class="container" id="ofertas">

    <div th:replace="~{base :: titulo('Faça a sua Oferta')}"></div>

    <div class="card mb-3" v-for="pedido in pedidos">
        <div class="card-header  alert alert-dark">{{pedido.nomeProduto}}</div>

        <div class="card-body">
            <div class="row">
                <div class="col-12 col-sm-8 mb-3">

                    <div>Produto</div>
                    <div>
                        <a v-bind:href="pedido.urlDoProdoto">{{pedido.nomeProduto}}</a>
                    </div>

                    <div>Descrição</div>
                    <div>
                        <textarea disabled="disabled" class="form-control">{{pedido.descricao}}</textarea>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-5">
                            Valor: <input v-bind:class="{'is-valid':pedido.errors.valor !==''}" class="form-control"
                                v-model="pedido.valorNegociado">
                            <div v-if="pedido.errors.valor" class="invalid-feddback">{{pedido.errors.valor}}</div>
                        </div>
                        <div class="col-md-7">
                            Data de entrega: <input v-bind:class="{'is-valid':pedido.errors.dataDeEntrega !==''}" class="form-control"
                                v-model="pedido.dataDeEntrega">
                        </div>
                        <div v-if="pedido.errors.dataDeEntrega" class="invalid-feddback">{{pedido.errors.dataDeEntrega}}</div>

                    </div>
                    <div class="mt-3">
                        <label>Comentário</label>
                        <div>
                            <textarea class="form-control" v-model="pedido.comentario"></textarea>
                        </div>
                    </div>
                    <button v-if="pedido.ofertaEnviada" class="btn btn-success mt-3">Oferta
                        Enviada</button>

                    <button v-else v-on:click="enviarOferta(pedido)"
                        class="btn btn-primary mt-3" >Enviar Oferta</button>

                </div>
                <div class="col-12 col-sm-4">
                    <div>
                        <img class="img-thumbnail" v-bind:src="pedido.urlDaImagem" alt="">
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function onLoad() {

        var app = new Vue(
                {
                    el : '#ofertas',
                    data : {
                        pedidos : [ ]
                    },
                    mounted (){
                        axios
                            .get('http://localhost:8080/api/pedidos/aguardando')
                            .then(response => {
                                //mudar de botão
                                response.data.forEach(pedido => {
                                    pedido.ofertaEnviada = false;
                                    pedido.errors = {
                                            valor: '',
                                            dataDeEntrega: ''
                                    }
                                })
                                //reposta do pedido
                                this.pedidos = response.data
                            })
                    },
                    methods:{
                        enviarOferta: function(pedido){
                            pedido.errors = {
                                    valor: '',
                                    dataDeEntrega: ''
                            }
                            axios
                            .post('http://localhost:8080/api/ofertas'),{
                                pedidoId: pedido.id,
                                valor: pedido.valorNegociado,
                                dataDeEntrega: pedido.dataDeEntrega,
                                comentario: pedido.comentario
                            }
                            .then(response => pedido.ofertaEnviada = true)
                            .catch(error => {
                                console.log(error.reponse.data.errors).forEach(error => {
                                    pedido.errors[error.field] = error.defaultMessage;
                                })
                            });
                        }
                    }

                });
    }
</script>

<!-- importes -->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>

```Quando eu clico para da uma oferta para o produto, não envia a oferta e aparece esse erro no terminal:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

solução!

por Natan Andrade De Lima

| 115.8k xp | 13 posts

08/07/2022

package br.com.mvc.springmvc.api;

import java.util.Optional;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;

import br.com.mvc.springmvc.dto.RequisicaoNovaOferta; import br.com.mvc.springmvc.model.Oferta; import br.com.mvc.springmvc.model.Pedido; import br.com.mvc.springmvc.repository.PedidoRepository;

//salva as ofertas dadas @RestController @RequestMapping("/api/ofertas") public class OfertasRest {

@Autowired
private PedidoRepository pedidoRepository;

@PostMapping
public Oferta criaOferta(@Valid @RequestBody RequisicaoNovaOferta requisicao) {
    Optional<Pedido> pedidoBuscado = pedidoRepository.findById(requisicao.getPedidoId());

    if (!pedidoBuscado.isPresent()) {
        return null;
    }

    Pedido pedido = pedidoBuscado.get();
    Oferta nova = requisicao.toOferta();

    nova.setPedido(pedido);
    pedido.getOfertas().add(nova);
    pedidoRepository.save(pedido);


    return nova;

}

}

package br.com.mvc.springmvc;

import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; import org.springframework.security.core.userdetails.User; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

@SuppressWarnings("deprecation") @Configuration @EnableWebSecurity public class WebSecurityConfig extends WebSecurityConfigurerAdapter{

@Autowired
private DataSource dataSource;

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
        .antMatchers("/home/**")
        .permitAll()
        .anyRequest().authenticated()
        .and()
            .formLogin(form -> form
                    .loginPage("/login")
                    .defaultSuccessUrl("/usuario/pedido", true)
                    .permitAll())
            .logout(logout -> logout.logoutUrl("/logout")
                .logoutSuccessUrl("/home"))
            .csrf().disable();
}

@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();

    //para criar usuario

// UserDetails user = // User.builder() // .username("teste2") // .password(encoder.encode("123")) // .roles("ADM") // .build(); // auth.jdbcAuthentication() .dataSource(dataSource) .passwordEncoder(encoder); // .withUser(user); } }

package br.com.mvc.springmvc.model;

import java.math.BigDecimal; import java.time.LocalDate;

import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.ManyToOne;

@Entity public class Oferta {

@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private BigDecimal valor;

private LocalDate dataDeEntrega;

private String comentario;

@ManyToOne(fetch = FetchType.LAZY)
private Pedido pedido;

public Long getId() {
    return id;
}

public void setId(Long id) {
    this.id = id;
}

public BigDecimal getValor() {
    return valor;
}

public void setValor(BigDecimal valor) {
    this.valor = valor;
}

public LocalDate getDataDeEntrega() {
    return dataDeEntrega;
}

public void setDataDeEntrega(LocalDate dataDeEntrega) {
    this.dataDeEntrega = dataDeEntrega;
}

public String getComentario() {
    return comentario;
}

public void setComentario(String comentario) {
    this.comentario = comentario;
}

public Pedido getPedido() {
    return pedido;
}

public void setPedido(Pedido pedido) {
    this.pedido = pedido;
}

}

por Rodrigo da Silva Ferreira Caneppele

| 4937.8k xp | 8626 posts

Instrutor Instrutor

15/06/2023

Oi!

A princípio foi algum erro com o JS ao enviar os dados. Pode mandar aqui o log completo do erro no console do eclipse?