Получить значение из объекта Springboot ModelView в угловой JS 5

Question

Я занимаюсь разработкой приложения, в котором мы получаем запрос от разных приложений (с данными), и мне нужно заполнить форму в своем приложении этими данными.Я не использую базы данных.

Я хочу использовать springboot с угловым js.

Это то, что я пробовал

в моем контроллере пружины

@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;
  }

}

У меня вопрос, как я могу получить объект вида модели в угловом js-приложении?

PS: я могу получить параметры запроса, но у меня слишком много данных и есть ограничение на количество символов, которые вы можете вставить в URL.

Answer 1

Когда вы имеете дело с технологиями на стороне клиента, такими как Angular, вашей серверной стороне (Java) нужно беспокоиться о данных (обычно json / xml) и о том, как мы представляем их на уровне представления.

Мы будем использовать весеннюю загрузку для предоставления API-интерфейсов REST и angular5 для создания нашего клиента, который будет использовать API-интерфейсы, предоставляемые сервером.

Служба Angular (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