java通过POST将数据从Angular发送到Springboot

Question

我正试图从前端angular项目向后端springboot发送一个json

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

我不太确定我在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，也没有默认构造函数，请修改您的角色请求，如下所示：

 @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';