【问题标题】:problem with sending object in post request from angular to backend in springboot在 Spring Boot 中从 Angular 向后端发送 post 请求中的对象的问题
【发布时间】:2024-01-08 11:51:01
【问题描述】:

当我尝试将 post 请求从 Angular 发送到 Spring Boot 时遇到问题。我必须面对 404 Not Found 错误。这是我的角度服务代码:

import { DonatorDTO } from '../models/donatorDTO';
import { HttpHeaders, HttpClient } from "@angular/common/http";
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class DonatorsService {
    private watKrewDonationUrl = "http://localhost:8080/donators";

    constructor(private _http: HttpClient){}

    public addDonator(donatorDTO: DonatorDTO): Observable<DonatorDTO>{
        return this._http.post<DonatorDTO>(this.watKrewDonationUrl, donatorDTO);
    }
}

这里是角度组件代码:

import { DonatorDTO } from './../../models/donatorDTO';

import { DonatorsService } from './../../services/donators.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, NgForm, Validators } from '@angular/forms';

@Component({
  selector: 'app-donators',
  templateUrl: './donators.component.html',
  styleUrls: ['./donators.component.css']
})
export class DonatorsComponent implements OnInit {

  donatorForm: NgForm;

  constructor(private donatorService: DonatorsService) {}
  ngOnInit(): void {

  }

  donatorDTO: DonatorDTO = new DonatorDTO();
  companies: string [] =['1. kompania','2. kompania','3. kompania','4. kompania','5. kompania','6. kompania','7. kompania','8. kompania',
                        '9. kompania','10. kompania','11. kompania','12. kompania','13. kompania','14. kompania','15. kompania','16. kompania',
                        '17. kompania','18. kompania','19. kompania','20. kompania','21. kompania'];
  bloodGroups: string [] = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', '0+', '0-'];
  ranks: string [] = ['szer. pchor.', 'st. szer. pchor.', 'kpr. pchor.', 'st. kpr. pchor.', 'plut. pchor.', 'sierż. pchor.'];

  createDonator() {
    console.log(this.donatorDTO);
    this.donatorService.addDonator(this.donatorDTO).subscribe(data => {
      console.log(data)
    })
  }
  
}

这是.html代码

<!DOCTYPE html>
<html lang="pl-PL">
<body>
    <div class="container">
        <div class="col-md-6">
            <form #donatorForm="ngForm" (ngSubmit) = "createDonator()" >
                <div class="form-group">
                    <input type="text" class = "form-control" [(ngModel)]="donatorDTO.name"  name="name" placeholder="np. Jan"  >
                    <small id="nameHelp" class="form-text text-muted">Podaj imię dawcy</small>
                </div>
                <div class="form-group">
                    <input type="text" class = "form-control" [(ngModel)]="donatorDTO.surname"  name="surname" placeholder="np. Kowalski"  >
                    <small id="surnameHelp" class="form-text text-muted">Podaj nazwisko dawcy</small>
                </div>
                <div class="form-group">
                    <input type="email" class = "form-control" [(ngModel)]="donatorDTO.email"  name="email" placeholder="np. jan.kowalski@wp.pl" >
                    <small id="emailHelp" class="form-text text-muted">Podaj email na którego dawca będzie otrzymywał wiadomości związane z HDK</small>
                </div>
                <div class="form-group">
               <select class="form-control" [(ngModel)]="donatorDTO.militaryRank" name="militaryRank">
                   <option *ngFor="let rank of ranks" [ngValue]="rank">{{rank}}</option>
               </select>
                <small id="rankHelp" class="form-text text-muted">Podaj stopień wojskowy</small>
                </div>
                <div class="form-group">
                <select [(ngModel)]="donatorDTO.companyName"  name="company" >
                    <option *ngFor="let cmp of companies" [ngValue]="cmp">{{cmp}}</option>
                </select>
                <small id="companyHelp" class="form-text text-muted">Wybierz pododdział dawcy</small>
                </div>
                <div class="form-group">
                    <select [(ngModel)]="donatorDTO.bloodGroup" name="bloodGroup" >
                        <option *ngFor="let blood of bloodGroups" [ngValue]="blood">{{blood}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class = "btn btn-success"  type="submit">Dodaj dawcę do bazy</button>
                </div>
            </form>
            
        </div>
    </div>
</body>
</html>

这是模型组件:

export class DonatorDTO {
    name: string;
    surname: string;
    email: string;
    militaryRank: string;
    companyName: string;
    bloodGroup: string;
}

现在是springboot服务代码:

public void addDonator(DonatorDTO donatorDTO) throws MailException {
        if (donatorRepository.existsByEmail(donatorDTO.getEmail())) {
            throw new RuntimeException("User with this e-mail already exists in db");
        } else {
            Donator donator = new Donator();
            Company company = companyRepository.findByCompanyName(donatorDTO.getCompanyName()).orElseThrow(() -> new ResourceNotFoundException("Company not found"));
            BloodGroup blood = bloodGroupRepository.findBloodGroupByBloodType(donatorDTO.getBloodGroup()).orElseThrow(() -> new ResourceNotFoundException("Blood group not found"));
            donator.setName(firstLetterToUpperCase(donatorDTO.getName()));
            donator.setSurname(firstLetterToUpperCase(donatorDTO.getSurname()));
            donator.setEmail(donatorDTO.getEmail());
            donator.setMilitaryRank(donatorDTO.getMilitaryRank());
            donator.setCompany(company);
            donator.setBloodGroup(blood);
            blood.setNumberOfDonators(blood.getNumberOfDonators() + 1);
            donator.setNextDonationDate(LocalDate.now());
            donator.setIsCapable(true);
            donatorRepository.save(donator);
            try {
                mailService.helloNotification(donatorDTO);
            } catch (MailException mailException) {
                logger.error("Can't send email with confirmation of addition donator in a database");
                logger.error(mailException.getMessage());
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            } catch (MessagingException e) {
                e.printStackTrace();
            }
        }
    }

和控制器代码:

@RestController
public class DonatorController {

    @Autowired
    private final DonatorService donatorService;
    private final MailService mailService;

    public DonatorController(DonatorService donatorService, MailService mailService) {
        this.donatorService = donatorService;
        this.mailService = mailService;
    }

    @PostMapping(value = "donators")
    public ResponseEntity addDonator(@RequestBody DonatorDTO donatorDTO) {
        donatorService.addDonator(donatorDTO);
        return new ResponseEntity<>(HttpStatus.OK);
    }
}

如果有人解决我的问题,我将不胜感激

【问题讨论】:

    标签: angular spring-boot post httprequest http-status-code-404


    【解决方案1】:

    在我看来你的@PostMapping 值不对,试试@PostMapping(value = "/donators") 如下:

    @RestController
    public class DonatorController {
    
        private final DonatorService donatorService;
        private final MailService mailService;
    
        public DonatorController(DonatorService donatorService, MailService mailService) {
            this.donatorService = donatorService;
            this.mailService = mailService;
        }
    
        @PostMapping(value = "/donators")
        public ResponseEntity addDonator(@RequestBody DonatorDTO donatorDTO) {
            donatorService.addDonator(donatorDTO);
            return new ResponseEntity<>(HttpStatus.OK);
        }
    }
    

    【讨论】:

    • 不幸的是,我按照您的建议更改后仍然是同样的问题
    • 那您可以分享一下您调用端点时您的Spring Boot应用程序的日志吗?例如,您是否尝试将其称为 Postman?
    • 我尝试使用 swagger 调用端点,然后一切正常。在数据库中创建了新的捐赠者。问题只是当我尝试从角度添加对象时
    • 那么问题出在角码本身,我帮不了你,对不起。
    最近更新 更多