个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-30 21:31:13 25 4
gpt4 key购买 nike

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

场景:

  1. 列表项我的 Web 应用程序正在使用 spring mvc。
  2. 它提供的一项服务是，当用户单击按钮时，服务器上会出现一个长时间运行的进程。 (查询数据库、写入文件、写入日志等...)这个过程可能需要几秒或几分钟。

  3. *问题***我如何实现该服务以向客户端更新其进度。

  4. 如果处理成功，服务返回 true 或 false。

感谢您的回复。代码片段或完整的教程将是最有帮助的。

最佳答案

下面是这个进度条问题的可能解决方案:

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

关于java - 如何使用 Spring 3 MVC 实现进度条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9254369/

25 4 0
文章推荐： java - Sun SAAJ SOAP 实现的替代方案
文章推荐： javascript - typescript 类找不到 "this"变量？
文章推荐： typescript - react 路由器 typescript 导航 0.13.3 - 无法读取属性 'router'
文章推荐： java - Java 中的分层互斥锁
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com