Как реализовать индикатор выполнения с помощью Spring 3 MVC? - PullRequest
Новая
       2

Как реализовать индикатор выполнения с помощью Spring 3 MVC?

10 голосов
/ 13 февраля 2012

Может ли кто-нибудь научить меня или обратиться к рабочему примеру, чтобы удовлетворить это требование.

Сценарий:

  1. Элемент списка В моем веб-приложении используется Spring MVC.
  2. Одна из предоставляемых услуг заключается в том, что когда пользователь нажимает кнопку, на сервере происходит длительный процесс.(Запрос к базе данных, запись файлов, запись журналов и т. Д ...) этот процесс может занять несколько секунд или несколько минут.

  3. * Проблема *** Как реализовать службу для обновления клиента о его ходе.

  4. Служба возвращает значение true или false, если процесс прошел успешно.

Спасибо за ваши ответы.Фрагмент кода или полное руководство будет наиболее полезным.

Ответы [ 2 ]

3 голосов
/ 06 декабря 2016

Вот возможное решение этой проблемы индикатора выполнения:

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;
    }
}
3 голосов
/ 21 февраля 2012

Существует множество способов справиться с подобным сценарием.Один из способов - смоделировать работу в терминах «процесса», который содержит «статус», включая процент выполнения.

Если вы представляете, как это может выглядеть на веб-сайте, нажмите кнопку, чтобы начатьпроцесс отправляет форму, которая начинает процесс и присваивает какой-то идентификатор процессу, почти так же, как если бы вы создавали какой-либо другой объект.Затем он перенаправит вас на страницу «Состояние процесса».

Страница состояния процесса запросит состояние процесса и отобразит его.Вероятно, он имеет параметр URL для идентификатора процесса.Возможно, он обновит себя с помощью вызова AJAX, чтобы вернуть процент выполнения.

В бэкэнде теперь вам нужно решить пару проблем: выяснить текущее состояние процесса N и обновить состояние процессаN. Это можно сделать несколькими способами, включая сохранение прогресса в базе данных или наличие какой-либо таблицы выполняемых заданий в памяти.Вы также можете использовать какую-то эвристику, чтобы оценить процент.Например, если это задание «зарегистрировать нового пользователя», возможно, оно выполнено на 20%, если в таблице пользователя есть адрес электронной почты, на 40%, если в таблице аватаров пользователя есть данные для этого пользователя и т. Д. Я не рекомендуюэто столько.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...