AngularJS调用Hibernate REST接口异常排查及修正请求

It sounds like you're hitting a common roadblock where your AngularJS frontend isn't pulling in data from your REST backend. Let's walk through the most likely issues and how to fix them, using your getAllSkill() method as a starting point.

1. First: Confirm Your REST Endpoint Works on Its Own #

Before digging into AngularJS, make sure your backend is actually returning data correctly.

• Use tools like Postman or curl to send a GET request to your endpoint (e.g., GET /api/skills).
• Check for a 200 OK status and a valid JSON array of Skill objects. If you don't get this, the problem lies in your DAO/REST layer—not Angular.

Example of a Complete getAllSkill() Implementation #

Your snippet cuts off, so here's a solid Hibernate-based version to compare against:

public List<Skill> getAllSkill() {
    List<Skill> listaSkill = new ArrayList<>();
    Session session = HibernateUtil.getSessionFactory().openSession();
    try {
        Criteria criteria = session.createCriteria(Skill.class);
        listaSkill = criteria.list();
    } catch (HibernateException e) {
        e.printStackTrace();
        // Remember to handle exceptions properly in production (e.g., log and rethrow)
    } finally {
        session.close();
    }
    return listaSkill;
}

2. Make Sure Your REST Controller Is Configured Correctly #

Your REST endpoint needs to properly expose the getAllSkill() method and return JSON. Here's a standard Spring REST controller example (adjust if using JAX-RS):

@RestController
@RequestMapping("/api")
public class SkillController {

    @Autowired
    private SkillDao skillDao;

    @GetMapping("/skills")
    public ResponseEntity<List<Skill>> getAllSkills() {
        List<Skill> skills = skillDao.getAllSkill();
        if (skills.isEmpty()) {
            return new ResponseEntity<>(HttpStatus.NO_CONTENT);
        }
        return new ResponseEntity<>(skills, HttpStatus.OK);
    }
}

• Ensure you have Jackson dependencies (for JSON serialization) in your build file (pom.xml or build.gradle).
• The Skill class must have public getters/setters (Jackson needs these to convert objects to JSON). If you have circular references (e.g., Skill links to another entity that links back to Skill), use @JsonIgnore on the problematic field to break the loop.

3. Fix Your AngularJS Service & Controller #

AngularJS needs to correctly call the REST endpoint and handle the response. Here's a proper setup:

AngularJS Service (encapsulates API calls) #

angular.module('myApp')
    .service('SkillService', ['$http', function($http) {
        this.getAllSkills = function() {
            // Replace with your actual REST endpoint URL
            return $http.get('/api/skills')
                .then(function(response) {
                    return response.data;
                })
                .catch(function(error) {
                    console.error('Error fetching skills:', error);
                    throw error; // Pass error to controller for handling
                });
        };
    }]);

AngularJS Controller (binds data to the view) #

angular.module('myApp')
    .controller('SkillController', ['$scope', 'SkillService', function($scope, SkillService) {
        $scope.skills = [];
        $scope.errorMessage = '';

        // Fetch skills when the controller loads
        SkillService.getAllSkills()
            .then(function(data) {
                $scope.skills = data;
                console.log('Fetched skills:', $scope.skills); // Debug check
            })
            .catch(function(error) {
                $scope.errorMessage = 'Failed to load skills. Please try again.';
            });
    }]);

4. Check for CORS Issues #

If your AngularJS app runs on a different port (e.g., http://localhost:4200 for frontend, http://localhost:8080 for backend), you'll get a CORS error. Fix this by adding a CORS filter in your backend:

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:4200"); // Restrict to your frontend URL in production
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/api/**", config);
        return new CorsFilter(source);
    }
}

5. Debug with Browser Dev Tools #

Open your browser's DevTools (F12) and go to the Network tab:

• Look for the GET request to /api/skills. Check its status code:
  • 404: Your endpoint URL is wrong (double-check paths in Angular and backend).
  • 500: Server-side error (check backend logs for exceptions).
  • 403: Authentication/authorization issue (make sure your endpoint allows unauthenticated access if needed).
• Inspect the Response tab to see what the server is sending back (if anything).

Next Steps #

If you're still stuck, share these details to narrow it down:

• Full implementation of your getAllSkill() method.
• Your complete REST controller code.
• Your AngularJS service/controller code.
• Any error messages from the browser console or backend logs.

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