Node.js/AngularJS 前端调用 Spring Boot API 后端

Posted 2023-02-27

【中文标题】Node.js/AngularJS 前端调用 Spring Boot API 后端

【英文标题】：Node.js/AngularJS front end calling Spring Boot API backend

【发布时间】：2016-11-05 17:59:00

【问题描述】：

我一直在做广泛的研究，将 Node.js/AngularJS 前端服务器与 Spring Boot 后端 API 服务器连接起来，但我一直遇到障碍。而且我还没有在网上找到一个工作示例。

Spring 示例都在 Spring Boot 应用程序中提供其 Angular 代码，但出于多种原因，这是一种可怕的做法。

有人能指出 Node.js/AngularJS 前端服务器与后端 Spring Boot 服务器成功进行数据/API 事务的一些工作示例吗？

通常情况下，我不会发布询问示例的问题，但这是一个特殊情况，因为我的研究都没有找到工作示例，而且我关于该主题的问题似乎永远无法解决这个基本问题。

【参考方案1】：

你好，这是 spring api 端点

@RestController
@RequestMapping("/api")
public class ExtendedRegisteredTimeResource 


    @Inject
    private ExtendedRegisteredTimeService ExtendedRegisteredTimeService;




    @GetMapping("/extended-registered-time/employee")
    @ResponseBody
    public ResponseEntity<List<Registered_time>> getSubLeaves(@PathVariable String employee) 

        List<Registered_time> result = ExtendedRegisteredTimeService.getSelectedRegisteredTime(employee);

        return new ResponseEntity<>(result, HttpStatus.OK);

    

上面搜索的是前端传入的员工姓名。我已经手动传入了我的名字。

(function() 
    'use strict';
    angular
        .module('cambioConnectApp')
        .factory('RegisteredTimeService', RegisteredTimeService);

    RegisteredTimeService.$inject = ['$resource'];

    function RegisteredTimeService ($resource) 

        var userName="HGajanayake";



       // var resourceUrl =  '/api/extended-registered-time?employee='+userName;
        var resourceUrl =  "/api/extended-registered-time/:employee";
        return $resource(resourceUrl, , 
            'query': 

                method: 'GET',

                isArray: true
            ,

            'status':
                method:"POST",
                isArray:true,

                transformRequest: function (data) 
                    var copy = angular.copy(data);
                    return angular.toJson(copy);
                
            

        );

这是实现查询的存储库

public interface ExtendedRegisteredTimeRepository extends Registered_timeRepository 




    @Query("SELECT e from Registered_time e where e.employee=:employee ")
    public List<Registered_time> getSelectedRegisteredTime(@Param("employee") String employee);

这是使用Autowired注解的服务实现

@Service
@Transactional
public class ExtendedRegisteredTimeServiceImpl implements ExtendedRegisteredTimeService 






    @Autowired
    private ExtendedRegisteredTimeRepository ExtendedRegisteredTimeRepository;


    @Override
    public List<Registered_time> getSelectedRegisteredTime(String employee) 


       return ExtendedRegisteredTimeRepository.getSelectedRegisteredTime(employee);
    

您还必须创建表的 DTO

@Entity
@Table(name = "registered_time")
@Cache(usage = CacheConcurrencyStrategy.NONSTRICT_READ_WRITE)
public class Registered_time implements Serializable 

    private static final long serialVersionUID = 1L;

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "employee")
    private String employee;

    @Column(name = "employee_department")
    private String employee_department;

    @Column(name = "employee_organisation")
    private String employee_organisation;

    @Column(name = "project")
    private String project;

    @Column(name = "project_organisation")
    private String project_organisation;

    @Column(name = "row_number")
    private Integer row_number;

    @Column(name = "local_date")
    private LocalDate local_date;

    @Column(name = "total_cost")
    private Float total_cost;

    @Column(name = "total_time")
    private Float total_time;

    public Long getId() 
        return id;
    

    public void setId(Long id) 
        this.id = id;
    

    public String getEmployee() 
        return employee;
    

    public Registered_time employee(String employee) 
        this.employee = employee;
        return this;
    

    public void setEmployee(String employee) 
        this.employee = employee;
    

    public String getEmployee_department() 
        return employee_department;
    

    public Registered_time employee_department(String employee_department) 
        this.employee_department = employee_department;
        return this;
    

    public void setEmployee_department(String employee_department) 
        this.employee_department = employee_department;
    

    public String getEmployee_organisation() 
        return employee_organisation;
    

    public Registered_time employee_organisation(String employee_organisation) 
        this.employee_organisation = employee_organisation;
        return this;
    

    public void setEmployee_organisation(String employee_organisation) 
        this.employee_organisation = employee_organisation;
    

    public String getProject() 
        return project;
    

    public Registered_time project(String project) 
        this.project = project;
        return this;
    

    public void setProject(String project) 
        this.project = project;
    

    public String getProject_organisation() 
        return project_organisation;
    

    public Registered_time project_organisation(String project_organisation) 
        this.project_organisation = project_organisation;
        return this;
    

    public void setProject_organisation(String project_organisation) 
        this.project_organisation = project_organisation;
    

    public Integer getRow_number() 
        return row_number;
    

    public Registered_time row_number(Integer row_number) 
        this.row_number = row_number;
        return this;
    

    public void setRow_number(Integer row_number) 
        this.row_number = row_number;
    

    public LocalDate getLocal_date() 
        return local_date;
    

    public Registered_time local_date(LocalDate local_date) 
        this.local_date = local_date;
        return this;
    

    public void setLocal_date(LocalDate local_date) 
        this.local_date = local_date;
    

    public Float getTotal_cost() 
        return total_cost;
    

    public Registered_time total_cost(Float total_cost) 
        this.total_cost = total_cost;
        return this;
    

    public void setTotal_cost(Float total_cost) 
        this.total_cost = total_cost;
    

    public Float getTotal_time() 
        return total_time;
    

    public Registered_time total_time(Float total_time) 
        this.total_time = total_time;
        return this;
    

    public void setTotal_time(Float total_time) 
        this.total_time = total_time;
    

    @Override
    public boolean equals(Object o) 
        if (this == o) 
            return true;
        
        if (o == null || getClass() != o.getClass()) 
            return false;
        
        Registered_time registered_time = (Registered_time) o;
        if (registered_time.getId() == null || getId() == null) 
            return false;
        
        return Objects.equals(getId(), registered_time.getId());
    

    @Override
    public int hashCode() 
        return Objects.hashCode(getId());
    

    @Override
    public String toString() 
        return "Registered_time" +
            "id=" + getId() +
            ", employee='" + getEmployee() + "'" +
            ", employee_department='" + getEmployee_department() + "'" +
            ", employee_organisation='" + getEmployee_organisation() + "'" +
            ", project='" + getProject() + "'" +
            ", project_organisation='" + getProject_organisation() + "'" +
            ", row_number='" + getRow_number() + "'" +
            ", local_date='" + getLocal_date() + "'" +
            ", total_cost='" + getTotal_cost() + "'" +
            ", total_time='" + getTotal_time() + "'" +
            "";
    

