我的 angular 前端应用程序无法向我的后端 REST 应用程序发送 PUT 请求

Question

我在一个 tomcat 实例上有两个 Web 应用程序运行。其中之一是 Spring MVC Rest 应用程序，它具有基本结构、一个休息控制器、一个服务层和与 postgresql 交互的 DAO 层。下面你可以看到我的 RestController

package com.hizir.acil.main.controller;


import com.hizir.acil.main.model.Donor;
import com.hizir.acil.main.service.DonorService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.util.UriComponentsBuilder;
import org.joda.time.*;

import javax.validation.Valid;

import java.util.List;


/**
 * Created by TTTDEMIRCI on 12/29/2015.
 */


@RestController
@RequestMapping("/")
public class AppController {

    @Autowired
    DonorService donorService;

    @Autowired
    MessageSource messageSource;

/*
     * This method will list all existing Donors in for JSP .
     */

    @RequestMapping(value = { "/", "/listAllDonors" }, method = RequestMethod.GET)
    public String listDonors(ModelMap model) {

        List<Donor> donors = donorService.findAllDonors();
        model.addAttribute("donors", donors);
        return "alldonors";
    }
    /*
     * This method will list all existing Donors in json format.
     */
    @RequestMapping(value = {  "/listjson" }, method = RequestMethod.GET, produces = "application/json")
    public ResponseEntity<List<Donor>> listDonors() {
        List<Donor> donors = donorService.findAllDonors();
        if (donors.isEmpty()) {
            return new ResponseEntity<List<Donor>>(HttpStatus.NO_CONTENT);
        }
        return new ResponseEntity<List<Donor>>(donors, HttpStatus.OK);
    }

    /*
     * This method will provide the medium to add a new donor.
     */
    @RequestMapping(value = { "/new" }, method = RequestMethod.GET)
    public String newDonor(ModelMap model) {
        Donor donor = new Donor();
        model.addAttribute("donor", donor);
        model.addAttribute("edit", false);
        return "registration";
    }



  //-------------------Create a Donor--------------------------------------------------------

    @RequestMapping(value = "/listjson", method = RequestMethod.POST)
    public ResponseEntity<Void> createUser(@RequestBody Donor donor,    UriComponentsBuilder ucBuilder) {
        System.out.println("Creating Donor " + donor.getName());

//        if (donorService.isUserExist(user)) {
//            System.out.println("A User with name " + user.getUsername() + " already exist");
//            return new ResponseEntity<Void>(HttpStatus.CONFLICT);
//        }

        donor.setCreationDate(new LocalDate());
             donorService.saveDonor(donor);


            System.out.println("donor created.............."+donor.getId());
        HttpHeaders headers = new HttpHeaders();
        headers.setLocation(ucBuilder.path("/listjson/{id}").buildAndExpand(donor.getId()).toUri());
        return new ResponseEntity<Void>(headers, HttpStatus.CREATED);
    } 


  //------------------- Update a donor --------------------------------------------------------


    @RequestMapping( method = RequestMethod.PUT)
    public ResponseEntity<Donor> updateUser(@PathVariable("id") int id, @RequestBody Donor donor) {
        System.out.println("Updating donor " + id);

        Donor currentDonor = donorService.findById(id);

//        if (currentUser==null) {
//            System.out.println("User with id " + id + " not found");
//            return new ResponseEntity<User>(HttpStatus.NOT_FOUND);
//        }

        currentDonor.setName(donor.getName());
        currentDonor.setSurname(donor.getSurname());
        currentDonor.setBloodType(donor.getBloodType());

        donorService.updateDonor(currentDonor);
        return new ResponseEntity<Donor>(currentDonor, HttpStatus.OK);
    }


    /*
     * This method will be called on form submission, handling POST request for
     * saving donor in database. It also validates the user input
     */
    @RequestMapping(value = { "/new" }, method = RequestMethod.POST)
    public String saveDonor(@Valid Donor donor, BindingResult result,
                               ModelMap model) {

        if (result.hasErrors()) {
            return "registration";
        }


        donorService.saveDonor(donor);

        model.addAttribute("success", "Donor " + donor.getName() + " registered successfully");
        return "success";
    }


