Spring Boot+AngularJS+BootStrap實現(xiàn)進度條
原理
進度條的原理是在上傳文件的時候，當程序運行到某一個部分，往Session中設(shè)置一個1到100的值。然后前臺再每隔很小的一段時間去請求這個值。
在AngularJS中，$http對象有3種狀態(tài)，分別是success,progress,error，其中progress方法就會在success方法調(diào)用之前（也就是上傳完成之前），不斷地調(diào)用。而我們要做的就是在progress中在添加一個請求，去后臺拿我們設(shè)置在session中的值。
代碼，這里我用了一個插件用來上傳文件，叫ng-file-upload
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 == "導(dǎo)入數(shù)據(jù)不符合格式要求！") $scope.type = "progress-bar progress-bar-danger progress-bar-striped";//設(shè)置進度條樣式 else { $scope.type = "progress-bar progress-bar-success progress-bar-striped"; $scope.progress = 100;//上傳成功之后，將進度條設(shè)置為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;//綁定進度條的值 }) });上傳部分代碼（只需要關(guān)注設(shè)置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);//解析成功后我將進度設(shè)置為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()); //我將處理文件主體進度總量設(shè)置為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);//保存之后將進度設(shè)置為100 res.put("msg", "數(shù)據(jù)導(dǎo)入成功!"); return res; }進度條部分代碼，很簡單，就是讀Session中progress的值
public int getProgress(HttpServletRequest request){ return (int) request.getSession().getAttribute("progress"); }以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
