Lua - 網頁程式設計

歡迎，未來的網頁開發者們！今天，我們將深入探索Lua網頁程式設計的精彩世界。作為一個教了超過十年計算機科學的老師，我可以告訴你，Lua對初學者來說是一種出色的語言。它簡單、強大，並且非常適合網頁開發。所以，讓我們一起踏上這個旅程吧！

Lua - Web Programming

應用程序和框架

在我們開始編程之前，讓我們先討論一下為什麼Lua適合網頁程式設計。想像你正在蓋一個房子。Lua就像一個多功能的工具箱，可以幫助你從基礎到屋頂建造一切。它輕量、快速，並且能夠與其他技術很好地配合。

人氣Lua網頁框架

以下是一些流行的Lua網頁框架的快速概覽：

框架	描述
Orbit	簡單且靈活
WSAPI	網頁伺服器API
Xavante	Lua網頁伺服器
Lapis	功能完整的框架
OpenResty	高性能網頁平台

這些框架各有其優點，但我們今天將專注於Orbit和WSAPI。

Orbit

Orbit就像你友好的鄰居蜘蛛俠——Lua網頁框架中的多面手，它多用途、易於使用，並且能夠高效地完成工作。讓我們從一個簡單的例子開始，讓我們的腳濕一下水。

簡單範例 - Orbit

local orbit = require "orbit"

-- 創建一個新的Orbit應用程序
local hello = orbit.new()

-- 為根URL定義一個路由
function hello:index(web)
return "Hello, World! 歡迎來到Lua網頁程式設計！"
end

-- 開始伺服器
hello:run()

讓我們分解一下：

我們導入Orbit框架。
我們創建一個名為hello的新Orbit應用程序。
我們為根URL ("/") 定義一個函數，返回一個問候。
最後，我們使用hello:run()開始伺服器。

當你運行這個腚本並訪問http://localhost:8080時，你會看到我們友好的問候。興奮吧？

創建表單

現在，我們已經打了招呼，讓我們創建一些更具互動性的東西——一個簡單的表單。

local orbit = require "orbit"

local app = orbit.new()

function app:index(web)
return [[
<html>
<body>
<form method="POST" action="/greet">
<input type="text" name="name" placeholder="輸入你的名字">
<input type="submit" value="問候我！">
</form>
</body>
</html>
]]
end

function app:greet(web, params)
return string.format("Hello, %s! 高興見到你！", params.name or "匿名")
end

app:dispatch_get("/", "index")
app:dispatch_post("/greet", "greet")

app:run()

這個腚本做了幾件事：

我們在index函數中創建了一個表單，要求輸入名字。
我們定義了一個greet函數，用以回應表單提交。
我們使用dispatch_get和dispatch_post來將請求路由到相應的函數。

嘗試運行這個腚本並提交表單。這就像魔法一樣，不是嗎？

WSAPI

WSAPI（Web伺服器API）就像劇院製作中的後台工作人員——它在幕後工作，讓一切運行順利。它為網頁伺服器和Lua網頁應用程序之間提供了一個標準接口。

以下是一個簡單的WSAPI應用程序：

local function hello_app(wsapi_env)
local headers = { ["Content-type"] = "text/html" }

local function hello_content()
coroutine.yield("<html><body>")
coroutine.yield("<h1>Hello, WSAPI World!</h1>")
coroutine.yield("</body></html>")
end

return 200, headers, coroutine.wrap(hello_content)
end

return hello_app

這個腚本：

定義了一個函數，返回HTTP狀態、頭部和內容。
使用協程以塊的形式產生內容，對於較大的響應更有效率。

要運行這個腚本，你通常會使用像Xavante這樣的WSAPI兼容伺服器。

Xavante

提到Xavante，它是一個用Lua編寫的網頁伺服器，可以與WSAPI無縫工作。把它當作你的本地開發伺服器——非常適合測試你的Lua網頁應用程序。

以下是如何使用Xavante運行我們的WSAPI應用的方法：

local xavante = require "xavante"
local wsapi = require "wsapi.xavante"

xavante.HTTP{
server = {host = "localhost", port = 8080},
defaultHost = {
rules = {
{match = "/*", with = wsapi.run_app(hello_app)}
}
}
}

xavante.start()

這個腚本：

設置Xavante在localhost:8080上聆聽。
配置它運行我們的hello_app對所有URL。
開始伺服器。

Lua網頁組件

隨著你的網頁應用程序成長，你會想要將它們分解成可重用的組件。Lua的靈活性使這變得容易。以下是一個簡單的例子：

local function create_header(title)
return string.format([[
<header>
<h1>%s</h1>
<nav>
<a href="/">首頁</a>
<a href="/about">關於</a>
<a href="/contact">聯繫</a>
</nav>
</header>
]], title)
end

local function create_footer()
return [[
<footer>
<p>&copy; 2023 我的超棒Lua網站</p>
</footer>
]]
end

local function create_page(title, content)
return string.format([[
<html>
<body>
%s
<main>%s</main>
%s
</body>
</html>
]], create_header(title), content, create_footer())
end

-- 在Orbit應用程序中的使用
function app:index(web)
return create_page("歡迎", "<p>歡迎來到我的Lua網頁應用程序！</p>")
end

這種方法可以讓你在整個網站上創建有一致的佈局，並最小化重複。

結語

恭喜！你已經踏出了進入Lua網頁程式設計世界的第一步。我們已經介紹了Orbit和WSAPI框架的基本知識，學習了Xavante伺服器，甚至還涉獵了創建可重用組件。

記住，就像學習任何新技能一樣，網頁開發需要練習。如果事情不立即生效，不要氣餒。持續實驗，在開發環境中打破事物（當然！），並且最重要的是，玩得開心！

正如我們在編程世界中說的那樣：願你的代碼無bug，你的網頁應用程序如閃電般快速！

Credits: Image by storyset