    /*
     * This method will provide the medium to update an existing Donor.
     */
    @RequestMapping(value = { "/edit-{id}-donor" }, method = RequestMethod.GET)
    public String editDonor(@PathVariable int id, ModelMap model) {
        Donor donor= donorService.findById(id);
        model.addAttribute("donor", donor);
        model.addAttribute("edit", true);
        return "registration";
    }

    /*
     * This method will be called on form submission, handling POST request for
     * updating donor in database. It also validates the user input
     */
    @RequestMapping(value = { "/edit-{id}-donor" }, method = RequestMethod.POST)
    public String updateDonor(@Valid Donor donor, BindingResult result,
                                 ModelMap model, @PathVariable int id) {

        if (result.hasErrors()) {
            return "registration";
        }

//        if(!service.isEmployeeSsnUnique(employee.getId(), employee.getSsn())){
//            FieldError ssnError =new FieldError("employee","ssn",messageSource.getMessage("non.unique.ssn", new String[]{employee.getSsn()}, Locale.getDefault()));
//            result.addError(ssnError);
//            return "registration";
//        }

        donorService.updateDonor(donor);

        model.addAttribute("success", "Donor " + donor.getName()  + " updated successfully");
        return "success";
    }


    /*
     * This method will delete a donor  by it's id value.
     */
    @RequestMapping(value = { "/delete-{id}-donor" }, method = RequestMethod.GET)
    public String deleteDonorById(@PathVariable int id) {
        donorService.deleteDonorById(id);
        return "redirect:/listAllDonors";
    }

}

如您所见，有多个请求映射。列出捐助者和创建捐助者在前端应用程序中运行良好，我可以创建新的捐助者并列出它们。但是当我尝试更新任何请求时，都没有访问这个 rest 控制器方法。下面是我的 angular frontedn 应用服务。

App.factory('User', [
        '$resource',
        function($resource) {
            return $resource(
                    'http://localhost:8080/HizirAcilBackendApp/listjson/:id', {id: '@id'}, {
                        update : {
                            method : 'PUT'
                        }
                    }, 
                    {
                        stripTrailingSlashes: false
                    });
        } ]);

下面是我的 angular 控制器

/**
 * 
 */
'use strict';

App.controller('UserController', ['$scope', 'User', function($scope, User) {
          var self = this;
          self.user= new User();

          self.users=[];

          self.fetchAllUsers = function(){
              self.users = User.query();

          };

          self.createUser = function(){
              self.user.$save(function(){
                  self.fetchAllUsers();
              });
          };

          self.updateUser = function(){
              self.user.$update(function(){
                  self.fetchAllUsers();
              });
          };

         self.deleteUser = function(identity){
             var user = User.get({id:identity}, function() {
                  user.$delete(function(){
                      console.log('Deleting user with id ', identity);
                      self.fetchAllUsers();
                  });
             });
          };

          self.fetchAllUsers();

          self.submit = function() {
              if(self.user.id==null){
                  console.log('Saving New User', self.user);    
                  self.createUser();
              }else{
                  console.log('Upddating user with id ', self.user.id);
                  self.updateUser();
                  console.log('User updated with id ', self.user.id);
              }
              self.reset();
          };

          self.edit = function(id){
              console.log('id to be edited', id);
              for(var i = 0; i < self.users.length; i++){
                  if(self.users[i].id === id) {
                     self.user = angular.copy(self.users[i]);
                     break;
                  }
              }
          };

          self.remove = function(id){
              console.log('id to be deleted', id);
              if(self.user.id === id) {//If it is the one shown on screen, reset screen
                 self.reset();
              }
              self.deleteUser(id);
          };


          self.reset = function(){
              self.user= new User();
              $scope.myForm.$setPristine(); //reset Form
          };

      }]);

我正在尝试在一个地方学习 Angular、休息和 spring，我认为我取得了很好的进步，但我仍然遇到这个 PUT 请求问题。任何帮助和评论将不胜感激。问候土库曼

Answer 1

看起来你的 RequestMapping 是错误的，你没有在那里指定路径:

@RequestMapping( method = RequestMethod.PUT)

您需要设置一个 apth 并添加 {id} 以便 spring 可以将其映射为 @PathVariable

@RequestMapping(value = "/listjson/{id}", method = RequestMethod.POST)

我的 angular 前端应用程序无法向我的后端 REST 应用程序发送 PUT 请求

My angular frontend App can not send PUT request to my backend REST app

rest

spring

tomcat

angularjs

spring-restcontroller