Это уже было включено в репозиторий, однако оно было обновлено для проверки скрипта.

Использование HTML-кода

HTMX содержит все ваши любимые ключевые слова, добавленные с помощью hx-.

# General format is hx-[verb]hx-get        # HTTP GEThx-post       # HTTP POSThx-put        # HTTP PUThx-patch      # HTTP PATCHhx-delete     # HTTP DELETEhx-swap       # update content of an elementhx-target     # specify element to affecthx-trigger    # action that executes function

Есть и другие, однако в этом проекте использованы следующие.

Для простого теста в ./internal/views/comComponents/logo.templ внутри открывающего тега \\\"Добавление мы добавим hx-get=\\\"/\\\" и hx-trigger=\\\"click \\\".

Откройте терминал и запустите:

templ generatego run ./cmd/server/main.go

Теперь зайдите в браузер и перейдите на localhost:[ВАШ ПОРТ]/. Нажмите на Суслика, и вы увидите… ну, это произошло так быстро, что вы, наверное, не заметили. Это нормально. Откройте инструменты разработчика и перейдите на вкладку «Инспектор». Нажмите на суслика еще раз. Вы должны заметить обновление HTML-кода на вкладке инспектора.

HX-ОБМЕН

Это основа HTMX. Это то, что дает нам тот адаптивный UI/UX, который мы ищем. Теперь, hx-swap, хотя и прост по названию, требует тщательного рассмотрения его местоположения. Я имею в виду, что не следует размещать его там, где он будет мешать другим элементам.
Пример:

 // container     // end actor
Размещение всех элементов управления на кнопке приведет к удалению всего и предотвращению отображения кнопки для обновления. Однако, если мы перенесем часть работы в контейнер:
 // container    
  •          // end actor    
    • Теперь, когда мы нажимаем кнопку, изменяются только данные ВНУТРИ контейнера, за исключением того, что теперь существует кнопка для дальнейшего редактирования.
          Приложение
    Я останавливаюсь здесь по двум (2) причинам.
    Во-первых, вы можете использовать HTMLX и настроить свой сайт таким, какой он есть. Во-вторых, мы можем вернуть HTML-код с помощью http.Reponse. В расширении мы также можем передавать компоненты templ. Вы видите, к чему это идет? 
          Вскоре
    Полная реструктуризация и перенос функциональности в go handlerFunc(). 
    \\\"Adding
                                                ","image":"http://www.luping.net/uploads/20241005/17281148536700f0a57a72a.png","datePublished":"2024-11-07T13:21:30+08:00","dateModified":"2024-11-07T13:21:30+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
  

  
    
    
    
    
  
    
    
    
      
    
        «Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»      
    
      
    
    
    
  
    
  
    
    
    
      
    
        
        
      
    
      
    
        
    
          Онлайн-инструменты
        
    
        
    
          Учебник по программному обеспечению
        
    
        
    
          Навигация по сайту
        
    
        
    
          программирование
        
    
      
    
      
    
    
  
    

    



    
    
    
    
      
    
        
        титульная страница > программирование > Добавление HTMX в GO
      
    
      
    
        
    
          
    
            
    
              
    Добавление HTMX в GO
    
              
    
                
    
                  Опубликовано 7 ноября 2024 г.                
    
                
    
                  
                  Просматривать:485
                 
                
    
                
                
                
                
                
                
                
                
              
    
            
    
            
    
            
    
              
              
    HTMX является преемником intercooler.js, поскольку используется для расширения HTML с помощью HTTP-команд без необходимости написания API. Я знаю, что вначале я сказал, что удаляю уровни абстракции, однако я больше программист систем/инструментов, поэтому мне все еще нужны некоторые абстракции, пока я не пойму, что на самом деле происходит под ними.
    


    
  
  
  Основная концепция

    


    HTMX использует команды AJAX для изменения элемента. Это похоже на то, как работает ReactJs. ReactJs позволяет обновлять контент, а HTMX выполняет это для HTML. 
    


    
  
  
  Импортировать HTML-код

    


    К элементу ./internal/views/layout.templ 
     добавляется простой один лайнер.
    



    Это уже было включено в репозиторий, однако оно было обновлено для проверки скрипта.
    

    
  
  
  Использование HTML-кода

    


    HTMX содержит все ваши любимые ключевые слова, добавленные с помощью hx-.
    

    


    # General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

    




    Есть и другие, однако в этом проекте использованы следующие.
    


    Для простого теста в ./internal/views/comComponents/logo.templ внутри открывающего тега Добавление HTMX в GO мы добавим hx-get="/" и hx-trigger="click ".
    


    Откройте терминал и запустите:
    

    


    templ generate
