Spring Boot+Angular调用REST接口无法显示国家数据求助

我帮你梳理几个关键问题点，一步步解决页面不显示国家名称的问题：

1. 核心问题：Angular响应数据的取值错误 #

这是导致列表不显示的最主要原因！Angular的$http请求返回的响应对象中，接口实际返回的JSON数据是存放在response.data属性里的，而你之前直接把整个response对象赋值给了$scope.countrys，这会导致ng-repeat无法遍历非数组类型的数据。

同时，Angular 1.6.x已经废弃了success/error回调，建议改用then/catch，兼容性更好：

var app = angular.module('angService', ["ngResource"]);
app.controller('Hola', [ '$scope', '$http', function($scope, $http) {
    $scope.getCountry = function(){
        // 无需额外设置Accept，Angular默认会发送application/json请求头
        $http.get('/getCountrys') 
            .then(function(response){
                console.log("获取到的国家数据：", response.data); // 用console.log方便查看完整结构
                $scope.countrys = response.data; // 正确取到接口返回的数组数据
            })
            .catch(function (error){
                console.error("请求出错：", error);
                $scope.msg = '加载国家数据失败';
            });
    }
}]);

2. 修正HTML中的拼写错误 #

你的HTML里有一个明显的拼写错误，会影响页面部分功能：

<!-- 错误写法 -->
<div ng-controlle="name">
<!-- 正确写法 -->
<div ng-controller="name">

另外，优化一下数据显示的判断逻辑，确保只有当数组有数据时才显示：

<div ng-show="countrys && countrys.length > 0">
    <div ng-repeat="pais in countrys">
        <h1>{{pais.name}}</h1>
    </div>
</div>

3. 验证静态资源加载与请求状态 #

• 确保你的index.html和services/service.js放在Spring Boot项目的src/main/resources/static目录下，Spring Boot会自动映射这个目录下的静态资源。
• 打开浏览器开发者工具（F12）：
  • 在Network标签下，查看/getCountrys请求的响应是否和你直接访问的一致；
  • 在Console标签下，查看是否有Angular模块加载失败、控制器未找到等报错信息。

修复后的完整代码示例 #

Angular控制器（service.js） #

var app = angular.module('angService', ["ngResource"]);
app.controller('Hola', [ '$scope', '$http', function($scope, $http) {
    $scope.getCountry = function(){
        $http.get('/getCountrys')
            .then(function(response){
                console.log("响应数据：", response.data);
                $scope.countrys = response.data;
            })
            .catch(function (error){
                console.error("请求错误：", error);
                $scope.msg = '请求国家数据失败，请检查接口';
            });
    }
}]);

HTML页面 #

<!DOCTYPE html>
<html ng-app="angService">
<head>
    <meta charset="UTF-8">
    <title>Prueba para Pruebas</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.js"></script>
    <script src="./services/service.js"></script>
</head>
<body ng-controller="Hola" ng-init="getCountry()">
    <h1>PRUEBA</h1>
    <div ng-show="countrys && countrys.length > 0">
        <div ng-repeat="pais in countrys">
            <h1>{{pais.name}}</h1>
        </div>
    </div>
    <div ng-controller="name">
        <p> Nombre: <input ng-model="name"> </p>
        <p> Hola: {{name}}</p>
    </div>
    <h4>{{msg}}</h4>
</body>
</html>

按照以上步骤修改后，应该就能正常显示国家名称了。如果还有问题，可以查看浏览器控制台的报错信息，进一步定位问题。

内容的提问来源于stack exchange，提问作者Tiago Monteiro