Question

我试图表示从表中的数据库中获取的一些数据。我使用球衣作为后端，我在Postman测试过它有效。问题是当我使用AngularJS时，我无法在前端的表中显示我的数据。它只显示一张空白表，根本没有数据。我是AngularJS的新手，我真的希望你们中的任何人帮我找到下面代码的问题。

list_main.js

angular.module('app', [])
    .controller('ctrl', function($scope, $http){
         $scope.bookList = [];


         $scope.loadData = function(){
              $http.get('http://localhost:8080/BookCommerce/webapi/list').then(function(data){
                   $scope.bookList = data;
                   console.log($scope.bookList);
              })
         }


         $scope.loadData();
    })

index2.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>List Of Books</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></s‌cript>

        <script src="js/list_main.js"></script>
    </head>
    <body>
        <div class="row" data-ng-controller="ctrl" data-ng-app="app" data-ng-init="loadData()" style="margin: 10px;">
            <div class="col-md-7">
                <div class="panel panel-primary">

                            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="exampleone">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>Author</th>
                                        <th>Description</th>
                                        <th>Price</th>
                                    </tr>                                    
                                </thead>
                                <tbody>
                                    <tr data-ng-repeat="book in bookList">
                                        <td>{{book.book_id}}</td>
                                        <td>{{book.book_title}}</td>
                                        <td>{{book.book_author}}</td>
                                        <td>{{book.book_description}}</td>
                                         <td>{{book.book_price}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
    </body>
</html>

ListDAO.java

public class ListDAO {
    public List<Book> findAll() {
        List<Book> list = new ArrayList<Book>();
        Connection c = null;
        String sql = "SELECT * FROM book";
        try {
            c = ConnectionHelper.getConnection();
            Statement s = c.createStatement();
            ResultSet rs = s.executeQuery(sql);
            while (rs.next()) {
                list.add(processRow(rs));
            }
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        } finally {
            ConnectionHelper.close(c);
        }
        return list;
    }
    protected Book processRow(ResultSet rs) throws SQLException {
        Book book = new Book();
        book.setBook_id(rs.getInt("book_id"));
        book.setBook_title(rs.getString("book_title"));
        book.setBook_author(rs.getString("book_author"));
        book.setBook_description(rs.getString("book_description"));
        book.setBook_price(rs.getInt("book_price"));

        return book;
    }

}

ListResource.java

@Path("/list")



    public class ListResource {

      ListDAO dao=new ListDAO();

        @GET

        @Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
        public List<Book> findAll() {
            System.out.println("findAll");
            return dao.findAll();
        }

    }

请帮帮我。谢谢！

Answer 1

好的，这比上一次要好得多，

你的JS还有一些问题 - 它应该是这样的：

// Code goes here

var baseUrl = "https://demo5019544.mockable.io/";

angular.module('app', [])
    .controller('ctrl', function($scope, $http){
         $scope.bookList = [];
         $scope.loadData = function(){
              $http.get(baseUrl + 'BookCommerce/webapi/list').then(function(data){
                   $scope.bookList = data.data;
              })
         }

    })

我在：https://demo5019544.mockable.io/BookCommerce/webapi/list

制作了一个演示REST服务

产生你的web服务应该产生的那种输出，我用这个web服务测试了代码，并通过调整我使它工作 - 是的。

我现在要做的最后一件事是检查你的网络服务是否输出了我的模拟产生的相同/类似的输出。

使用AngularJS显示数据

1 个答案: