Spring Boot+AngularJS+BootStrap 진행 표시 줄 예제 코드 구현

Spring Boot+AngularJS+BootStrap 진행 표시 줄 구현
의 원리
진도 바 의 원 리 는 파일 을 업로드 할 때 프로그램 이 어느 부분 으로 실 행 될 때 Session 에 1 에서 100 의 값 을 설정 하 는 것 이다.그리고 프론트 데스크 는 아주 작은 시간 마다 이 값 을 요청 합 니 다.
AngularJS 에서$http 대상 은 세 가지 상태 가 있 는데 그것 이 바로 success,progress,error 이다.그 중에서 progress 방법 은 success 방법 이 호출 되 기 전에(즉 업로드 가 완료 되 기 전에)끊임없이 호출 된다.우리 가 해 야 할 일 은 progress 에 요청 을 추가 하고 배경 으로 가서 session 에 설 치 된 값 을 가 져 오 는 것 입 니 다.
코드,여기 서 파일 을 업로드 하 는 플러그 인 을 사 용 했 습 니 다.ng-file-uproad 라 고 합 니 다.
html

<input type="file" data-ng-model="file">

<uib-progress data-ng-show="progress">
  <uib-bar value="progress" type="{{type}}" data-ng-bind="progress + '%'"/>
</uib-progress>
<span class="err" data-ng-show="isShowMsg" data-ng-bind="Msg"></span>
<button class="btn btn-primary" type="button" data-ng-click="upload()">  </button>

js

Upload.upload(
        {
          url: "",
          data: {
            file: file
          },
          method: 'post'
        }).then(function (res) {
          //   success  
          $scope.isShowMsg = true;
          $scope.Msg = res.data.msg;
          if($scope.Msg == "           ！")
          $scope.type = "progress-bar progress-bar-danger progress-bar-striped";//       
          else {
            $scope.type = "progress-bar progress-bar-success progress-bar-striped";
            $scope.progress = 100;//      ，       100
          }

        }, function (){
        //   error  
        }, function (){
        //   progress  
        $scope.type = "progress-bar progress-bar-info progress-bar-striped";

        $http({
        url:"",
        method: "get"
        }).success(function (res) {
            $scope.progress = res;//       
          })
        });

일부 코드 업로드(session 설정 에 만 관심 을 가 져 야 합 니 다.

public Map<String, Object> batchModify(InputStream inputStream,HttpSession session) {
    Map<String, Object> res = new HashMap<>();
    Workbook workbook = null;
    try {
      workbook = Util.createWorkbook(inputStream);
    } catch (InvalidFormatException | IOException e) {
      e.printStackTrace();
    }
    session.setAttribute("progress", 5);//            5
    Sheet sheet = workbook.getSheetAt(0);

    Map<String, Object> roleWithPages = new HashMap<>();
    for (int i = 1; i <= sheet.getLastRowNum(); i++) {
      Row r = sheet.getRow(i);
      if (r == null || r.getCell(0) == null || r.getCell(1) == null)
        continue;
      Set<Page> pages = null;
      if (roleWithPages.get(r.getCell(0).toString()) == null) {
        pages = new HashSet<>();
      } else {
        pages = (Set<Page>) roleWithPages.get(r.getCell(0).toString());
      }
      Page p = new Page();
      p.setId(Math.round(r.getCell(1).getNumericCellValue()));
      pages.add(p);
      roleWithPages.put(r.getCell(0).toString(), pages);
      session.setAttribute("progress", 5 + i*90/sheet.getLastRowNum());
      //               90（5          )
    }

    List<Role> roles = new ArrayList<>();
    for (String rolename : roleWithPages.keySet()) {
      Role role = repo.findByName(rolename);
      role.setPages((Set<Page>) roleWithPages.get(rolename));
      roles.add(role);
    }
    repo.save(roles);
    session.setAttribute("progress", 100);//          100
    res.put("msg", "      !");
    return res;
  }

진도 항목 부분 코드,간단 합 니 다.세 션 에서 progress 의 값 을 읽 는 것 입 니 다.

public int getProgress(HttpServletRequest request){
    return (int) request.getSession().getAttribute("progress");
  }

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.