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

Question

我一直在研究使用Spring Boot后端API服務器連接Node.js / AngularJS前端服務器，但我一直遇到障礙。 我還沒有在網上找到一個單一的工作示例。

Spring示例都在Spring Boot應用程序中提供Angular代碼，但由於許多原因，這是一種可怕的做法。

有人能指出Node.js / AngularJS前端服務器的一些工作示例是否成功地使用后端Spring Boot服務器進行數據/ API事務？

通常情況下，我絕不會發一個問題要求問題，但這是一個特例，因為我的研究都沒有找到工作實例，而我對這個主題的問題似乎永遠無法解決這個基本問題。

Answer 1

你好，這是春天的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() + "'" +
            "}";
    }
}

Answer 2

我曾經在一個項目中工作，我們使用AngularJs在Node.Js上部署了前端。 我們使用bower和nodejs來管理依賴關系。 Nodejs也被用作前端的服務器。 前端是使用angularJs開發的。 Spring rest Web服務暴露在前端。 我沒有代碼，但我可以看看你是否可以分享你的代碼。