หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เครื่องกำเนิดศิลปะ ASCII

นี่คือตัวสร้างงานศิลปะ ASCII จากข้อความโดยใช้ htmx และ spring boot แอปพลิเคชันนี้สามารถใช้สร้างงานศิลปะ ASCII จากข้อความได้ แอปพลิเคชันนี้สร้างขึ้นโดยใช้ spring boot และ htmx แอปพลิเคชันใช้ htmx เพื่อทำให้แอปพลิเคชันโต้ตอบและบูตสปริงเพื่อให้บริการแอปพลิเคชัน

บทความอธิบายบริบทของการสมัคร

เชื่อมช่องว่าง: การพัฒนาสแต็กเต็มรูปแบบด้วย HTMX และ Spring Boot Showcase

ยินดีต้อนรับเพื่อนนักพัฒนา สู่การเดินทางสู่โลกแห่งการพัฒนาเว็บอันน่าทึ่ง ที่ซึ่งเรากำลังจะเริ่มสร้างสรรค์สิ่งที่น่าดึงดูดใจอย่างแท้จริง — เครื่องกำเนิดงานศิลปะ ASCII ของเราเอง! ลองนึกภาพสิ่งนี้: นำข้อความธรรมดามาแปลงเป็นทัศนศิลป์ที่น่าดึงดูด น่าตื่นเต้นใช่มั้ย? ในบทความนี้ เราจะเจาะลึกถึงความมหัศจรรย์ของการทำงานร่วมกันของ HTMX และ Spring Boot เพื่อทำให้วิสัยทัศน์นี้เป็นจริง

HTMX เปรียบเสมือนไม้กายสิทธิ์ของตัวช่วยในการพัฒนาเว็บไซต์สมัยใหม่ ซึ่งขึ้นชื่อในด้านความเรียบง่ายและวิธีการที่ใช้งานง่าย มันเชื่อมต่อส่วนหน้าและส่วนหลังได้อย่างราบรื่น ทำให้เป็นคู่หูที่สมบูรณ์แบบสำหรับการสร้างประสบการณ์เชิงโต้ตอบ ตอนนี้ ให้จับคู่สิ่งนั้นกับความแข็งแกร่งของเฟรมเวิร์ก Spring Boot แล้วคุณก็จะได้การผสมผสานอันทรงพลังที่พร้อมจะปลดปล่อยความคิดสร้างสรรค์ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HTMX คุณสามารถดูได้ที่ https://htmx.org/

เป้าหมายหลักของเรา? เพื่อสร้างเครื่องกำเนิดงานศิลปะ ASCII ที่เพิ่มความเก๋ไก๋ให้กับข้อความธรรมดา ลองนึกภาพการพิมพ์คำพูดที่คุณชื่นชอบหรือข้อความง่ายๆ แล้วดูมันแปลงร่างเป็นงานศิลปะ ASCII ที่สวยงามตระการตา ไม่ใช่แค่การเขียนโค้ดเท่านั้น แต่ยังเป็นการสร้างประสบการณ์ที่นำความสุขและความคิดสร้างสรรค์มาสู่ผู้ใช้อีกด้วย

ตลอดการสำรวจนี้ เราจะค้นพบความซับซ้อนของการทำงานร่วมกันแบบไดนามิกนี้ เราจะเชื่อมช่องว่างระหว่างเซิร์ฟเวอร์และเบราว์เซอร์ สาธิตวิธีการทำงานของเทคโนโลยีเหล่านี้ควบคู่กันไปเพื่อสร้างแอปพลิเคชันเว็บแบบโต้ตอบที่มีเอกลักษณ์เฉพาะตัว เราจะมุ่งเน้นที่การทำให้กระบวนการเข้าถึงได้ สนุกสนาน และที่สำคัญที่สุดคือเป็นมิตรกับผู้ใช้

เอาล่ะ มาเริ่มกันเลย! ให้เราไปที่ start.spring.io และกำหนดค่าโปรเจ็กต์ดังที่แสดงด้านล่าง:

เราจะใช้ Java 17 สำหรับโปรเจ็กต์นี้ การพึ่งพาที่เราใช้ที่นี่คือ:

**Spring Web: **มีส่วนประกอบที่สำคัญ เช่น ตัวควบคุม, DispatcherServlet และ View Resolver ซึ่งอำนวยความสะดวกในการจัดการคำขอ HTTP และการใช้งานสถาปัตยกรรม model-view-controller (MVC)

Thymeleaf : Thymeleaf ซึ่งเป็นเอ็นจิ้นเทมเพลต Java ฝั่งเซิร์ฟเวอร์ เป็นการพึ่งพาคีย์ที่มักจะควบคู่ไปกับการพัฒนาเว็บของ Spring Boot Thymeleaf ทำหน้าที่เป็นกลไกแสดงเทมเพลตมุมมอง ช่วยให้นักพัฒนาสามารถสร้างหน้าเว็บแบบไดนามิกและโต้ตอบได้โดยการฝังโครงสร้างที่แสดงออกโดยตรงภายในเทมเพลต HTML

เราจะใช้ไลบรารีชื่อ Banana ซึ่งเป็นยูทิลิตี้ FIGlet สำหรับ Java ที่สร้างแบนเนอร์ข้อความในรูปแบบแบบอักษรที่หลากหลาย ประกอบด้วยตัวอักษรที่ประกอบด้วยการรวมกลุ่มของอักขระ 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 Art Generator ซึ่งผสมผสานเฟรมเวิร์ก Tailwind CSS สำหรับการจัดรูปแบบและไลบรารี HTMX เพื่อการโต้ตอบที่ราบรื่นระหว่างส่วนหน้าและส่วนหลัง เรามาดูรายละเอียดส่วนประกอบหลักและฟังก์ชันการทำงานของโค้ดกันดีกว่า:

  • สไตล์ชีต CSS ของ Tailwind ลิงก์จาก CDN เพื่อจุดประสงค์ด้านการจัดรูปแบบ

  • ไลบรารี HTMX เชื่อมโยงกับ CDN HTMX ใช้สำหรับส่งคำขอแบบไดนามิกและอัปเดตเนื้อหาของหน้าโดยไม่ต้องโหลดทั้งหน้าซ้ำ

เรากำลังใช้แท็ก HTMX หลายแท็กที่นี่โดยเริ่มจากด้านบน

  1. hx-get : แอตทริบิวต์ hx-get ระบุ URL (/api/fonts) เพื่อสร้างคำขอ HTTP GET เมื่อเกิดเหตุการณ์ที่ระบุ hx-trigger

  2. hx-trigger : hx-trigger="load" นี้บ่งชี้ว่าคำขอ GET ควรถูกทริกเกอร์เมื่อโหลดหน้าเว็บ

  3. hx-target : Thehx-target="#font-select" กำหนดองค์ประกอบ HTML ด้วย ID font-select เป็นเป้าหมายสำหรับการอัปเดตด้วยการตอบกลับจากคำขอ GET ในกรณีนี้ จะโหลดตัวเลือกแบบอักษรแบบไดนามิกลงในเมนูแบบเลื่อนลง

  4. hx-post : แอตทริบิวต์ hx-post ระบุ URL (/api/ascii-art) เพื่อสร้างคำขอ HTTP POST เมื่อมีการคลิกปุ่ม

  5. hx-swap : hx-swap="outerHTML" บ่งชี้ว่าเนื้อหาทั้งหมดขององค์ประกอบเป้าหมายควรถูกแทนที่ด้วยการตอบสนองจากคำขอ POST

