个人中心
gpt4 book ai didi

html - 如何在单个处理程序函数中多次执行()模板

转载 作者：行者123 更新时间：2023-12-01 22:35:20 25 4
gpt4 key购买 nike

我试图创建一个进度条，该进度条根据在Go代码中执行的命令行参数的进度进行更新。使用模板，我试图通过运行template.Execute(w，data)命令每秒更新一次进度值。我在for循环中执行此操作，而不是通过模板更新html中的值，而是将html主体上的另一个实例附加到现有页面上。因此，我最终在页面上显示了许多进度值。

我尝试将进度值分成自己的模板，然后使用template.ExecuteTemplate(w，“templateName”，data)仅更新该特定数据，但是看不到任何更改。我已经阅读了以下帖子，并尝试按照此处列出的步骤进行操作，但是我无法完全理解所讲的内容以及如何实施。
(Dynamically refresh a part of the template when a variable is updated 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>

转到代码(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次。以下代码是在Go代码中运行progressUpdate()函数后显示的内容的简要快照。 
<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>

预先感谢您的所有帮助和智慧!

最佳答案

您不能使用模板和服务器端处理来执行此操作。也就是说，有多种方法可以执行此操作:

您可以在客户端使用Javascript，反复查询后端服务器以了解进度，然后根据该进度条重新绘制进度条。可能有JS / Ajax库或代码示例可以执行此操作。

您可以使用Javascript定期刷新页面，每次返回从模板生成的HTML页面并显示正确的进度。

关于html - 如何在单个处理程序函数中多次执行()模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58221813/

25 4 0
文章推荐： go - 为什么追加覆盖子元素？
文章推荐： go - 如何用gorm解决 "runtime error: invalid memory address or nil pointer dereference"
文章推荐： go - 如何在golang中创建.lock文件并在退出前将其删除？
文章推荐： arrays - 将带有用户输入的 slice 附加到函数中
行者123
个人简介

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

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