【参考方案2】：

我过去在一个项目中工作，我们在 Node.Js 上使用 AngularJs 部署前端。 我们使用 bower 和 nodejs 来管理依赖项。 Nodejs 也被用作前端的服务器。前端是使用 angularJs 开发的。 Spring REST Web 服务被暴露以供前端使用。我没有代码，但我可以看看你是否可以分享你的代码。

【讨论】：

谢谢。我已经从很多角度来处理它，以至于发布的代码太多了。归结为当请求来自其代理外部时，Spring Security 对请求的处理方式与来自代理内部的请求不同。因此，Spring Boot 应用程序中的 AngularJS 应用程序可以对 Spring 应用程序中的 API 进行 RESTful 调用。但是，当您将同一个 AngularJS 应用程序移动到 Spring 代理之外的 Node.js 时，相同的 RESTful 调用会被拒绝。目前在探索OAuth2，在用Node.js客户端替换Spring开发的客户端时遇到了类似的问题。

这个 OP 本质上是通用的，要求任何 Node.js 应用程序与 Spring Boot API 对话的工作示例。我问这个一般性问题是因为我的许多具体问题都没有得到解决。这个特定的 OP 将采取任何措施，这样我至少可以有一个工作起点。但是，如果您想在更具体的问题中使用特定代码，请查看此 GitHub 帖子：github.com/spring-projects/spring-security-oauth/issues/806

我们使用 csrf 令牌进行身份验证，使用 gulp 进行代理处理。我将尝试获取该代码并与您分享。

我不确定这对您是否有用。我们将此作为项目github.com/jhipster/jhipster-sample-app的基础，并使用中间件（npmjs.com/package/http-proxy-middleware）在node js中设置代理。

非常感谢您非常抽出宝贵时间对此进行调查。当我可以花一些时间来解决这个长期存在的问题时，我会检查你的链接。