标签 Python 下的文章

htmx:Gopher走向全栈的完美搭档?

本文永久链接 – https://tonybai.com/2024/09/20/htmx-gopher-perfect-partner-for-full-stack

在传统的Web开发领域,前端和后端开发通常被明确划分。前端主要负责用户界面的交互和视觉呈现,运用HTML、CSS和JavaScript等技术;后端则专注于服务器逻辑、数据库管理和核心功能实现,常用Go、Java、PHP、Ruby等语言。

然而,随着技术的不断演进和开发流程的优化,全栈开发逐渐成为一种趋势。全栈开发者能够在项目的不同阶段灵活转换角色,有效降低沟通成本和缩短开发周期。他们对系统的整体架构和工作原理有更深入的理解,从而能更高效地解决问题。此外,全栈技能也使得开发者在就业市场上更具竞争力,能够承担更多样化的职责。

尽管如此,对于许多专注后端的工程师(包括众多Gopher)来说,前端开发仍然是一个不小的挑战。它不仅要求熟悉JavaScript等语言,还需要理解复杂的前端框架和工具链。这使得不少后端开发者在面对全栈开发时感到力不从心。

幸运的是,技术的进步为我们提供了更简单、高效的开发途径。Go语言以其简洁和高效著称,而htmx库则通过HTML属性实现丰富的前端交互。将两者结合,开发者可以在无需深入学习JavaScript的情况下,轻松实现全栈开发。这种组合不仅能够显著提升开发效率,还能充分利用服务器端渲染(SSR)的优势,在性能和用户体验方面取得显著提升。

那么,htmx是否真的是Gopher走向全栈的完美搭档呢?在本文中,我们就将探讨一下这个问题,介绍一下htmx的核心理念和工作原理,并结合代码示例和使用场景,详细分析Go和htmx如何协同工作。至于Go+htmx究竟有多能打,相信在本文最后,你会得出自己的评价!

1. htmx:为简化前端开发而生

传统的前端开发通常依赖于JavaScript框架,例如React、Vue或Angular。这些框架虽然功能强大,但往往伴随着高昂的学习成本和复杂的开发流程。对于那些主要从事后端开发的程序员来说,学习和掌握这些框架不仅需要花费大量时间,还需要深入理解前端生态系统中的各种概念和工具链。这种学习曲线和开发复杂性成为了许多后端开发者的阻碍,同时也成为了阻碍Go开发者迈向全栈的绊脚石。

htmx的诞生正是为了简化前端开发,特别是对于那些不愿意或没有时间深入学习JavaScript的开发者。

htmx的核心理念是通过扩展HTML,使其具备更强大的功能,从而减少对JavaScript的依赖。它遵循了”HTML优先”的设计原则,允许开发者直接在HTML元素中添加特殊的属性来定义与服务器交互的行为,比如动态加载、表单处理、局部刷新等,从而实现动态交互,而无需编写任何JavaScript代码。可以说,htmx的出现为后端开发者(包括Gopher)提供了一种新的选择,使得Web应用的开发变得更加直观和简便。

不过,htmx自身却是一个轻量级的JavaScript库,这与Go的设计哲学有些“异曲同工”,即简单留给大家,复杂留给自己。作为js库,它提供了一组简洁而强大的API,通过设置HTML属性,开发者就可以实现多种交互功能。以下是htmx的一些核心特性:

  • 请求类型(hx-get、hx-post、hx-put和hx-delete)

通过指定请求类型,htmx可以在用户触发事件时向服务器发送请求,并处理响应。

  • 目标更新(hx-target)

支持指定服务器响应数据要插入的DOM元素,支持部分页面更新而无需刷新整个页面。

  • 触发条件(hx-trigger)

支持定义请求触发的条件,例如点击、鼠标悬停、表单提交等事件。

  • 交换方式(hx-swap)

支持定义响应内容插入DOM的方式,可以选择替换、插入、删除等操作。

这些API的设计目标是让开发者能够通过声明式的方式来实现前端逻辑,而不必依赖JavaScript代码,以简化开发过程。

由于几乎无需后端开发者写JavaScript,HTMX很容易被认为是SSR(服务器端渲染)的一种实现。它们看似很相似,但它们的思路并不完全一致。SSR的渲染过程是在服务器上完成的,服务器生成整个HTML页面的内容,并将其发送给客户端。客户端接收到完整的HTML直接展示给用户。这也使得SSR通常可以提供更快的初始加载体验,因为用户可以立即看到页面内容,而不必等待JavaScript加载和执行。此外,由于HTML内容在服务器上渲染,搜索引擎更容易抓取和索引内容。

而HTMX的大部分渲染也是在服务端完成的,但它支持在客户端通过AJAX请求动态更新页面的某些部分,而不需要重新加载整个页面,只是它是通过简单的HTML属性(外加自身js)实现这些功能的,而无需用户手工写JavaScript实现。HTMX还使得页面能够更具交互性,用户可以在不离开当前页面的情况下与应用程序进行交互。

因此,htmx可以视为一种结合SSR和局部CSR(客户端渲染)的技术,它让你通过服务器端渲染HTML,同时在客户端实现灵活的动态交互功能。这使得开发者能够在SSR提供的性能优势和SEO友好性基础上,提升用户体验而不必依赖完整的客户端框架。

