ascii art generator
1.0.0
這是一個使用 htmx 和 spring boot 的文字 ascii 藝術生成器。該應用程式可用於從文字生成 ascii 藝術作品。該應用程式是使用 spring boot 和 htmx 建構的。該應用程式使用htmx使應用程式具有互動性並使用spring boot來為應用程式提供服務。
歡迎各位開發人員來到 Web 開發的迷人世界，在這裡我們將開始創造一些真正引人入勝的東西——我們自己的 ASCII 藝術生成器！想像一下：將普通文本轉化為迷人的視覺藝術。令人興奮，對吧？在本文中，我們將深入探討 HTMX 和 Spring Boot 的協作魔力，以使這個願景成為現實。
HTMX 就像現代 Web 開發的巫師魔杖，以其簡單性和用戶友好的方法而聞名。它無縫連接前端和後端，使其成為打造互動體驗的完美伴侶。現在，將其與 Spring Boot 框架的穩健性相結合，您就擁有了一個強大的組合，可以隨時釋放創造力。要了解有關 HTMX 的更多信息，您可以查看 https://htmx.org/
我們的主要目標？建立一個 ASCII 藝術生成器，為純文字添加一絲風格。想像一下，輸入您最喜歡的引言或簡單的訊息，然後看著它轉變成視覺上令人驚嘆的 ASCII 藝術作品。這不僅僅是編碼，而是創造一種為用戶帶來歡樂和創造力的體驗。
在整個探索過程中，我們將揭示這種動態協作的複雜性。我們將彌合伺服器和瀏覽器之間的差距，展示這些技術如何協同工作來創建獨特的互動式 Web 應用程式。我們將專注於讓這個過程變得容易、愉快，最重要的是，對使用者友善。
那麼，就讓我們開始吧！讓我們前往 start.spring.io 並配置項目，如下所示：
我們將在這個專案中使用 Java 17。我們在這裡使用的依賴項是：
**Spring Web：**它提供了控制器、DispatcherServlet 和 View Resolver 等基本元件，有助於組織 HTTP 請求處理和模型-視圖-控制器 (MVC) 架構的實作。
Thymeleaf ：Thymeleaf 是一個伺服器端 Java 範本引擎，是 Spring Boot 的 Web 開發經常耦合的關鍵依賴。作為視圖模板引擎，Thymeleaf 使開發人員能夠透過直接在 HTML 範本中嵌入表達結構來建立動態和互動式網頁。
我們將使用一個名為Banana的庫，它是 Java 的 Figlet 實用程序，可以產生各種字體的文字橫幅，由較小的 ASCII 字元組合而成的字母組成。您可以在這裡查看：https://github.com/yihleego/banana
現在讓我們在您選擇的 IDE 中開啟專案。我將使用 Intellij Idea。
將 Banana 庫依賴項新增至您的 pom.xml 中。
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
現在讓我們開始編寫應用程式的程式碼。請使用以下資料夾結構作為參考
我已經在模板目錄中建立了 UI 模板，看起來像這樣（index.html）
<!doctype html >
< html lang =" en " >
< head >
< title > ASCII Art Generator </ title >
< link
href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css "
rel =" stylesheet "
/>
< script
src =" https://unpkg.com/[email protected] "
integrity =" sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC "
crossorigin =" anonymous "
> </ script >
</ head >
< body class =" bg-gray-100 " >
< div class =" container mx-auto p-8 " >
< h1 class =" mb-8 text-center text-4xl font-bold " > ASCII Art Generator </ h1 >
< div class =" mb-6 flex justify-center " >
< form id =" input-form " class =" text-center " >
< label for =" input-text " class =" mb-2 block " > Enter Text: </ label >
< input
type =" text "
id =" input-text "
name =" input-text "
required
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
/>
< br />
< label for =" font-select " class =" mb-2 mt-4 block " > Select Font: </ label >
< select
id =" font-select "
name =" font-select "
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
> </ select >
< div hx-get =" /api/fonts " hx-trigger =" load " hx-target =" #font-select " > </ div >
< br />
< button
class =" mt-6 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
hx-post =" /api/ascii-art "
hx-target =" #ascii-art "
hx-swap =" outerHTML "
>
Generate ASCII Art
</ button >
</ form >
</ div >
< div class =" mt-10 flex justify-center " >
< pre id =" ascii-art " class =" text-center " > </ pre >
</ div >
< div class =" mt-8 flex justify-center space-x-4 " >
< button
class =" rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
id =" copyButton "
onclick =" copyToClipboard() "
style =" display: none; "
>
Copy
</ button >
< button
class =" rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700 "
id =" downloadButton "
onclick =" downloadFile() "
style =" display: none; "
>
Download
</ button >
</ div >
</ div >
< script >
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}
document . body . addEventListener ( 'htmx:afterSwap' , adjustButtonVisibility )
</ script >
</ body >
</ html >該文件代表 ASCII 藝術生成器的網頁，包含用於樣式化的 Tailwind CSS 框架和用於前端和後端之間無縫交互的 HTMX 庫。讓我們分解一下程式碼的關鍵元件和功能：
Tailwind CSS 樣式表從 CDN 連結以用於樣式設計。
HTMX 庫連結到 CDN。 HTMX 用於發出動態請求並更新頁面內容，而無需重新載入整個頁面。
我們在這裡從頂部開始使用幾個 HTMX 標籤
hx-get ：hx-get 屬性指定一個 URL (/api/fonts)，以便在指定 hx-trigger 的事件發生時發出 HTTP GET 請求。
hx-trigger ：這個 hx-trigger="load" 表示頁面載入時應該觸發 GET 請求。
hx-target ：hx-target="#font-select" 指定 ID 為 font-select 的 HTML 元素作為使用 GET 請求的回應進行更新的目標。在這種情況下，它將字體選項動態載入到下拉清單中。
hx-post ：hx-post 屬性指定在點擊按鈕時發出 HTTP POST 請求的 URL (/api/ascii-art)。
hx-swap ： hx-swap="outerHTML" 表示目標元素的全部內容應替換為 POST 請求的回應。
除了我們使用以下 JavaScript 函數來修改頁面行為之外，我們還使用了這些標籤
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}該函數負責將 ASCII 藝術的文本內容複製到剪貼簿。
它會建立一個新的textarea元素，將其值設為#ascii-art元素的文字內容，將textarea附加到文件正文，選擇內容，執行「複製」命令，將訊息記錄到控制台，然後刪除文檔正文中的textarea 。
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}此函數負責產生包含 ASCII 藝術的可下載檔案。
它檢索#ascii-art元素的文字內容，創建包含文字的Blob （二進位大物件），創建帶有指向 Blob 的 URL 的連結 ( <a> )，將下載屬性設為「ascii_art.txt」 '，將連結附加到文件正文，觸發連結上的單擊，然後從文件正文中刪除連結。
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}此功能根據 ASCII 藝術的內容動態調整複製和下載按鈕的可見性。
它檢查#ascii-art元素的修剪文字內容是否非空。如果是，則將按鈕設為顯示（ 'inline-block' ），否則，將按鈕設為隱藏（ 'none' ）。
現在我們已經準備好了 UI，我們需要建立 API /api/ascii-art 和 /api/fonts 。為此，我們將使用如下所示的 PageController：
package dev . maheshbabu11 . asciiartgenerator ;
import io . leego . banana . BananaUtils ;
import io . leego . banana . Font ;
import org . springframework . web . bind . annotation .*;
import java . util . List ;
@ RestController
@ RequestMapping ( "/api" )
public class PageController {
@ GetMapping ( "/fonts" )
public String getFonts () {
List < String > options = Font . values (). stream (). map ( Font :: getName ). toList ();
StringBuilder optionList = new StringBuilder ();
options . forEach (
option -> {
String optionString = "<option value= " " + option + " " >" + option + "</option>" ;
optionList . append ( optionString );
}
);
return optionList . toString ();
}
@ PostMapping ( "/ascii-art" )
public String asciiArt ( @ RequestParam ( "input-text" ) String inputText ,
@ RequestParam ( "font-select" ) String font ) {
return "<pre id= " ascii-art " >" + BananaUtils . bananaify ( inputText , Font . get ( font )) + "</pre>" ;
}
}當然！讓我們分解一下所提供的 Java 程式碼中定義的兩個 API 的功能：
/api/fonts ：呼叫此 API 是為了提供可在 ASCII 藝術生成器中使用的字體選項清單。它從Font枚舉中檢索字體名稱列表，該枚舉是 Banana 庫的一部分。使用 Java Stream API，它將每個字體名稱對應到 HTML <option>元素並將它們附加到 StringBuilder。此方法將這些<option>元素的串聯傳回為單一 HTML 字串。
/api/ascii-art ：此 API 將使用者輸入的文字和選定的字體作為參數，並相應地產生 ASCII 藝術作品。它使用 BanaUtils.bananaify 方法，然後根據輸入文字和所選字體生成 ASCII 藝術作品。生成的 ASCII 藝術作品包含在<pre> HTML 標記中。
現在我們有了程式碼，讓我們運行該應用程式。應用程式啟動後，您可以訪問 http://localhost:8080/ 並嘗試應用程式。
您可以在此處查看應用程式的完整原始程式碼？ ascii-art-generator,這是一個使用 htmx 和…的文本的 ascii 藝術生成器,下載ascii-art-generator的源碼_GitHub_幫酷
另外，如果您想嘗試一下，它會部署在渲染上 https://ascii-art-generator.maheshbabu11.dev/
在本文中，我們使用 HTMX 和 Spring Boot 建構了一個 ASCII 藝術生成器。 HTMX 讓我們的網頁更具互動性，Spring Boot 提供了強大的後端。有了這些，我們創建了一個工具，使用者可以在其中輸入文字、選擇字體並立即生成 ASCII 藝術作品。該專案展示了將 HTMX 和 Spring Boot 結合起來實現動態且引人入勝的 Web 應用程式的簡單性和強大功能。
快樂編碼？ ！留下一個？如果你喜歡閱讀它。
