(Angular6 + Spring Boot) Загрузите фотографии в карусель с помощью REST API - PullRequest
Новая
       14

(Angular6 + Spring Boot) Загрузите фотографии в карусель с помощью REST API

0 голосов
/ 03 марта 2019

Я занимаюсь разработкой веб-приложения с использованием Angular6 и Spring Boot.Я приношу фотографии на карусель с помощью REST API.Но иногда некоторые фотографии не загружаются.Мои коды следующие.Я сделал несколько попыток на эту тему.Но я не мог решить проблему.Заранее спасибо.

REST API CONTROLLER Раздел: 

//region Photos
@GetMapping("{language}/fileOperation/getAllPhotos/{categoryName}/{postId}")
public ResponseEntity<List<String>> getPhotos(@PathVariable(name = "categoryName") String categoryName,
                                                 @PathVariable(name = "postId") Long postId,
                                                 @PathVariable(name="language") String language) {

    this.categoryName = categoryName;
    this.postId = postId;
    files =  fileStorageService.getPhotosWithSftp(categoryName, postId, true);

    List<String> fileNames = files
            .stream().map(fileName -> MvcUriComponentsBuilder
                    .fromMethodName(PublicAppController.class, "getPhoto", fileName, categoryName, postId, language)
                    .build().toString())
            .collect(Collectors.toList());

    return ResponseEntity.ok().body(fileNames);
}

@GetMapping("{language}/fileOperation/Photos/{categoryName}/{postId}/{filename:.+}")
@ResponseBody
public ResponseEntity<Resource> getPhoto(@PathVariable String filename,
                                        @PathVariable(name = "categoryName") String categoryName,
                                        @PathVariable(name = "postId") Long postId,
                                        @PathVariable(name="language") String language) {

    Resource file = fileStorageService.loadFileAsResource(filename, categoryName, postId);

    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" +file.getFilename()+ "\"")
            .body(file);
}
//endregion

Раздел обслуживания REST API: 

public Resource loadFileAsResource(String fileName, String categoryName, Long postId)
{
    try {
        updateStorageLocation(categoryName, postId, true);
        Path filePath = this.fileStorageLocation.resolve(fileName).normalize();
        Resource resource = new UrlResource(filePath.toUri());

        if(resource.exists() || resource.isReadable()) {
            return resource;
       } else {

           throw new MyFileNotFoundException("File not found " + fileName);
        }
    } catch (Exception ex) {
        throw new MyFileNotFoundException("File not found " + fileName, ex);
    }
}

ANGULAR sliderDataService.ts раздел: 

 @Injectable()
 export class SliderDataService {

 constructor(private httpClient: HttpClient,
          private clientUtilService: ClientUtilService) {
  }

 getSliders(): Observable<SliderModel[]> {
  return this.httpClient.get(this.clientUtilService.getHostURL()
                              + 'sliders/all/active').pipe(
     map(data => data as SliderModel[]));
 }

 getSliderById(id): Observable<SliderModel> {
  return this.httpClient.get(this.clientUtilService.getHostURL()
                            + 'sliders/' + id).pipe(
    map(data => data as SliderModel));
 }
}

ANGULAR6 slider.html 

 <div id="carouselExampleIndicators"
 class="carousel slide mt-1"
 data-ride="carousel"
 data-interval="3000"
 style="overflow: hidden; "
>
 <ol class="carousel-indicators">
    <li *ngFor="let slide of sliders; let i = index " data- 
 target="#carouselExampleIndicators" data-slide-to=i class="active">
  </li>
  </ol>
   <div class="carousel-inner w-100">
     <ng-container *ngFor="let slide of sliders; let i=index"  >
    <div *ngIf="i === 0" class="carousel-item active" >
    <a routerLink="/slider/detail/{{slide.id}}" >
      <img class="d-block w-100 h-100 " src= {{slide.sliderUrl}} 
     style="max-height: 400px;" >
       <div class="d-none d-md-block  carousel-caption" 
    style="bottom:30px; background: rgb(0,0,0,0.2); ">
        <a style="color: white" href="{{slide.sliderUrl}}"> . 
       {{slide?.title}}</a>
      </div>
    </a>
  </div>
  <ng-container *ngIf="i>0">
    <div class="carousel-item " >
      <a routerLink="/slider/detail/{{slide.id}}">
        <img class="d-block w-100 h-100" src={{slide.sliderUrl}} 
  style="max-height: 400px;" >
        <div class="d-none d-md-block  carousel-caption" style="bottom: 
   30px; background: rgb(0,0,0,0.2);">
          <a style="color: white" href="{{slide.sliderUrl}}"> . 
          {{slide?.title}}</a>
        </div>
        </a>
       </div>
  </ng-container>
</ng-container>

ANGULAR6 slider.ts 

import { Component, OnInit } from '@angular/core';
import {SliderDataService} from '../../data/slider-data.service';
import {SliderModel} from '../../model/slider.model';

 @Component({
  selector: 'app-app-slider',
  templateUrl: './app-slider.component.html',
  styleUrls: ['./app-slider.component.css']
  })
  export class AppSliderComponent implements OnInit {

  sliders: SliderModel[] = [];

 constructor(private sliderDataService: SliderDataService) {
 }

  ngOnInit() {
   this.getSliders();
 }

   getSliders() {
    this.sliderDataService.getSliders().subscribe((data) => {
    this.sliders = data;
  });
 }
}
...