任何人都可以教我或直接到一个工作的例子来满足这个要求.
场景:
*问题*** 如何实现服务以更新客户端的进度.
如果进程成功,则服务返回true或false.
谢谢你的回复.代码片段或完整的教程将非常有用.
这是此进度条问题的可能解决方案：
任务.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<script src="../js/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.getJSON(window.location.href.concat('/status'), function(data) {
if (data === "created") {
} else {
// task is already being executed
refreshProgress();
}
});
});
var width = 0;
function getProgress() {
$.getJSON(window.location.href.concat('/progress'), function(percentage) {
$('#progressBar').css('width', percentage+'%');
document.getElementById("label").innerHTML = percentage * 1 + '%';
width = percentage;
});
}
function start() {
$.ajax({
type: "post",
data: $('#task').serialize(),
success: function(data) {
$('#progressBar').css('width', 100+'%');
document.getElementById("label").innerHTML = 100 * 1 + '%';
// do sth with the data after finished task
}
});
width = 0;
$('#progressBar').css('width', 0+'%');
document.getElementById("label").innerHTML = 0 * 1 + '%';
refreshProgress();
}
function refreshProgress() {
$("#btnStart").prop("disabled",true);
var id = setInterval(frame, 1000);
function frame() {
if (width >= 100) {
clearInterval(id);
$("#btnStart").prop("disabled",false);
} else {
getProgress();
}
}
}
</script>
</head>
<body>
<div class="container">
<h2 class="text-center">Progress Bar Example</h2>
<div class="progress">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%">
<div id="label">0%</div>
</div>
</div>
<form:form method="POST" commandName="task" cssClass="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="btnStart">Actions</label>
<div class="col-md-8">
<button id="btnStart" name="btnStart" class="btn btn-success">Start</button>
<button id="btnStop" name="btnStop" class="btn btn-danger">Stop</button>
</div>
</div>
</fieldset>
</form:form>
</div>
<script>
$('#task').submit(function () {
start();
return false;
});
</script>
</body>
</html>
任务控制器
@Controller
@RequestMapping(value = "/task")
public class TaskController {
private Task task;
@RequestMapping("")
protected ModelAndView page() {
ModelAndView model = new ModelAndView(VIEW_DIR + "task");
if (this.task == null) {
this.task = new Task();
}
model.addObject("task", this.task);
return model;
}
@RequestMapping(value = "/status", method = GET)
public @ResponseBody
String getStatus() {
return task.getStatus();
}
@RequestMapping(value = "/progress", method = GET)
public @ResponseBody
int getProgress() {
return task.getProgress();
}
public ModelAndView form(@ModelAttribute Task task) {
this.task = task;
ModelAndView model = new ModelAndView(VIEW_DIR + "task");
task.execute();
model.addObject("task", this.task);
return model;
}
}
任务.java
public class Task {
private int total;
private int progress;
private String status;
public Task() {
this.status = "created";
// TODO get total here or pass via form
}
public void execute() {
status = "executing";
int i = 0;
while (i < total && status.equals("executing")) {
progress = (100 * (i + 1) / total);
i++;
}
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public int getProgress() {
return progress;
}
public void setProgress(int progress) {
this.progress = progress;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
}
有很多方法可以处理这样的场景。一种方法是根据“流程”对工作进行建模，其中包含“状态”，包括完成百分比。
如果您想象这在网站上可能是什么样子，单击按钮启动流程将提交一个表单，该表单开始该流程并向该流程分配某种身份，就像您创建任何其他类型的对象一样。然后它会将您重定向到“进程状态”页面。
进程状态页面将查询进程的状态并显示它。它可能有一个进程 ID 的 URL 参数。它可能会使用 AJAX 调用来更新自身以返回进度百分比。
在后端，您现在需要解决几个问题：找出进程 N 的当前状态，并更新进程 N 的状态。您可以通过多种方式完成此任务，包括将进度存储在数据库中或将进程 N 存储在数据库中。某种正在运行的作业的内存表。您还可以使用某种启发式方法来估计百分比。例如，如果它是“注册新用户”作业，如果用户的表有电子邮件地址，则可能完成 20%，如果用户头像表中有该用户的数据，则可能完成 40%，等等。我不推荐就这么多。
| 归档时间： |
|
| 查看次数： |
12756 次 |
| 最近记录： |