แท็กเหล่านี้คือแท็กที่เราใช้ที่นี่ นอกเหนือจากที่เราใช้ฟังก์ชัน JavaScript ด้านล่างเพื่อแก้ไขพฤติกรรมของเพจ

  1. ฟังก์ชั่น copyToClipboard : 
 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 เข้ากับเนื้อหาของเอกสาร เลือกเนื้อหา ดำเนินการคำสั่ง 'copy' บันทึกข้อความไปยังคอนโซล และลบออก textarea จากเนื้อหาเอกสาร

  1. ดาวน์โหลดไฟล์ ฟังก์ชัน: 
 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 (วัตถุไบนารีขนาดใหญ่) ที่มีข้อความ สร้างลิงก์ ( <a> ) พร้อม URL ที่ชี้ไปที่ Blob ตั้งค่าแอตทริบิวต์การดาวน์โหลดเป็น 'ascii_art.txt ' เพิ่มลิงก์ต่อท้ายเนื้อหาเอกสาร ทำให้เกิดการคลิกลิงก์ และลบลิงก์ออกจากเนื้อหาเอกสาร

  1. ฟังก์ชั่น adjustButtonVisibility : 
 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 พร้อมแล้ว เราจำเป็นต้องสร้าง APIs /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>" ;
    }

}

แน่นอน! มาดูรายละเอียดการทำงานของ API ทั้งสองที่กำหนดไว้ในโค้ด Java ที่ให้มา:

  1. /api/fonts : API นี้ถูกเรียกเพื่อให้รายการตัวเลือกแบบอักษรที่สามารถใช้ในเครื่องสร้างงานศิลปะ ASCII โดยดึงรายการชื่อแบบอักษรจาก Font enum ซึ่งเป็นส่วนหนึ่งของไลบรารี Banana การใช้ Java Stream API จะจับคู่ชื่อแบบอักษรแต่ละชื่อกับองค์ประกอบ HTML <option> และผนวกเข้ากับ StringBuilder วิธีการส่งกลับการต่อข้อมูลขององค์ประกอบ <option> เหล่านี้เป็นสตริง HTML เดียว

  2. /api/ascii-art : API นี้รับข้อความที่ผู้ใช้ป้อนและแบบอักษรที่เลือกเป็นพารามิเตอร์ และสร้างภาพ ASCII ตามนั้น ใช้วิธี BanaUtils.bananaify จากนั้นใช้เพื่อสร้างงานศิลปะ ASCII ตามข้อความอินพุตและแบบอักษรที่เลือก ศิลปะ ASCII ที่สร้างขึ้นถูกห่อไว้ในแท็ก <pre> HTML

ตอนนี้เรามีโค้ดแล้ว มาเรียกใช้แอปพลิเคชันกัน เมื่อแอปพลิเคชันเริ่มต้นแล้ว คุณสามารถไปที่ http://localhost:8080/ และลองใช้แอปพลิเคชัน

คุณสามารถตรวจสอบซอร์สโค้ดแบบเต็มของแอปพลิเคชันได้ที่นี่ ? GitHub - MaheshBabu11/ascii-art-generator: นี่คือตัวสร้างงานศิลปะ ASCII จากข้อความที่ใช้ htmx และ...

นอกจากนี้ยังใช้งานกับการเรนเดอร์หากคุณต้องการลองใช้ https://ascii-art-generator.maheshbabu11.dev/

ในบทความนี้ เราได้สร้างเครื่องสร้างงานศิลปะ ASCII โดยใช้ HTMX และ Spring Boot HTMX ทำให้หน้าเว็บของเรามีการโต้ตอบกันมากขึ้น และ Spring Boot ก็มอบแบ็กเอนด์ที่แข็งแกร่ง ด้วยสิ่งเหล่านี้ เราได้สร้างเครื่องมือที่ผู้ใช้สามารถป้อนข้อความ เลือกแบบอักษร และสร้างงานศิลปะ ASCII ได้ทันที โปรเจ็กต์นี้แสดงให้เห็นถึงความเรียบง่ายและพลังของการผสาน HTMX และ Spring Boot สำหรับเว็บแอปพลิเคชันแบบไดนามิกและน่าดึงดูด

ขอให้มีความสุขในการเขียนโค้ด ?!!! ทิ้ง ? ถ้าคุณสนุกกับการอ่านมัน

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด