Question

任何人都可以教我或指导一个工作的例子来满足这个要求。

情景：

列出项目My Web App正在使用spring mvc。
它提供的服务之一是当用户点击按钮时，服务器上将发生长时间运行的进程。（查询数据库，写文件，写日志等...）这个过程可能需要几秒钟或几分钟。
的的 *问题* * * 如何实现服务以更新客户端的进度。
如果流程成功，服务将返回true或false。

感谢您的回复。代码片段或完整的教程将非常有用。

Answer 1

有很多方法可以处理这样的场景。一种方法是根据“过程”对工作进行建模，其中包含“状态”，包括完成百分比。

如果您想象一下网站上的内容，点击按钮开始流程会提交一个表单，开始流程并为流程分配某种身份，就像您创建任何其他类型的宾语。然后它会将您重定向到“进程状态”页面。

流程状态页面将查询流程的状态并显示它。它可能有一个进程ID的URL参数。它可能会使用AJAX调用自行更新以返回进度百分比。

在后端，您现在需要解决几个问题：找出进程N的当前状态，并更新进程N的状态。您可以通过多种方式完成此任务，包括将进度存储在数据库或具有某种内存中的正在运行的作业表。您还可以使用某种启发式方法来估算百分比。例如，如果它是“注册新用户”作业，如果用户的表具有电子邮件地址，则可能完成20％，如果用户头像表中包含该用户的数据，则完成40％，等等。我不建议这同样多。

Answer 2

以下是此进度条问题的可能解决方案：

<强> task.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>

<强> TaskController.java

@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;
    }

}

<强> Task.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;
    }
}

如何使用Spring 3 MVC实现进度条？

2 个答案: