通过 POST 从 Angular 向 Springboot 发送数据

Question

我正在尝试将一个 json 从我的前端 angular 项目发送到后端，即 springboot。

这是我第一次使用这两种技术，所以我缺乏经验。

我不太确定我在 Angular 中的 http post 方法是否错误，或者我的后端是否没有收听应该到来的数据。

我将附上这两个代码部分，以便您可以帮助我。提前谢谢！

这是 chrome 控制台的图片： Http 错误代码 404 http error image

后端：

@RestController
@RequestMapping
@CrossOrigin(origins = "http://localhost:4200")
public class RequestController {

    private RolesRequestRepository rolesRequestRepository;

    @PostMapping("/sendrolesrequest")
    void addRequest(@RequestBody RolesRequest rolesRequest) {
        rolesRequestRepository.save(rolesRequest);
    }

    @GetMapping("/sendrolesrequest")
    public List<RolesRequest> getRequests() {
        return (List<RolesRequest>) rolesRequestRepository.findAll();
    }

}


@Entity
public class RolesRequest {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;
    private String requester = "";
    private String recipient = "";

    public RolesRequest(String recipient, String requester) {
        this.recipient = recipient;
        this.requester = requester;
    }

    public RolesRequest(){

    }

    public long getId() {
        return id;
    }

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

    public String getRequester() {
        return requester;
    }

    public void setRequester(String requester) {
        this.requester = requester;
    }

    public String getRecipient() {
        return recipient;
    }

    public void setRecipient(String recipient) {
        this.recipient = recipient;
    }
}

这是前端的角度部分：

@Injectable()
export class RequestService {
  sendRolesRequestUrl = 'sendrolesrequest';  // URL to web api
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('RequestService');
  }

  sendRolesRequest (rolesRequest: RequestModel): Observable<RequestModel> {
    //console.log("addRolesRequest try post:" + rolesRequest.print());
    return this.http.post<RequestModel>(this.sendRolesRequestUrl, rolesRequest, httpOptions)
      .pipe(
        catchError(this.handleError('sendRolesRequest', rolesRequest))
      );
  }

  testPost() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json; charset=utf-8');
    this.http.post(this.sendRolesRequestUrl, {'key1': 'value1', 'key2': 'value2'}, httpOptions)
      .subscribe(() => {}, err => console.error(err));
  }
}

export class RequestFormulaComponent implements OnInit {

  onSendRequest() {
    this.requestService
      .sendRolesRequest(this.rolesRequest)
      .subscribe();
  }
}

如果有人在这里帮助我，我会非常高兴。我在这个话题上挣扎了一个多星期。 这甚至是后端应用程序与网页通信的方式吗？如果没有，我该怎么做？

Answer 1

您使用 JPA 实体作为 DTO，并且没有 setter/getter，也没有默认构造函数，请像这样修改您的 RolesRequest：

 @Entity
    public class RolesRequest {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;
    private String requester = "";
    private String recipient = "";

    public RolesRequest() { }
    public RolesRequest(String recipient, String requester) {
        this.recipient = recipient;
        this.requester = requester;
    }
    public String getRequester() { return this.requester; }
    public void setRequester(String r) { this.requester = r;}
    public String getRecipient() { return this.recipient; }
    public void setRecipient(String r) { this.recipient = r;}

Answer 2

您的后端和 Angular 应用程序是否在同一个端口上运行？ （后端和前端组合在同一个应用程序中）

您正在调用http://localhost:4200/sendrolesrequest，我认为这是对 Angular 应用程序本身的请求。您收到 HTTP 404 错误代码（未找到）

您应该调用后端应用程序的端点。例如，它在端口 8080 上运行，因此请调用 http://localhost:8080/sendrolesrequest（如果后端在另一个端口上运行，则使用其他端口）

变化：

sendRolesRequestUrl = 'sendrolesrequest';

到：

sendRolesRequestUrl = 'http://localhost:8080/sendrolesrequest';