Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條示例代碼
Spring Boot+AngularJS+BootStrap實(shí)現(xiàn)進(jìn)度條
原理
進(jìn)度條的原理是在上傳文件的時(shí)候,當(dāng)程序運(yùn)行到某一個(gè)部分,往Session中設(shè)置一個(gè)1到100的值。然后前臺(tái)再每隔很小的一段時(shí)間去請(qǐng)求這個(gè)值。
在AngularJS中,$http對(duì)象有3種狀態(tài),分別是success,progress,error,其中progress方法就會(huì)在success方法調(diào)用之前(也就是上傳完成之前),不斷地調(diào)用。而我們要做的就是在progress中在添加一個(gè)請(qǐng)求,去后臺(tái)拿我們?cè)O(shè)置在session中的值。
代碼,這里我用了一個(gè)插件用來(lái)上傳文件,叫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()">確認(rèn)</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è)置進(jìn)度條樣式
else {
$scope.type = "progress-bar progress-bar-success progress-bar-striped";
$scope.progress = 100;//上傳成功之后,將進(jìn)度條設(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;//綁定進(jìn)度條的值
})
});
上傳部分代碼(只需要關(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);//解析成功后我將進(jìn)度設(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());
//我將處理文件主體進(jìn)度總量設(shè)置為90(5是加上解析部分的進(jìn)度)
}
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);//保存之后將進(jìn)度設(shè)置為100
res.put("msg", "數(shù)據(jù)導(dǎo)入成功!");
return res;
}
進(jìn)度條部分代碼,很簡(jiǎn)單,就是讀Session中progress的值
public int getProgress(HttpServletRequest request){
return (int) request.getSession().getAttribute("progress");
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM
這篇文章主要介紹了純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM,需要的朋友可以參考下2014-03-03
javascript設(shè)計(jì)模式 – 訪問者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 訪問者模式,結(jié)合實(shí)例形式分析了javascript訪問者模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript知識(shí)點(diǎn)總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類型
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類型的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域
這篇文章主要介紹了通過js實(shí)現(xiàn)點(diǎn)擊div區(qū)域外隱藏div區(qū)域,原理及示例代碼如下2014-06-06
JavaScript 十六進(jìn)制RGB色碼轉(zhuǎn)換器
JavaScript 十六進(jìn)制RGB色碼轉(zhuǎn)換器,大家可以學(xué)習(xí)下思路。2009-08-08

