調試AngularJS + Spring MVC + Tomcat Web應用程序

Question

我現在的Java Web開發時代已經落后了大約6年，盡管我作為一名非技術顧問忙於新的生活，但我希望重新回到科技世界並為自己配備一些必要的Web開發技能。

為了讓我開始，我使用本教程安裝了一個流浪盒： https ： //dzone.com/articles/vagrant

...就像一個款待，讓我在我的Windows主機上的Ubuntu盒子立即啟動並運行。 它還附帶了Java 7和我過去幾天仍然非常熟悉的Tomcat應用服務器。 盡管可能有更好的服務器在那里進行練習，但是這個可以工作，我現在將它用於我的修修補補。 本教程附帶的示例Web應用程序也可以使用，因此我確信我的Tomcat在端口8080上的客戶機上運行。

下一步是找到一個好的AngularJS和Spring MVC教程。 再一次，雖然我知道AngularJS是Web開發中的最新熱門，但是Spring MVC可能有點過時（？）但是因為我是一個Java版本的男孩，因為我從Uni-egg中孵化出來我不介意用它來現在。

我找到的教程就是這個： http ： //websystique.com/springmvc/spring-mvc-4-angularjs-example/

我從git下載了項目並將其部署到我的tomcat webapps文件夾中。 在user_service.js文件我離開REST_SERVICE_URI為HTTP：//本地主機：8080 / Spring4MVCAngularJSExample /用戶/因為Tomcat的端口8080上運行Ubuntu的主機盒，我可以在我的客人機器上可以在瀏覽器中應用HTTP ：//192.168.33.10：8080 / Spring4MVCAngularJSExample

問題是應用程序（當它在瀏覽器中顯示時）不會加載在UserServiceImpl類中填充的模擬用戶，並且應該在加載應用程序時顯示。 當我在JavaScript選項卡下檢查我的Firefox控制台時，我從user_controller.js腳本中的fetchAllUsers函數中獲取“在獲取用戶時出錯”錯誤消息。

我懷疑這里的問題是前端（AngularJS $ http服務）無法聯系后端（Spring服務）。 如果后端沒有用戶並返回0，我不會得到錯誤而是一個空集，因此我懷疑其他一些問題。

我的問題是如何從這里調試這個Web應用程序？ 我試圖使用FF Developer工具（調試器）查看前端控制台日志，我必須承認我沒有編寫任何JUnit測試來實際運行針對Spring服務實現類的測試。

感謝您的建議，如果我需要提供更多詳細信息，請告訴我。

干杯AHL

彈簧控制器：

    package com.websystique.springmvc.controller;

    import java.util.List;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.HttpHeaders;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.MediaType;
    import org.springframework.http.ResponseEntity;
    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 com.websystique.springmvc.model.User;
    import com.websystique.springmvc.service.UserService;

    @RestController
    public class HelloWorldRestController {

        @Autowired
        UserService userService;  //Service which will do all data retrieval/manipulation work


        //-------------------Retrieve All Users--------------------------------------------------------

        @RequestMapping(value = "/user/", method = RequestMethod.GET)
        public ResponseEntity<List<User>> listAllUsers() {
            List<User> users = userService.findAllUsers();
            if(users.isEmpty()){
                return new ResponseEntity<List<User>>(HttpStatus.NO_CONTENT);//You many decide to return HttpStatus.NOT_FOUND
            }
            return new ResponseEntity<List<User>>(users, HttpStatus.OK);
        }



        //-------------------Retrieve Single User--------------------------------------------------------

        @RequestMapping(value = "/user/{id}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
        public ResponseEntity<User> getUser(@PathVariable("id") long id) {
            System.out.println("Fetching User with id " + id);
            User user = userService.findById(id);
            if (user == null) {
                System.out.println("User with id " + id + " not found");
                return new ResponseEntity<User>(HttpStatus.NOT_FOUND);
            }
            return new ResponseEntity<User>(user, HttpStatus.OK);
        }



        //-------------------Create a User--------------------------------------------------------

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

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

            userService.saveUser(user);

            HttpHeaders headers = new HttpHeaders();
            headers.setLocation(ucBuilder.path("/user/{id}").buildAndExpand(user.getId()).toUri());
            return new ResponseEntity<Void>(headers, HttpStatus.CREATED);
        }



        //------------------- Update a User --------------------------------------------------------

        @RequestMapping(value = "/user/{id}", method = RequestMethod.PUT)
        public ResponseEntity<User> updateUser(@PathVariable("id") long id, @RequestBody User user) {
            System.out.println("Updating User " + id);

            User currentUser = userService.findById(id);

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

            currentUser.setUsername(user.getUsername());
            currentUser.setAddress(user.getAddress());
            currentUser.setEmail(user.getEmail());

            userService.updateUser(currentUser);
            return new ResponseEntity<User>(currentUser, HttpStatus.OK);
        }



        //------------------- Delete a User --------------------------------------------------------

        @RequestMapping(value = "/user/{id}", method = RequestMethod.DELETE)
        public ResponseEntity<User> deleteUser(@PathVariable("id") long id) {
            System.out.println("Fetching & Deleting User with id " + id);

            User user = userService.findById(id);
            if (user == null) {
                System.out.println("Unable to delete. User with id " + id + " not found");
                return new ResponseEntity<User>(HttpStatus.NOT_FOUND);
            }

            userService.deleteUserById(id);
            return new ResponseEntity<User>(HttpStatus.NO_CONTENT);
        }



        //------------------- Delete All Users --------------------------------------------------------

        @RequestMapping(value = "/user/", method = RequestMethod.DELETE)
        public ResponseEntity<User> deleteAllUsers() {
            System.out.println("Deleting All Users");

            userService.deleteAllUsers();
            return new ResponseEntity<User>(HttpStatus.NO_CONTENT);
        }

    }

