使用 spring 引导和 Angular 4 在 Web 浏览器上的单个 GET restful 调用中一起显示图像和文本

Question

我可以通过简单的GET服务实现图片（.jpg文件）和文本（.txt文件）在浏览器上的显示。但是我已经分别为图像和文本使用了 2 个服务。

如何在单个 GET 调用中在任何 Web 浏览器上一起显示图像和文本？

我正在使用 Spring 引导，Angular 4 和 MySql

Answer 1

我认为您的问题表述不当，如果我理解正确的话，您希望同时获得 http 调用文本和图像的结果。 Angular 使用 rxjs 和运算符 combineLatest:

是完全可能的

combineLatest(observableOfImageCall$, observableOfTextcall$)
  .subscribe([image, text]) {
      this.image = image;
      this.text = text;
  }

Answer 2

感谢 Nickolaus 提供基于 Angular 4 视角的解决方案。因为我有 java 背景，所以我一直在寻找使用 java 视角来处理这种情况。

我所做的是创建了一个 Response Pojo(ResponseData.java)，它将包含文本 + 图像场景的结果，并进行了如下 GET 调用：

      @RequestMapping(value = "/get-both", method = RequestMethod.GET)
public ResponseData[]  getbothData() throws IOException {


    ResponseData respDataObj = new ResponseData() ;

    // handling text data : convert byte to string
    byte[] rbaText = transitionService.getTextData();
    String s = new String(rbaText);

    respDataObj.setContents(s);


    // for image we want path only
    String imageUrlObj = transitionService.getImageURL();
    respDataObj.setImages(imageUrlObj);
    ResponseData[] respDataArr= {respDataObj};

    return respDataArr;

}

所以现在下面提到的步骤发生了：

1] 从特定位置读取文本文件并以字节形式捕获其内容并将其放入响应数组

2] 读取图片路径，以字节形式获取图片并放入响应数组

3] Return 通过调用“http://localhost:8080/..../get-both”将这个数组发送到浏览器（我们在这里使用 Spring Rest 和 Spring Boot），在浏览器中我们得到json 这样的回应：

      [{"images":"http://....../test.jpg","contents":"This is a test document"}]

4] on Angular 4 :(在默认 4200 上启动服务器）

4.1]在 services.ts 中：

getUpdates() {
return this.http.get
  ('http://localhost:8080/..../get-both').pipe(
    map(res => res.json()));

}

4.2]在 app.component.ts 中：

    this.dataservice.getUpdates().subscribe((postServices) => {
    this.postServices = postServices;
});

4.3]in component.html : 使用 ngFor

显示数组

 <div *ngFor="let post of postServices">
<div class="card">
  <div class="item">
    <h4>
      <div>{{post.contents}}</div>
    </h4>
  </div>
  <div class="item">
    <img width="300" alt="imageTest" src="http://..../test.jpg">
  </div>
</div>

现在我们将能够显示从文本文件中读取的文本，就在我们想要的特定图像下方 url。

使用 spring 引导和 Angular 4 在 Web 浏览器上的单个 GET restful 调用中一起显示图像和文本

Dispaly image and text together in single GET restful call on web browser using spring boot and Angular 4

spring-boot

spring-rest

angular