虽然保留了CSR,但与传统的JavaScript框架(如 React、Vue、Angular)相比,htmx非常轻量,体积非常小,以撰写本文时的最新2.0.2版本htmx为例,它的js包大小如下,压缩版才10几k:

此外,传统框架虽然功能强大,但往往需要复杂的配置和较高的学习成本,尤其对于习惯后端开发的开发者来说,更是如此。而使用HTMX,只需掌握HTML和少量的htmx API即可开始开发,适合后端开发者快速上手。

说了这么多htmx的优点,那基于htmx的开发究竟是怎样的呢?下面我们就以htmx的几个核心特性为例,看看如何基于htmx开发简单web应用。

2. htmx的基本用法

在前面我们了解了htmx的几个核心特性,包括请求类型、目标更新等。下面我们就针对这些核心特性,举几个例子,大家初步了解一下基于htmx的开发web应用的流程。

我们先从请求类型开始,了解一下基于htmx如何向后端发起POST/GET/PUT/DELETE等请求。

2.1 示例1:请求类型

在这第一个示例中,我们使用Go语言创建一个简单的服务器,并使用htmx在前端实现不同类型的请求。下面是我们定义的html模板,其中包含了htmx的自定义属性:

// go-htmx/demo1/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Go Example</title>
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <style>
        .row {
            margin-bottom: 10px;
        }
        button {
            width: 120px;
            margin-right: 10px;
        }
        .result {
            display: inline-block;
            width: 300px;
            border: 1px solid #ccc;
            padding: 5px;
            min-height: 20px;
        }
    </style>
</head>
<body>
    <h1>HTMX Request Types Demo</h1>

    <div class="row">
        <button hx-get="/api/get" hx-target="#get-result">GET Request</button>
        <span id="get-result" class="result"></span>
    </div>
    <div class="row">
        <button hx-post="/api/post" hx-target="#post-result">POST Request</button>
        <span id="post-result" class="result"></span>
    </div>
    <div class="row">
        <button hx-put="/api/put" hx-target="#put-result">PUT Request</button>
        <span id="put-result" class="result"></span>
    </div>
    <div class="row">
        <button hx-delete="/api/delete" hx-target="#delete-result">DELETE Request</button>
        <span id="delete-result" class="result"></span>
    </div>
</body>
</html>

在这个HTML模板文件中包含了四个按钮,每个按钮对应一种http请求类型(GET、POST、PUT、DELETE),具体的实现方式是每个按钮都使用了相应的htmx属性(hx-get、hx-post、hx-put、hx-delete)来指定请求类型和目标URL。此外,所有按钮都使用了hx-target来设置服务器的响应将被显示的元素id。以get请求button为例,响应的值将被放到id为get-result的span中。

对应的Go后端程序就非常简单了,下面是代码摘录:

// go-htmx/demo1/main.go

package main

import (
    "fmt"
    "net/http"
    "os"
    "path/filepath"
)

func main() {
    http.HandleFunc("/", handleIndex)
    http.HandleFunc("/api/get", handleGet)
    http.HandleFunc("/api/post", handlePost)
    http.HandleFunc("/api/put", handlePut)
    http.HandleFunc("/api/delete", handleDelete)

    fmt.Println("Server is running on http://localhost:8080")
    http.ListenAndServe(":8080", nil)
}

func handleIndex(w http.ResponseWriter, r *http.Request) {
    currentDir, _ := os.Getwd()
    filePath := filepath.Join(currentDir, "index.html")
    http.ServeFile(w, r, filePath)
}

func handleGet(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Received a GET request")
}

func handlePost(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Received a POST request")
}

func handlePut(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Received a PUT request")
}

func handleDelete(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Received a DELETE request")
}

运行该server后,用浏览器打开localhost:8080,我们将看到下面页面:

逐一点击各个Button,htmx会将从服务器收到的响应内容放入对应的span中:

2.2 示例2:触发条件

在这个示例2中,我们将基于htmx实现对各种触发条件的响应与处理,htmx提供了hx-trigger属性来应对这些不同的事件触发,包括点击、鼠标悬停和表单提交等。我们看下面html模板代码:

// go-htmx/demo2/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Trigger Demo</title>
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <style>
        .demo-section {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .result {
            margin-top: 10px;
            padding: 5px;
            background-color: #f0f0f0;
            min-height: 20px;
        }
    </style>
</head>
<body>
    <h1>HTMX Trigger Demo</h1>

    <div class="demo-section">
        <h2>Click Trigger</h2>
        <button hx-get="/api/click" hx-trigger="click" hx-target="#click-result">
            Click me
        </button>
        <div id="click-result" class="result"></div>
    </div>

    <div class="demo-section">
        <h2>Hover Trigger</h2>
        <div hx-get="/api/hover" hx-trigger="mouseenter" hx-target="#hover-result" style="display: inline-block; padding: 10px; background-color: #e0e0e0;">
            Hover over me
        </div>
        <div id="hover-result" class="result"></div>
    </div>

    <div class="demo-section">
        <h2>Form Submit Trigger</h2>
        <form hx-post="/api/submit" hx-trigger="submit" hx-target="#form-result">
            <input type="text" name="message" placeholder="Enter a message">
            <button type="submit">Submit</button>
        </form>
        <div id="form-result" class="result"></div>
    </div>

    <div class="demo-section">
        <h2>Custom Delay Trigger</h2>
        <input type="text" name="search"
               hx-get="/api/search"
               hx-trigger="keyup changed delay:500ms"
               hx-target="#search-result"
               placeholder="Type to search...">
        <div id="search-result" class="result"></div>
    </div>
</body>
</html>

通过模板代码,我们可以看到hx-trigger 的多种用法:

  • 点击触发(Click Trigger):使用 hx-trigger=”click”,当按钮被点击时触发请求。
  • 悬停触发(Hover Trigger):使用 hx-trigger=”mouseenter”,当鼠标悬停在元素上时触发请求。
  • 表单提交触发(Form Submit Trigger):使用 hx-trigger=”submit”,当表单提交时触发请求。
  • 自定义延迟触发(Custom Delay Trigger):使用 hx-trigger=”keyup changed delay:500ms”,在输入框中输入时,等待500毫秒后触发请求。这对于实现搜索建议等功能很有用。

下面是该示例的后端go代码,逻辑非常简单,针对每个事件调用,简单返回一个字符串:

// go-htmx/demo2/main.go

... ...

func main() {
    http.HandleFunc("/", handleIndex)
    http.HandleFunc("/api/click", handleClick)
    http.HandleFunc("/api/hover", handleHover)
    http.HandleFunc("/api/submit", handleSubmit)
    http.HandleFunc("/api/search", handleSearch)

    fmt.Println("Server is running on http://localhost:8080")
    http.ListenAndServe(":8080", nil)
}

func handleIndex(w http.ResponseWriter, r *http.Request) {
    currentDir, _ := os.Getwd()
    filePath := filepath.Join(currentDir, "index.html")
    http.ServeFile(w, r, filePath)
}

func handleClick(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Button was clicked!")
}

func handleHover(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "You hovered over the element!")
}

func handleSubmit(w http.ResponseWriter, r *http.Request) {
    message := r.FormValue("message")
    fmt.Fprintf(w, "Form submitted with message: %s", message)
}

func handleSearch(w http.ResponseWriter, r *http.Request) {
    query := r.URL.Query().Get("search")
    fmt.Fprintf(w, "Searching for: %s", query)
}

运行该server后,用浏览器打开localhost:8080,我们将看到下面页面:

接下来,我们可以尝试点击按钮、悬停在元素上、提交表单和在搜索框中输入,看看每个操作如何触发HTMX 请求并更新页面的相应部分,下面是触发后的结果:

2.3 示例3:交换方式

在示例3中,我们将展示如何使用htmx的hx-swap属性实现不同的内容更新方式,包括替换、插入和删除操作,其中还包含多种替换方式。下面是html模板:

// go-htmx/demo3/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Swap Demo - All Attributes</title>
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <style>
        .demo-section {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .content-box {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            min-height: 50px;
        }
        .item {
            margin: 5px 0;
            padding: 5px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>HTMX Swap Demo - All Attributes</h1>

    <div class="demo-section">
        <h2>innerHTML (Default)</h2>
        <button hx-get="/api/swap/inner" hx-target="#inner-content">
            Swap innerHTML
        </button>
        <div id="inner-content" class="content-box">
            <p>This is the original content. The entire inner HTML will be replaced.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>outerHTML</h2>
        <button hx-get="/api/swap/outer" hx-target="#outer-content" hx-swap="outerHTML">
            Swap outerHTML
        </button>
        <div id="outer-content" class="content-box">
            <p>This entire div will be replaced, including its container.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>textContent</h2>
        <button hx-get="/api/swap/text" hx-target="#text-content" hx-swap="textContent">
            Swap textContent
        </button>
        <div id="text-content" class="content-box">
            <p>This <strong>text</strong> will be replaced, but HTML tags will be treated as plain text.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>beforebegin</h2>
        <button hx-get="/api/swap/before" hx-target="#before-content" hx-swap="beforebegin">
            Insert before
        </button>
        <div id="before-content" class="content-box">
            <p>New content will be inserted before this div.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>afterbegin</h2>
        <button hx-get="/api/swap/afterbegin" hx-target="#afterbegin-content" hx-swap="afterbegin">
            Insert at beginning
        </button>
        <div id="afterbegin-content" class="content-box">
            <p>New content will be inserted at the beginning of this div, before this paragraph.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>beforeend</h2>
        <button hx-get="/api/swap/beforeend" hx-target="#beforeend-content" hx-swap="beforeend">
            Insert at end
        </button>
        <div id="beforeend-content" class="content-box">
            <p>New content will be inserted at the end of this div, after this paragraph.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>afterend</h2>
        <button hx-get="/api/swap/after" hx-target="#after-content" hx-swap="afterend">
            Insert after
        </button>
        <div id="after-content" class="content-box">
            <p>New content will be inserted after this div.</p>
        </div>
    </div>

    <div class="demo-section">
        <h2>delete</h2>
        <button hx-get="/api/swap/delete" hx-target="#delete-content" hx-swap="delete">
            Delete content
        </button>
        <div id="delete-content" class="content-box">
            <p>This content will be deleted when the button is clicked.</p>
        </div>
    </div>
</body>
</html>

这个示例略复杂,它涵盖了hx-swap的所有属性:

  • innerHTML(默认):替换目标元素的内部HTML。
  • outerHTML:用响应替换整个目标元素。
  • textContent:替换目标元素的文本内容,不解析HTML。
  • beforebegin:在目标元素之前插入响应。
  • afterbegin:在目标元素的第一个子元素之前插入响应。
  • beforeend:在目标元素的最后一个子元素之后插入响应。
  • afterend:在目标元素之后插入响应。
  • delete:删除目标元素,忽略响应内容。

为了配合这个演示,我们编写了一个简单的go后端程序:

// go-htmx/demo3/main.go
... ...

func main() {
    http.HandleFunc("/", handleIndex)
    http.HandleFunc("/api/swap/inner", handleInner)
    http.HandleFunc("/api/swap/outer", handleOuter)
    http.HandleFunc("/api/swap/text", handleText)
    http.HandleFunc("/api/swap/before", handleBefore)
    http.HandleFunc("/api/swap/afterbegin", handleAfterBegin)
    http.HandleFunc("/api/swap/beforeend", handleBeforeEnd)
    http.HandleFunc("/api/swap/after", handleAfter)
    http.HandleFunc("/api/swap/delete", handleDelete)

    fmt.Println("Server is running on http://localhost:8080")
    http.ListenAndServe(":8080", nil)
}

func handleIndex(w http.ResponseWriter, r *http.Request) {
    currentDir, _ := os.Getwd()
    filePath := filepath.Join(currentDir, "index.html")
    http.ServeFile(w, r, filePath)
}

func handleInner(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<p>This content replaced the inner HTML at %s</p>", time.Now().Format(time.RFC1123))
}

func handleOuter(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<div id=\"outer-content\" class=\"content-box\"><p>This div replaced the entire outer HTML at %s</p></div>", time.Now().Format(time.RFC1123))
}

func handleText(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "This replaced the text content at %s. <strong>HTML tags</strong> are not parsed.", time.Now().Format(time.RFC1123))
}

func handleBefore(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<p class=\"item\">This content was inserted before the target div at %s</p>", time.Now().Format(time.RFC1123))
}

func handleAfterBegin(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<p class=\"item\">This content was inserted at the beginning of the target div at %s</p>", time.Now().Format(time.RFC1123))
}

func handleBeforeEnd(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<p class=\"item\">This content was inserted at the end of the target div at %s</p>", time.Now().Format(time.RFC1123))
}

func handleAfter(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<p class=\"item\">This content was inserted after the target div at %s</p>", time.Now().Format(time.RFC1123))
}

func handleDelete(w http.ResponseWriter, r *http.Request) {
    // For delete, we don't need to send any content back
    w.WriteHeader(http.StatusOK)
}

运行该server后,用浏览器打开localhost:8080,你应该能看到一个包含八个不同部分的页面,每个部分演示了hx-swap的一种属性。你可以点击每个部分的按钮,观察内容如何以不同的方式更新或变化。这个综合示例展示了hx-swap的强大功能和灵活性,让你可以精确控制如何更新页面的不同部分。下面是你可以看到的效果呈现:

以上就是htmx核心属性的用法,基于这些核心属性,我们可以实现更多更为复杂和高级的场景功能。在下一节,我们会举两个复杂一些的示例,供大家参考。

3. 高级用法

3.1 基于token的身份认证

在使用HTMX作为前端与后端进行交互时,通常会涉及到用户身份认证鉴权,其中一个常见场景是通过前端获取的Token(如JWT)去访问后端的受保护的API。下面我们看看使用HTMX该如何实现这一常见功能。

下面是网站首页的html模板,包含用户登录的Form:

// go-htmx/demo4/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Auth Example - Login</title>
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <script>
        htmx.on('htmx:afterRequest', function(event) {
            if (event.detail.elt.id === 'login-form') {
                var xhr = event.detail.xhr;
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        localStorage.setItem('auth_token', response.token);
                        window.location.href = response.redirect;
                    } else {
                        document.getElementById('message').innerText = response.message;
                    }
                } else {
                    document.getElementById('message').innerText = "An error occurred. Please try again.";
                }
            }
        });
    </script>
</head>
<body>
    <h1>HTMX Auth Example - Login</h1>
    <form id="login-form" hx-post="/login" hx-target="#message">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>
        <button type="submit">Login</button>
    </form>
    <div id="message"></div>
</body>
</html>

这个代码片段结合了HTMX和JavaScript,处理登录表单的提交,以及登录成功后将令牌(Token)存储到浏览器的本地存储中,并在登录成功后重定向到dashboard页面。

这段代码监听了HTMX的htmx:afterRequest事件。此事件在HTMX请求完成(即请求已经发出并接收到响应)后触发,event.detail.elt表示触发事件的元素。代码检查该元素的id是否为login-form,确认这次请求来自登录表单。如果是其他表单或元素触发的请求,它将忽略。如果服务器的身份验证成功,它以json格式返回token和重定向地址,前端会解析响应,并将Token存储到本地存储,然后自动跳转到登录后的dashboard页面。

下面是dashboard页面的html模板:

// go-htmx/demo4/dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Auth Example - Dashboard</title>
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            htmx.on('htmx:configRequest', function(event) {
                var token = localStorage.getItem('auth_token');
                if (token) {
                    event.detail.headers['Authorization'] = 'Bearer ' + token;
                }
            });
        });
    </script>
</head>
<body>
    <h1>Welcome to Your Dashboard</h1>
    <button hx-get="/protected" hx-target="#protected-content">Access Protected Content</button>
    <div id="protected-content"></div>
</body>
</html>

这段代码最值得关注的地方就是在后续发出的Request中自动加入之前获取到的token。这里是使用了htmx:configRequest事件实现的。监听HTMX的htmx:configRequest事件,该事件在HTMX发出请求之前触发,它允许你修改即将发出的请求。这里的configRequest的处理逻辑是:如果Token存在,将它添加到即将发出的请求的Authorization头中,并格式化为标准的Bearer Token形式(即 “Authorization: Bearer your_token_here”)。这样,后端在处理请求时可以从请求头中提取出Token,用于验证用户身份。

整个示例的后端go程序如下:

// go-htmx/demo4/main.go
package main

import (
    "encoding/json"
    "fmt"
    "html/template"
    "net/http"
    "strings"
    "sync"

    "github.com/google/uuid"
)

var (
    tokens   = make(map[string]bool)
    tokensMu sync.Mutex
)

type LoginResponse struct {
    Success  bool   `json:"success"`
    Token    string `json:"token,omitempty"`
    Message  string `json:"message"`
    Redirect string `json:"redirect,omitempty"`
}

func main() {
    http.HandleFunc("/", indexHandler)
    http.HandleFunc("/login", loginHandler)
    http.HandleFunc("/dashboard", dashboardHandler)
    http.HandleFunc("/protected", protectedHandler)
    fmt.Println("Server is running on http://localhost:8080")
    http.ListenAndServe(":8080", nil)
}

func indexHandler(w http.ResponseWriter, r *http.Request) {
    if r.URL.Path != "/" {
        http.NotFound(w, r)
        return
    }
    http.ServeFile(w, r, "index.html")
}

func loginHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method != http.MethodPost {
        http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
        return
    }

    username := r.FormValue("username")
    password := r.FormValue("password")

    response := LoginResponse{}

    if username == "admin" && password == "password" {
        token := uuid.New().String()

        tokensMu.Lock()
        tokens[token] = true
        tokensMu.Unlock()

        response.Success = true
        response.Token = token
        response.Message = "Login successful"
        response.Redirect = "/dashboard"
    } else {
        response.Success = false
        response.Message = "Login failed. Please check your credentials and try again."
    }

    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(response)
}

func dashboardHandler(w http.ResponseWriter, r *http.Request) {
    tmpl, err := template.ParseFiles("dashboard.html")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    tmpl.Execute(w, nil)
}

func protectedHandler(w http.ResponseWriter, r *http.Request) {
    authHeader := r.Header.Get("Authorization")
    if authHeader == "" || !strings.HasPrefix(authHeader, "Bearer ") {
        http.Error(w, "Unauthorized", http.StatusUnauthorized)
        return
    }

    token := strings.TrimPrefix(authHeader, "Bearer ")

    tokensMu.Lock()
    valid := tokens[token]
    tokensMu.Unlock()

    if !valid {
        http.Error(w, "Invalid token", http.StatusUnauthorized)
        return
    }

    fmt.Fprintf(w, `<div>
        <h2>Protected Content</h2>
        <p>This is sensitive information only for authenticated users.</p>
        <p>Your token: %s</p>
    </div>`, token)
}

注:这里仅是示例,因此只是用了一个uuid作为token,没有使用通用的jwt。

运行程序,登录并在Dashboard中点击访问protected data,我们会看到下面图中呈现的效果:

下面我们再来看一个略复杂一些的示例,这次我们基于htmx来实现SSE(Server-Sent Event),即服务端事件。

3.2 SSE

Server-Sent Events (SSE) 是一种轻量级的实时通信技术,允许服务器通过HTTP协议持续向客户端推送更新数据。与WebSocket不同,SSE是单向通信,服务器可以推送数据到客户端,但客户端无法通过同一连接向服务器发送数据。这种机制非常适合需要频繁更新数据但对双向通信要求不高的场景,如股票价格、新闻推送、社交媒体通知等。

htmx对SSE的支持是通过扩展包实现的,下面就是本示例的index.html模板代码:

// go-htmx/demo5/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX SSE Notifications</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
    <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
</head>
<body>
    <h1>实时通知</h1>
    <div hx-ext="sse" sse-connect="/events" sse-swap="message">
        <ul id="notifications">
            <!-- 通知将在这里动态添加 -->
        </ul>
    </div>

    <script>
        htmx.on("htmx:sseMessage", function(event) {
            var ul = document.getElementById("notifications");
            var li = document.createElement("li");
            li.innerHTML = event.detail.message;
            ul.insertBefore(li, ul.firstChild);
        });
    </script>