IndexController.java：

package com.websystique.springmvc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/")
public class IndexController {

      @RequestMapping(method = RequestMethod.GET)
        public String getIndexPage() {
            return "UserManagement";
        }

}

Javascript user_controller.js：

    'use strict';

    angular.module('myApp').controller('UserController', ['$scope', 'UserService', function($scope, UserService) {
        var self = this;
        self.user={id:null,username:'',address:'',email:''};
        self.users=[];

        self.submit = submit;
        self.edit = edit;
        self.remove = remove;
        self.reset = reset;


        fetchAllUsers();

        function fetchAllUsers(){
            UserService.fetchAllUsers()
                .then(
                function(d) {
                    self.users = d;
                },
                function(errResponse){
                    console.error('Error while fetching Users');
                }
            );
        }

        function createUser(user){
            UserService.createUser(user)
                .then(
                fetchAllUsers,
                function(errResponse){
                    console.error('Error while creating User');
                }
            );
        }

        function updateUser(user, id){
            UserService.updateUser(user, id)
                .then(
                fetchAllUsers,
                function(errResponse){
                    console.error('Error while updating User');
                }
            );
        }

        function deleteUser(id){
            UserService.deleteUser(id)
                .then(
                fetchAllUsers,
                function(errResponse){
                    console.error('Error while deleting User');
                }
            );
        }

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

        function edit(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;
                }
            }
        }

        function remove(id){
            console.log('id to be deleted', id);
            if(self.user.id === id) {//clean form if the user to be deleted is shown there.
                reset();
            }
            deleteUser(id);
        }


        function reset(){
            self.user={id:null,username:'',address:'',email:''};
            $scope.myForm.$setPristine(); //reset Form
        }

    }]);

Javascript user_service.js：

    'use strict';

    angular.module('myApp').factory('UserService', ['$http', '$q', function($http, $q){

        var REST_SERVICE_URI = 'http://localhost:8080/Spring4MVCAngularJSExample/user/';

        var factory = {
            fetchAllUsers: fetchAllUsers,
            createUser: createUser,
            updateUser:updateUser,
            deleteUser:deleteUser
        };

        return factory;

        function fetchAllUsers() {
            var deferred = $q.defer();
            $http.get(REST_SERVICE_URI)
                .then(
                function (response) {
                    deferred.resolve(response.data);
                },
                function(errResponse){
                    console.error('Error while fetching Users');
                    deferred.reject(errResponse);
                }
            );
            return deferred.promise;
        }

        function createUser(user) {
            var deferred = $q.defer();
            $http.post(REST_SERVICE_URI, user)
                .then(
                function (response) {
                    deferred.resolve(response.data);
                },
                function(errResponse){
                    console.error('Error while creating User');
                    deferred.reject(errResponse);
                }
            );
            return deferred.promise;
        }


        function updateUser(user, id) {
            var deferred = $q.defer();
            $http.put(REST_SERVICE_URI+id, user)
                .then(
                function (response) {
                    deferred.resolve(response.data);
                },
                function(errResponse){
                    console.error('Error while updating User');
                    deferred.reject(errResponse);
                }
            );
            return deferred.promise;
        }

        function deleteUser(id) {
            var deferred = $q.defer();
            $http.delete(REST_SERVICE_URI+id)
                .then(
                function (response) {
                    deferred.resolve(response.data);
                },
                function(errResponse){
                    console.error('Error while deleting User');
                    deferred.reject(errResponse);
                }
            );
            return deferred.promise;
        }

    }]);

在服務器（vagrant主機）上，我可以輸出URL並從Spring服務器返回我的數據：

    vagrant@precise32:~$ wget http://localhost:8080/Spring4MVCAngularJSExample/user/--2016-08-26 11:08:24--  http://localhost:8080/Spring4MVCAngularJSExample/user/
    Resolving localhost (localhost)... 127.0.0.1
    Connecting to localhost (localhost)|127.0.0.1|:8080... connected.
    HTTP request sent, awaiting response... 200 OK
    Length: unspecified [application/json]
    Saving to: `index.html'

        [ <=>                                   ] 206         --.-K/s   in 0s

    2016-08-26 11:08:24 (9.77 MB/s) - `index.html' saved [206]

    vagrant@precise32:~$ less index.html

這給了我預期的結果集：

[{"id":1,"username":"Sam","address":"NY","email":"sam@abc.com"},{"id":2,"username":"Tomy","address":"ALBAMA","email":"tomy@abc.com"},{"id":3,"username":"Kelly","address":"NEBRASKA","email":"kelly@abc.com"}]

Answer 1

從您的彈簧控制器代碼中，您的所有請求映射都希望用戶在URL中，因此如果您沒有這個，則不會調用彈簧控制器。 你的調度程序servlet是否設置為除了所有http請求之外Eg /

Answer 2

問題是一個簡單的錯誤：

在user_service.js文件中，必須將REST_SERVICE_URI設置為主機的地址：

http://192.168.33.10:8080/Spring4MVCAngularJSExample/user/

因此，當將其部署到（遠程）服務器時，我認為需要將192.168.33.10:8080部分更改為該服務器的IP和相應的Tomcat端口。

我的問題存在（可能），因為我使用虛擬盒並且（錯誤地）使用了主機的IP而不是客戶機的IP。 如果我錯了請糾正我，我仍然有些困惑....