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 应用程序的简单性和强大功能。
快乐编码？！！！留下一个？如果你喜欢阅读它。