</body>
</html>

这个代码片段通过HTMX和Server-Sent Events (SSE) 实现了实时通知的功能。它会动态将服务器端发送的通知添加到页面的通知列表中。具体来说:

  • hx-ext=”sse”:启用了HTMX的SSE扩展,用于处理 Server-Sent Events(服务器发送事件),使得浏览器可以保持与服务器的长连接,实时接收更新。
  • sse-connect=”/events”:指定了SSE连接的URL。浏览器会向/events这个路径发起SSE连接,服务器可以通过这个连接持续向客户端推送消息。
  • sse-swap=”message”:指示HTMX在收到SSE消息时触发事件处理,消息内容将使用JavaScript进行处理而不是自动更新HTML。
  • htmx.on(“htmx:sseMessage”, function(event)):监听HTMX的htmx:sseMessage事件,每当服务器通过SSE推送新消息时,该事件会触发。event.detail.message包含从服务器接收到的消息内容。
  • var ul = document.getElementById(“notifications”);:获取页面上ID为notifications的\<ul>元素,表示存放通知的容器。收到的通知通过htmx:sseMessage事件处理,将消息动态添加到通知列表中,并显示在网页上。

下面是示例对应的Go后端程序:

// go-htmx/demo5/main.go

func main() {
    http.HandleFunc("/", serveHTML)
    http.HandleFunc("/events", handleSSE)

    fmt.Println("Server starting on http://localhost:8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

func serveHTML(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "index.html")
}

func handleSSE(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/event-stream")
    w.Header().Set("Cache-Control", "no-cache")
    w.Header().Set("Connection", "keep-alive")

    flusher, ok := w.(http.Flusher)
    if !ok {
        http.Error(w, "Streaming unsupported!", http.StatusInternalServerError)
        return
    }

    notificationCount := 1

    for {
        notification := fmt.Sprintf("新通知 #%d: %s", notificationCount, time.Now().Format("15:04:05"))
        fmt.Fprintf(w, "data: <li>%s</li>\n\n", notification)
        flusher.Flush()

        notificationCount++
        time.Sleep(3 * time.Second)

        if r.Context().Err() != nil {
            return
        }
    }
}

运行程序,打开浏览器访问localhost:8080,在加载的页面中会自动建立sse连接,页面上的通知消息区便会如下面这样每3秒一变化:

不过这个示例的程序有个“瑕疵”,那就是如果将htmx的版本从1.9.6换作最新的2.0.2,那么示例就将不工作了,翻看了一下htmx文档,应该是sseMessage这个htmx扩展属性被删除了。

如果要让示例更具通用性,可以将index.html换成下面的代码:

// go-htmx/demo6/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX SSE Notifications</title>
    <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    <style>
        #notification {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f8f8f8;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>实时通知</h1>
    <div id="notification-container">
        <div id="notification">等待通知...</div>
    </div>

    <script>
        document.body.addEventListener('htmx:load', function() {
            var notificationDiv = document.getElementById('notification');
            var evtSource = new EventSource("/events");

            evtSource.onmessage = function(event) {
                notificationDiv.textContent = event.data;
            };

            evtSource.onerror = function(err) {
                console.error("EventSource failed:", err);
            };
        });
    </script>
</body>
</html>

当然这个代码更多使用js来实现事件的处理。

4. 小结

本文探讨了Go与htmx这一全栈组合的简洁优势。对于后端开发者而言,这一组合提供了一种无需深入掌握前端技术即可开发现代Web应用的高效途径。

然而,从两个高级示例中可以看出,JavaScript代码仍难以完全避免,虽然数量不多,但在稍复杂的场景下依然不可或缺。

因此,htmx目前更多被中小型团队或个人开发者所青睐。这类开发者通常没有专职的前端人员,但希望快速构建并部署功能完善的Web应用。

综上所述,在我这个对前端开发了解甚少的Go开发者看来,Go与htmx的组合的确降低了开发门槛,同时提供了性能和SEO优势,使其成为现代Web开发中值得推荐的技术栈之一。不过,对于复杂的Web应用,开发者可能需要结合htmx和JavaScript,或更可能直接采用vue、react或angular等框架。

目前Go社区对htmx的支持也越来越多,比如html模板引擎templ可以用于生成htmx模板,当然也有专有的htmx框架,比如:ghtmxpagodago-htmx等。

本文涉及的源码可以在这里下载。

5. 参考资料


Gopher部落知识星球在2024年将继续致力于打造一个高品质的Go语言学习和交流平台。我们将继续提供优质的Go技术文章首发和阅读体验。同时,我们也会加强代码质量和最佳实践的分享,包括如何编写简洁、可读、可测试的Go代码。此外,我们还会加强星友之间的交流和互动。欢迎大家踊跃提问,分享心得,讨论技术。我会在第一时间进行解答和交流。我衷心希望Gopher部落可以成为大家学习、进步、交流的港湾。让我相聚在Gopher部落,享受coding的快乐! 欢迎大家踊跃加入!

img{512x368}
img{512x368}

img{512x368}
img{512x368}

著名云主机服务厂商DigitalOcean发布最新的主机计划,入门级Droplet配置升级为:1 core CPU、1G内存、25G高速SSD,价格5$/月。有使用DigitalOcean需求的朋友,可以打开这个链接地址:https://m.do.co/c/bff6eed92687 开启你的DO主机之路。

Gopher Daily(Gopher每日新闻) – https://gopherdaily.tonybai.com

我的联系方式:

  • 微博(暂不可用):https://weibo.com/bigwhite20xx
  • 微博2:https://weibo.com/u/6484441286
  • 博客:tonybai.com
  • github: https://github.com/bigwhite
  • Gopher Daily归档 – https://github.com/bigwhite/gopherdaily
  • Gopher Daily Feed订阅 – https://gopherdaily.tonybai.com/feed

商务合作方式:撰稿、出书、培训、在线课程、合伙创业、咨询、广告合作。

从零开始编程:Go语言真的适合新手吗?

本文永久链接 – https://tonybai.com/2024/08/22/go-as-first-language

Go语言自诞生以来,一直以其简洁、高效和面向工程的特性受到开发者的青睐,尤其是在后端开发和并发编程方面,Go表现出了独特的优势。然而,作为一门以简单著称的语言,它是否适合作为编程初学者的第一门语言呢?笔者今天在Reddit上看到有人提出此类问题,也做了一些思考,这里就通过本文从多个角度来和大家一起探讨下这一问题。

我们先从Go适合作为第一门语言的特质说起。

1. Go语言的简洁性

在我的《Go语言精进之路第一卷》第3节“理解Go语言的设计哲学”中我就提到过:Go语言的设计哲学是“做减法”,拒绝走语言特性融合的道路,提供简单的用户界面,将复杂性留给语言自身的设计和实现者

这种简洁性让初学者能够更快地上手,将精力聚焦在理解编程的基本概念和程序的逻辑结构上,而不是被复杂的语法规则所困扰。例如,Go的语法简洁明了,没有太多冗余的语法糖(一个事情大多只有一种写法),使得代码更容易阅读、理解和维护。

此外,Go的静态类型系统提供了清晰的类型检查机制,这有助于初学者理解变量和类型的概念。与动态类型语言相比,Go的类型系统减少了初学者在学习过程中可能遇到的困惑。此外,Go仍保留了指针等底层概念,让学生在学习过程中还能够接触到内存管理和效率优化的基础知识,也便于学习数据结构与算法,为后续的进阶学习做好铺垫。

2. 并发编程的天然优势

随着多核处理器的普及,并发编程已经成为现代编程的重要技能。Go语言将并发编程作为核心特性,通过goroutines和channels提供了一种简洁直观的并发模型。相比于传统的线程管理,Go的并发模型更加易于理解和使用,这为初学者在学习并发编程时提供了极大的便利。

通过学习Go的并发编程模型,初学者能够及早掌握现代编程中的关键概念,为后续在各种领域的发展打下坚实的基础。

3. 学习曲线与实践应用

经过Go团队不懈的努力,Go语言的安装与使用过程已经非常简单明了了,可以说开箱即用,初学者只需几步即可搭建开发环境。这种低门槛的特性让初学者可以专注于编程本身,而不必花费过多时间在环境配置上。同时,Go强大的标准库也为初学者提供了丰富的资源,使他们可以在不依赖第三方库的情况下完成许多实际项目,无需与繁芜的第三方依赖“作斗争”。此外,Go程序编译速度极快,可以快速让学员获得反馈。

注:我的极客时间专栏《Go语言第一课》专栏的“03|配好环境:选择一种最适合你的Go安装方法”有对Go环境搭建的系统全面的讲解,欢迎订阅阅读。

4. 面向未来的选择

选择第一门编程语言不仅关乎当下的学习体验,更应该着眼于未来的发展。Go在保持简洁性的同时,涵盖了现代编程的核心概念,从并发编程到网络服务,从系统编程到云原生应用,Go都能胜任。这种全面的能力使得Go成为初学者为未来编程生涯奠定基础的理想选择。

此外,Go在业界的广泛应用也为学习者提供了良好的职业前景。掌握Go的初学者可能会在未来的就业市场中占据优势,特别是在后端开发和云计算等领域。

尽管Go有许多优势,但我们也需要正视其作为第一门编程语言所面临的挑战。接下来,我们就来看看这些挑战!

5. 现实中的挑战

虽然Go语言简单易学,但现实中,无论中外,以Go为第一门编程语言的初学者数量依然不多,这是为什么呢?笔者认为主要有如下几点原因:

首先,Go虽然简单,简化了许多编程概念,但与Python、Scratch等传统的编程入门语言相比,学习曲线依旧“陡峭”,对于完全没有编程经验的初学者而言,理解指针、并发等特性仍然需要一定的努力。此外,Go主要面向后端开发,在前端开发和图形界面支持方面较为有限,对于一些喜欢更直观地通过图形化的方式看到反馈的初学者来说,Go的满足度有欠缺,这可能会影响一些初学者的学习兴趣。

其次,与Python等语言相比,Go主要面对后端开发,在数据科学和机器学习等热门领域的应用相对有限(虽然目前已经在向AI应用开发领域大踏步前进),这可能会影响一些对这些领域感兴趣的初学者的选择。对于许多初学者来说,这些看似更“酷”的应用领域可能比Go所擅长的系统编程和网络服务更具吸引力。

再次,Go在编程教育中的应用仍然相对有限。传统的计算机科学课程多年来已经确立并一直依赖于Java、Python或C++等成熟的编程语言。更新课程设置、编写新的教材、培训教师都需要时间和资源,这种惯性使得Go难以迅速进入教育体系。

最后,相比其他语言(如Java、C++等),Go团队在教育领域的推广较少,缺乏针对教育机构的专门资源和支持(这让我想起了当年Sun在校园推广Java,微软在校园推广C#等,没有对比,就没有伤害),同时由于Go语言的设计更倾向于“实战派”,并不受“学院派”青睐,因此学术界对Go语言研究也相对较少,导致在高等教育机构的推广受限。

6. 小结:平衡与选择

尽管面临这些挑战,Go语言作为第一门编程语言的潜力仍不容忽视。Go语言以其简洁性、并发特性和面向工程的实用型设计,无疑是一个极具吸引力的选择。虽然它可能不是最容易上手的语言,但它提供了一个平衡的学习体验,既不会掩盖重要的编程概念,也不会像Rust那样陡峭得令人望而却步。

同时,我们也需要认识到,没有一种编程语言能够完美满足所有学习者的需求。Go的优势在某些领域可能是无可替代的,但在其他方面可能需要补充。因此,一个更平衡的方法可能是将Go作为编程教育的重要组成部分,而不是唯一选择。比如,对于今天的初学者来说,理想的方案可能是将Go作为主要学习对象,同时辅以其他语言(如Python)来弥补在特定领域的不足。无论选择哪种语言,保持好奇心和学习的热情才是成为优秀程序员的关键。

最后,Go要实现在编程教育中扮演更重要的角色,还需要多方面的努力。Go团队和Go社区还需加强在教育领域的推广,开发更多面向初学者的资源和工具,以激励教育机构将Go纳入课程体系,特别是在教授并发编程等概念时。

如果你对Go语言感兴趣,并且希望系统地学习如何从零开始编写Go代码,我在两年多之前在极客时间开设了“Go语言第一课”的专栏。 这个专栏专为Go语言新手设计,从基础概念到实战案例,逐步带你掌握Go语言的核心知识点。无论你是编程初学者,还是希望掌握一门新语言的开发者,这个专栏都能为你提供有价值的学习资源和实践指导。

img{512x368}


Gopher部落知识星球在2024年将继续致力于打造一个高品质的Go语言学习和交流平台。我们将继续提供优质的Go技术文章首发和阅读体验。同时,我们也会加强代码质量和最佳实践的分享,包括如何编写简洁、可读、可测试的Go代码。此外,我们还会加强星友之间的交流和互动。欢迎大家踊跃提问,分享心得,讨论技术。我会在第一时间进行解答和交流。我衷心希望Gopher部落可以成为大家学习、进步、交流的港湾。让我相聚在Gopher部落,享受coding的快乐! 欢迎大家踊跃加入!

img{512x368}
img{512x368}

Gopher Daily(Gopher每日新闻) – https://gopherdaily.tonybai.com

我的联系方式:

  • 微博(暂不可用):https://weibo.com/bigwhite20xx
  • 微博2:https://weibo.com/u/6484441286
  • 博客:https://tonybai.com
  • Gopher Daily归档 – https://github.com/bigwhite/gopherdaily
  • Gopher Daily Feed订阅 – https://gopherdaily.tonybai.com/feed

商务合作方式:撰稿、出书、培训、在线课程、合伙创业、咨询、广告合作。

如发现本站页面被黑,比如:挂载广告、挖矿等恶意代码,请朋友们及时联系我。十分感谢! Go语言第一课 Go语言精进之路1 Go语言精进之路2 Go语言编程指南
商务合作请联系bigwhite.cn AT aliyun.com

欢迎使用邮件订阅我的博客

输入邮箱订阅本站,只要有新文章发布,就会第一时间发送邮件通知你哦!

这里是 Tony Bai的个人Blog,欢迎访问、订阅和留言! 订阅Feed请点击上面图片

如果您觉得这里的文章对您有帮助,请扫描上方二维码进行捐赠 ,加油后的Tony Bai将会为您呈现更多精彩的文章,谢谢!

如果您希望通过微信捐赠,请用微信客户端扫描下方赞赏码:

如果您希望通过比特币或以太币捐赠,可以扫描下方二维码:

比特币:

以太币:

如果您喜欢通过微信浏览本站内容,可以扫描下方二维码,订阅本站官方微信订阅号“iamtonybai”;点击二维码,可直达本人官方微博主页^_^:
本站Powered by Digital Ocean VPS。
选择Digital Ocean VPS主机,即可获得10美元现金充值,可 免费使用两个月哟! 著名主机提供商Linode 10$优惠码:linode10,在 这里注册即可免费获 得。阿里云推荐码: 1WFZ0V立享9折!


View Tony Bai's profile on LinkedIn
DigitalOcean Referral Badge

文章

评论

  • 正在加载...

分类

标签

归档



View My Stats