ascii art generator
1.0.0
Dies ist ein ASCII-Grafikgenerator aus Text mit Htmx und Spring Boot. Mit dieser Anwendung können Sie ASCII-Grafiken aus Text generieren. Die Anwendung wird mit Spring Boot und Htmx erstellt. Die Anwendung verwendet Htmx, um die Anwendung interaktiv zu machen, und Spring Boot, um die Anwendung bereitzustellen.
Willkommen, liebe Entwicklerkollegen, zu einer Reise in die faszinierende Welt der Webentwicklung, auf der wir mit der Entwicklung von etwas wirklich Fesselndem beginnen werden – unserem ganz eigenen ASCII-Kunstgenerator! Stellen Sie sich Folgendes vor: Nehmen Sie gewöhnlichen Text und verwandeln Sie ihn in fesselnde visuelle Kunst. Aufregend, oder? In diesem Artikel tauchen wir in die kollaborative Magie von HTMX und Spring Boot ein, um diese Vision Wirklichkeit werden zu lassen.
HTMX ist wie der Zauberstab der modernen Webentwicklung und bekannt für seine Einfachheit und seinen benutzerfreundlichen Ansatz. Es verbindet Front-End und Back-End nahtlos und ist damit der perfekte Begleiter für die Gestaltung interaktiver Erlebnisse. Kombinieren Sie dies nun mit der Robustheit des Spring Boot-Frameworks, und Sie haben eine leistungsstarke Kombination, die Ihrer Kreativität freien Lauf lässt. Weitere Informationen zu HTMX finden Sie unter https://htmx.org/.
Unser Hauptziel? Erstellen eines ASCII-Grafikgenerators, der Klartext einen Hauch von Flair verleiht. Stellen Sie sich vor, Sie geben Ihr Lieblingszitat oder eine einfache Nachricht ein und beobachten, wie sich daraus ein visuell beeindruckendes Stück ASCII-Kunstwerk verwandelt. Es geht nicht nur ums Codieren – es geht darum, ein Erlebnis zu schaffen, das dem Benutzer Freude und Kreativität bringt.
Im Laufe dieser Erkundung werden wir die Feinheiten dieser dynamischen Zusammenarbeit aufdecken. Wir schließen die Lücke zwischen dem Server und dem Browser und zeigen, wie diese Technologien Hand in Hand arbeiten, um eine einzigartige und interaktive Webanwendung zu erstellen. Wir werden uns darauf konzentrieren, den Prozess zugänglich, angenehm und vor allem benutzerfreundlich zu gestalten.
Also, fangen wir an! Gehen wir zu start.spring.io und konfigurieren das Projekt wie unten gezeigt:
Wir werden für dieses Projekt Java 17 verwenden. Die Abhängigkeiten, die wir hier verwenden, sind:
**Spring Web: **Es stellt wesentliche Komponenten wie Controller, DispatcherServlet und View Resolver bereit und erleichtert die Organisation der HTTP-Anforderungsverarbeitung und die Implementierung der Model-View-Controller (MVC)-Architektur.
Thymeleaf : Thymeleaf, eine serverseitige Java-Template-Engine, ist eine wichtige Abhängigkeit, die häufig mit der Webentwicklung von Spring Boot verbunden ist. Als Ansichtsvorlagen-Engine ermöglicht Thymeleaf Entwicklern die Erstellung dynamischer und interaktiver Webseiten durch die direkte Einbettung ausdrucksstarker Konstrukte in HTML-Vorlagen.
Wir werden eine Bibliothek namens Banana verwenden, ein FIGlet-Dienstprogramm für Java, das Textbanner in verschiedenen Schriftarten generiert, die aus Buchstaben bestehen, die aus Ansammlungen kleinerer ASCII-Zeichen bestehen. Sie können es sich hier ansehen: https://github.com/yihleego/banana
Lassen Sie uns nun das Projekt in der IDE Ihrer Wahl öffnen. Ich werde Intellij Idea verwenden.
Fügen Sie die Abhängigkeit der Banana-Bibliothek auch zu Ihrer pom.xml hinzu.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
Beginnen wir nun mit der Codierung der Anwendung. Bitte verwenden Sie die untenstehende Ordnerstruktur als Referenz
Ich habe die UI-Vorlage im Vorlagenverzeichnis erstellt, die ungefähr so aussieht (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 >Diese Datei stellt die Webseite für einen ASCII-Art-Generator dar und enthält das Tailwind-CSS-Framework für das Styling und die HTMX-Bibliothek für eine nahtlose Interaktion zwischen Front-End und Back-End. Lassen Sie uns die wichtigsten Komponenten und Funktionen des Codes aufschlüsseln:
Das Tailwind-CSS-Stylesheet ist zu Gestaltungszwecken von einem CDN aus verlinkt.
Die HTMX-Bibliothek ist mit einem CDN verknüpft. HTMX wird verwendet, um dynamische Anfragen zu stellen und den Seiteninhalt zu aktualisieren, ohne dass die gesamte Seite neu geladen werden muss.
Wir verwenden hier mehrere HTMX-Tags, beginnend von oben
hx-get : Das hx-get-Attribut gibt eine URL (/api/fonts) an, um eine HTTP-GET-Anfrage zu stellen, wenn das angegebene hx-trigger-Ereignis auftritt.
hx-trigger : Dieser hx-trigger="load" gibt an, dass die GET-Anfrage beim Laden der Seite ausgelöst werden soll.
hx-target : Thehx-target="#font-select" bezeichnet das HTML-Element mit der ID „font-select“ als Ziel für die Aktualisierung mit der Antwort der GET-Anfrage. In diesem Fall werden Schriftartoptionen dynamisch in ein Dropdown-Menü geladen.
hx-post : Das hx-post-Attribut gibt eine URL (/api/ascii-art) an, um eine HTTP-POST-Anfrage zu stellen, wenn auf die Schaltfläche geklickt wird.
hx-swap : hx-swap="outerHTML" gibt an, dass der gesamte Inhalt des Zielelements durch die Antwort der POST-Anfrage ersetzt werden soll.
Dies sind die Tags, die wir hier verwendet haben. Darüber hinaus verwenden wir die folgenden JavaScript-Funktionen, um das Seitenverhalten zu ändern
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 )
}Diese Funktion ist für das Kopieren des Textinhalts der ASCII-Grafik in die Zwischenablage verantwortlich.
Es erstellt ein neues textarea , setzt seinen Wert auf den Textinhalt des #ascii-art Elements, hängt den textarea an den Dokumentkörper an, wählt den Inhalt aus, führt den Befehl „Kopieren“ aus, protokolliert eine Nachricht in der Konsole und entfernt den textarea aus dem Dokumentkörper.
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 )
}Diese Funktion ist für die Generierung einer herunterladbaren Datei verantwortlich, die die ASCII-Grafik enthält.
Es ruft den Textinhalt des #ascii-art Elements ab, erstellt einen Blob (binäres großes Objekt), das den Text enthält, erstellt einen Link ( <a> ) mit einer URL, die auf den Blob verweist, und setzt das Download-Attribut auf „ascii_art.txt“. ', hängt den Link an den Dokumenttext an, löst einen Klick auf den Link aus und entfernt den Link aus dem Dokumenttext.
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'
}Diese Funktion passt die Sichtbarkeit der Schaltflächen zum Kopieren und Herunterladen basierend auf dem Inhalt der ASCII-Grafik dynamisch an.
Es prüft, ob der beschnittene Textinhalt des #ascii-art Elements nicht leer ist. Wenn dies der Fall ist, werden die Schaltflächen so eingestellt, dass sie angezeigt werden ( 'inline-block' ), andernfalls werden sie ausgeblendet ( 'none' ).
Jetzt haben wir die Benutzeroberfläche bereit, die wir zum Erstellen der APIs /api/ascii-art und /api/fonts benötigen. Wir verwenden hierfür den PageController wie folgt:
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>" ;
}
}Sicherlich! Lassen Sie uns die Funktionalität beider APIs aufschlüsseln, die im bereitgestellten Java-Code definiert sind:
/api/fonts: Diese API wird aufgerufen, um eine Liste von Schriftartoptionen bereitzustellen, die im ASCII-Grafikgenerator verwendet werden können. Es ruft eine Liste von Schriftartnamen aus der Font- Enumeration ab, die Teil der Banana-Bibliothek ist. Mithilfe der Java Stream API ordnet es jeden Schriftartnamen einem HTML- <option> -Element zu und hängt sie an einen StringBuilder an. Die Methode gibt die Verkettung dieser <option> -Elemente als eine einzelne HTML-Zeichenfolge zurück.
/api/ascii-art: Diese API verwendet Benutzereingabetext und die ausgewählte Schriftart als Parameter und generiert entsprechend ASCII-Grafik. Anschließend wird die Methode BanaUtils.bananaify verwendet, um ASCII-Grafiken basierend auf dem Eingabetext und der ausgewählten Schriftart zu generieren. Die generierte ASCII-Grafik wird in ein <pre> -HTML-Tag eingeschlossen.
Da wir nun den Code haben, können wir die Anwendung ausführen. Sobald die Anwendung gestartet ist, können Sie zu http://localhost:8080/ gehen und die Anwendung ausprobieren.
Sie können den vollständigen Quellcode der Anwendung hier überprüfen? GitHub - MaheshBabu11/ascii-art-generator: Dies ist ein ASCII-Kunstgenerator aus Text unter Verwendung von Htmx und…
Außerdem wird es beim Rendern bereitgestellt, wenn Sie es ausprobieren möchten: https://ascii-art-generator.maheshbabu11.dev/
In diesem Artikel haben wir einen ASCII-Grafikgenerator mit HTMX und Spring Boot erstellt. HTMX macht unsere Webseiten interaktiver und Spring Boot bietet ein robustes Backend. Damit haben wir ein Tool geschaffen, mit dem Benutzer Text eingeben, Schriftarten auswählen und sofort ASCII-Grafiken erstellen können. Dieses Projekt zeigt die Einfachheit und Leistungsfähigkeit der Kombination von HTMX und Spring Boot für dynamische und ansprechende Webanwendungen.
Viel Spaß beim Codieren ?!!! Hinterlassen Sie ein ? wenn es Ihnen Spaß gemacht hat, es zu lesen.