go run ./cmd/server/main.go

    




    Теперь зайдите в браузер и перейдите на localhost:[ВАШ ПОРТ]/. Нажмите на Суслика, и вы увидите… ну, это произошло так быстро, что вы, наверное, не заметили. Это нормально. Откройте инструменты разработчика и перейдите на вкладку «Инспектор». Нажмите на суслика еще раз. Вы должны заметить обновление HTML-кода на вкладке инспектора. 
    


    
  
  
  HX-ОБМЕН

    


    Это основа HTMX. Это то, что дает нам тот адаптивный UI/UX, который мы ищем. Теперь, hx-swap, хотя и прост по названию, требует тщательного рассмотрения его местоположения. Я имею в виду, что не следует размещать его там, где он будет мешать другим элементам.
    
Пример:
    

    


     // container
     // end actor

    // end-container

    




    Размещение всех элементов управления на кнопке приведет к удалению всего и предотвращению отображения кнопки для обновления. Однако, если мы перенесем часть работы в контейнер:
    

    


     // container
    
  • 
         // end actor
    
    • 

    // end-container

    




    Теперь, когда мы нажимаем кнопку, изменяются только данные ВНУТРИ контейнера, за исключением того, что теперь существует кнопка для дальнейшего редактирования.
    


    
  
  
  Приложение

    


    Я останавливаюсь здесь по двум (2) причинам.
    
Во-первых, вы можете использовать HTMLX и настроить свой сайт таким, какой он есть. Во-вторых, мы можем вернуть HTML-код с помощью http.Reponse. В расширении мы также можем передавать компоненты templ. Вы видите, к чему это идет? 
    


    
  
  
  Вскоре

    


    Полная реструктуризация и перенос функциональности в go handlerFunc(). 
    


    Adding HTMX to GO
    


          

            
  

            
                    
    
            
            
    
                        
    
              Заявление о выпуске
              
                Эта статья воспроизведена по адресу: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1. Если есть какие-либо нарушения, свяжитесь с [email protected], чтобы удалить ее.               
              
            
    
                      
    
          
    
          
    
            
    
              Последний учебник
              Более>
            
    
            
          
    
        
    
        
    
          
    
            
    
              КлассификацияБолее>
            
    
            
    
                            изучать японский
                            учить корейский
                            учить китайский
                            учить иностранный язык
                            игра
                            Общая проблема
                            Технологическая периферия
                            ИИ
                            Учебник по программному обеспечению
                            программирование
                            статья
                          
    
          
    
          
    
            
    
              
    Изучайте китайский
    
            
    
            
          
    
          
    
            
    
              инструментБолее>
            
    
            
    
                            
                
                
    
                  
    Декодирование изображения в формате base64
    
                
    
                  
                            
                
                
    
                  
    Китайский Пиньинь
    
                
    
                  
                            
                
                
    
                  
    Кодировка Юникод
    
                
    
                  
                            
                
                
    
                  
    JS-обфускация, шифрование, сжатие
    
                
    
                  
                            
                
                
    
                  
    Инструмент шестнадцатеричного шифрования URL-адресов
    
                
    
                  
                            
                
                
    
                  
    Инструмент преобразования кодировки UTF-8
    
                
    
                  
                            
                
                
    
                  
    Онлайн-инструменты кодирования и декодирования Ascii
    
                
    
                  
                            
                
                
    
                  
    Инструмент шифрования MD5
    
                
    
                  
                            
                
                
    
                  
    Онлайн-инструмент для шифрования и дешифрования хеша/хеш-текста
    
                
    
                  
                            
                
                
    
                  
    Онлайн-шифрование SHA
    
                
    
                  
                          
    
          
    
          
    
        
    
      
    
    
    
    
    
    
    
    
    
        
    Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected].
          Мы сделаем это за вас как можно скорее.
    
        
    Copyright© 2022 湘ICP备2022001581号-3