Как выполнить () шаблон несколько раз в одной функции-обработчике - PullRequest
Новая
       2

Как выполнить () шаблон несколько раз в одной функции-обработчике

0 голосов
/ 03 октября 2019

Я пытаюсь создать индикатор выполнения, который обновляется на основе хода выполнения аргумента командной строки, который выполняется в моем коде Go. Используя шаблон, я пытаюсь обновлять значение прогресса один раз в секунду, выполняя команду template.Execute (w, data). Я делаю это в цикле for, но вместо того, чтобы обновлять значение в html через шаблон, он добавляет другой экземпляр в моем теле html на существующую страницу. Таким образом, я получаю множество значений прогресса, отображаемых на странице.

Я попытался разделить значение прогресса в своем собственном шаблоне, а затем с помощью template.ExecuteTemplate (w, "templateName", data) обновить только эти конкретные данные, но затем никаких изменений не видно. Я прочитал пост ниже и попытался выполнить описанные там шаги, но я не мог полностью понять, что говорится и как его реализовать. ( Динамическое обновление части шаблона при обновлении переменной golang )

HTML-код (loadingPage.html) 

<!DOCTYPE html>
    <head>
        <title>Image Creation & Download</title>
        <!--Bootstrap CSS and JS-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     
    </head>
    <body>
        <div class="container">
                <h1>Download Page</h1>
                <div>
                    <form action="/createProgress" method="post">
                        <div class="form-group">
                            <label for="inFile">Input File</label>
                            <div>
                                <input type="text" id="inFile" name="inFile" value="placeholder">
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-secondary" id="submitBtn">Load</button>
                        </div>
                        <div>
                            <h4>{{ .PercComp }} Completed</h4>
                            <div class="spinner-border text-primary"></div>
                        </div>
                    </form>              
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>          
    </body>
</html>

Go Code (main.go)основной пакет 

import (
    "log"
    "net/http"
    "os"
    "strconv"
    "text/template"
    "time"
)

type FileData struct {
    PercComp string
}

var t *template.Template
var fd FileData

func createScreen(w http.ResponseWriter, r *http.Request) {
    w.WriteHeader(200)
    t.Execute(w, fd)
    return
}

func progressUpdate(w http.ResponseWriter, r *http.Request) {
    perc := 0
    for i := 0; i < 10; i++ {
        perc = perc + 10
        fd.PercComp = strconv.Itoa(perc) + "%"
        t.Execute(w, fd)
        time.Sleep(time.Second)
    }
    return
}

func main() {
    var err error
    t, err = template.ParseFiles("loadingPage.html")

    if err != nil {
        log.Println("Cannot parse templates:", err)
        os.Exit(-1)
    }
    fd = FileData{
        "0%",
    }

    http.HandleFunc("/", createScreen)
    http.HandleFunc("/createProgress", progressUpdate)

    http.ListenAndServe(":8080", nil)
}

После загрузки страницы и нажатия кнопки «Отправить» тело HTML отображается 10 раз. Приведенный ниже код представляет собой сжатый снимок того, что отображается после запуска функции progressUpdate () в коде Go. 

<head>
        <title>Image Creation &amp; Download</title>
        <!--Bootstrap CSS and JS-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     
    </head>
    <body>
        <div class="container">
                <h1>Download Page</h1>
                <div>
                    <form action="/createProgress" method="post">
                        <div class="form-group">
                            <label for="inFile">Input File</label>
                            <div>
                                <input id="inFile" name="inFile" value="placeholder" type="text">
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-secondary" id="submitBtn">Load</button>
                        </div>
                        <div>
                            <h4>10% Completed</h4>
                            <div class="spinner-border text-primary"></div>
                        </div>
                    </form>              
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>          



        <title>Image Creation &amp; Download</title>
        <!--Bootstrap CSS and JS-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     


        <div class="container">
                <h1>Download Page</h1>
                <div>
                    <form action="/createProgress" method="post">
                        <div class="form-group">
                            <label for="inFile">Input File</label>
                            <div>
                                <input id="inFile" name="inFile" value="placeholder" type="text">
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-secondary" id="submitBtn">Load</button>
                        </div>
                        <div>
                            <h4>20% Completed</h4>
                            <div class="spinner-border text-primary"></div>
                        </div>
                    </form>              
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>          



        <title>Image Creation &amp; Download</title>
        <!--Bootstrap CSS and JS-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     


        <div class="container">
                <h1>Download Page</h1>
                <div>
                    <form action="/createProgress" method="post">
                        <div class="form-group">
                            <label for="inFile">Input File</label>
                            <div>
                                <input id="inFile" name="inFile" value="placeholder" type="text">
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-secondary" id="submitBtn">Load</button>
                        </div>
                        <div>
                            <h4>30% Completed</h4>
                            <div class="spinner-border text-primary"></div>
                        </div>
                    </form>              
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>          
    ...
    ...
    ... 
</body>

Заранее благодарим за помощь и мудрость!

1 Ответ

1 голос
/ 03 октября 2019

Вы не можете сделать это, используя шаблоны и обработку на стороне сервера. Тем не менее, есть несколько способов сделать это:

Вы можете использовать Javascript на стороне клиента, итеративно запрашивая внутренний сервер, чтобы узнать о прогрессе, и перерисовывать индикатор выполнения на основе этого. Вероятно, для этого есть библиотеки JS / Ajax или примеры кода.

Вы можете использовать Javascript для периодического обновления страницы, каждый раз возвращая HTML-страницу, сгенерированную из вашего шаблона, с правильным отображением прогресса.

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

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

...