Question

这是Spring + Angular CURD应用程序。问题是，每当用户输入详细信息并单击“提交”按钮时，记录就会成功插入到dB表中，但是在单击刷新按钮之前，视图不会使用额外的行（新数据）进行更新。
刷新页面后，它会成功显示所有记录。
但它应该动态显示数据
每当单击删除按钮时，它对于删除选项也可以正常工作，它也从视图页（表）和数据库表中删除一行。

MyController
-----------------

@RestController
public class HomeController {
    @Autowired
    private UserService service;

    @RequestMapping(value="/home")
    public ModelAndView getHomePage() {
        return new ModelAndView("home");
    }

    @RequestMapping(value="/add",method=RequestMethod.POST,consumes=MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<Void> addUser(@RequestBody UserCommand user){
        int result= 0;
        UserDto dto= null;
        dto= new UserDto();
        BeanUtils.copyProperties(user, dto);
        result= service.processUser(dto);
        if(result!=0) {
            return new ResponseEntity<>(HttpStatus.OK);
        }
        return new ResponseEntity<Void>(HttpStatus.CONFLICT);

    }

    @RequestMapping(value="/userDetails",produces="application/json",method=RequestMethod.GET)
    public List<UserDto> getAllUsers(){
        List<UserDto> listDto= null;
        listDto= service.retrieveAllUsers();
        return listDto;
    }

    @RequestMapping(value="/deleteUser",method=RequestMethod.DELETE,consumes=MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<Void> deleteAUser(@RequestBody UserCommand cmd){
        int result= 0;
        result= service.deleteUser(cmd.getEmail());
        if(result!=0) {
            return new ResponseEntity<Void>(HttpStatus.OK);
        }
        return new ResponseEntity<>(HttpStatus.CONFLICT);
    }
}

Home.jsp
------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Home | Page</title>
<link rel="stylesheet" href='<c:url value="/main.css"></c:url>'/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
    var app= angular.module("myApp",[]);
    app.controller("HomeController",function($scope,$http){
        $scope.users=[];
        $scope.userform={
            name: "",
            email: "",
            mobile: ""
        };

        getUserDetails();

        function getUserDetails(){                      //this method
            $http({
                method: 'GET',
                url: 'userDetails',
            }).then(function successCallback(response){
                $scope.users= response.data;
            },function errorCallback(response){
                alert(response.statusText);
            });
        }

        $scope.addUser= function(){                   //Problem Lies Here
            $http({
                method: 'POST',
                url: 'add',
                data: angular.toJson($scope.userform),
                headers: {
                    'Content-Type' : 'application/json'
                }
            }).then(getUserDetails(),clearForm());   //it's calling above function to get the updated data
        }                                           //------------------------------------

        function clearForm(){
            $scope.userform.name="";
            $scope.userform.email="";
            $scope.userform.mobile="";
            document.getElementById("name").disabled= false;
        }

        $scope.deleteUser= function(user){
            $http({
                method: 'DELETE',
                url: 'deleteUser',
                data: angular.toJson(user),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(getUserDetails());
        }
    });
</script>
</head>
<body ng-app="myApp" ng-controller="HomeController">
    <h1>Spring+Angular CURD Application</h1>
    <form method="post">
        <table cellpadding="0" cellspacing="0" align="center" width="500px">
        <tr>
            <td>Name:</td>
            <td><input type="text" id="name" ng-model="userform.name"></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td>Email:</td>
            <td><input type="text" id="email" ng-model="userform.email"></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td>Mobile:</td>
            <td><input type="text" id="mobile" ng-model="userform.mobile"></td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <table align="center" cellpadding="0" cellspacing="0" width="200px">
            <tr>
                <td><input type="submit" ng-click="addUser()" value="Add"></td>
            </tr>
        </table>
    </table>
    </form>

    <h2>Registered User's</h2>
    <table align="center" cellpadding="0" cellspacing="0" border="1" width="600px">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
            <th>Operation's</th>
        </tr>

        <tr ng-repeat="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
            <td>{{user.mobile}}</td>
            <td>
                <button ng-click="deleteUser(user)">Delete</button> | 
                <button ng-click="editUser(user)">Edit</button>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

尝试将函数then的回调更改为：

$scope.addUser = function() {
    $http({
        method: 'POST',
        url: 'add',
        data: angular.toJson($scope.userform),
        headers: {
            'Content-Type' : 'application/json'
        }
    }).then(function successCallback(response) {
        getUserDetails();
        clearForm());
    })
}

在函数getUserDetails()中使用它时。

在单击刷新按钮之前，该值不会动态更新-Spring + Angular

1 个答案: