从spring boot模型视图对象获取值到角度JS 5

Posted 2021-04-08

我正在开发一个应用程序，我们收到来自不同应用程序（带数据）的请求，我需要在我的应用程序中使用这些数据填充表单。我不使用任何数据库。

我想用angularjs使用spring boot。

这是我试过的

在我的春天控制器

@Slf4j
@CrossOrigin(origins = "*")
@RestController
public class ComplainsController {

  @CrossOrigin(origins = "*")
  @RequestMapping(value = "/aalcomplaint/api/complaint/lodge-complaint", method = {RequestMethod.GET, RequestMethod.POST})
  public ModelAndView lodgeComplaint(final HttpServletRequest request, ModelAndView modelAndView, final RedirectAttributes redirectAttributes) {
     modelAndView.addObject("policyNumber","12345");
    modelAndView.setViewName("redirect:/list-complains");
    return modelAndView;
  }

}

我的问题是如何在angularjs应用程序中获取模型视图对象？

PS：我可以获得查询参数，但是我有太多的数据，并且您可以在URL中放置的字符数量有限制。

答案

当您处理像Angular这样的客户端技术时，您的服务器端（Java）需要担心的是数据（通常是json / xml）以及我们如何在视图层中呈现它。

我们将使用spring boot来公开REST API和angular5来构建我们的客户端，这将消耗服务器公开的API。

角度服务（ComplaintService.ts）：

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ComplaintService {

  constructor(private http:HttpClient) {}
  private url= '/aalcomplaint/api/complaint/lodge-complaint';

  public getLodgeComplaints() {
    return this.http.get<any[]>(this.url);
  }

}

角度组件（ComplaintComponent.ts）：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { ComplaintService } from './complaint.service';

@Component({
  selector: 'complaint-selector',
  templateUrl: './complaint.html',
  styles: []
})
export class ComplaintComponent implements OnInit {

  responseData: any[];

  constructor(private router: Router, private complaintService : ComplaintService){}

  ngOnInit() {
    this.complaintService.getLodgeComplaints()
      .subscribe( data => {
        this.responseData = data;
      });
  };

}

投诉组件HTML模板（complaint.html）：

<div class="col-md-6">
  <h2> Lodge Complaint Details</h2>

  <table class="table table-striped">
    <thead>
    <tr>
      <th>Policy Number</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let complaint of responseData">
      <td></td>
    </tr>
    </tbody>
  </table>

</div>

Spring REST控制器：

@Slf4j
@CrossOrigin(origins = "*")
@RestController
public class ComplainsController {
  @CrossOrigin(origins = "*")
  @RequestMapping(value = "/aalcomplaint/api/complaint/lodge-complaint", method = {RequestMethod.GET, RequestMethod.POST})
  public ModelAndView lodgeComplaint(final HttpServletRequest request, ModelAndView modelAndView, final RedirectAttributes redirectAttributes) {
    modelAndView.addObject("policyNumber","12345");
    modelAndView.setViewName("redirect:/list-complains");
    return modelAndView;
  }
}

希望这可以帮助...！

更多细节在这里：https://www.devglan.com/spring-boot/spring-boot-angular-example