• <blockquote id="eytxh"><kbd id="eytxh"><object id="eytxh"></object></kbd></blockquote>
  • <blockquote id="eytxh"><table id="eytxh"></table></blockquote>
    <abbr id="eytxh"><legend id="eytxh"><dfn id="eytxh"></dfn></legend></abbr>
    \n\n\n\n

    Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be bundled in your app.<\/p>\n\n

    We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.
    \n<\/p>\n\n

    \n\n{% extends \"_base.html\" %}\n\n{% block content %}\n
    \n\n\n\n

    We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. <\/p>\n\n

    We're now ready to add some HTMX to the app, to toggle the completion of the item<\/p>\n\n

    \n \n \n Add inline partial templates\n<\/h2>\n\n

    In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on server-driven<\/strong> updates, leveraging hypermedia<\/strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.<\/p>\n\n

    In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.<\/p>\n\n

    To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.
    \n<\/p>\n\n

    ? uv add django-template-partials\nResolved 24 packages in 435ms\nInstalled 1 package in 10ms\n + django-template-partials==24.4\n<\/pre>\n\n\n\n

    按照安裝說(shuō)明,我們應(yīng)該更新我們的settings.py 文件
    \n<\/p>\n\n

    INSTALLED_APPS = [\n    \"django.contrib.admin\",\n    \"django.contrib.auth\",\n    \"django.contrib.contenttypes\",\n    \"django.contrib.sessions\",\n    \"django.contrib.messages\",\n    \"django.contrib.staticfiles\",\n    \"core\",\n    \"template_partials\",  # <-- NEW\n]\n<\/pre>\n\n\n\n

    在我們的任務(wù)模板中,我們將每個(gè)待辦事項(xiàng)定義為內(nèi)聯(lián)部分模板。如果我們重新加載頁(yè)面,它不應(yīng)該有任何視覺(jué)差異。
    \n<\/p>\n\n

    \n\n{% extends \"_base.html\" %}\n{% load partials %} \n\n{% block content %}\n
    \n\n\n\n

    The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.<\/p>\n\n

    With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.<\/p>\n\n

    \n \n \n Toggling todo items on and off with HTMX\n<\/h2>\n\n

    To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.<\/p>\n\n

    First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:
    \n<\/p>\n\n

        \n    
    	
    
    
    
    
    
    
    

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    首頁(yè) 后端開(kāi)發(fā) Python教程 使用 Django 和 HTMX 創(chuàng)建待辦事項(xiàng)應(yīng)用程序 - 創(chuàng)建前端并添加 HTMX 部分

    使用 Django 和 HTMX 創(chuàng)建待辦事項(xiàng)應(yīng)用程序 - 創(chuàng)建前端并添加 HTMX 部分

    Jan 06, 2025 am 12:00 AM

    歡迎來(lái)到我們系列的第三部分!在本系列文章中,我記錄了自己對(duì) HTMX 的學(xué)習(xí),使用 Django 作為后端。
    如果您剛剛接觸該系列,您可能需要先查看第一部分和第二部分。

    創(chuàng)建模板和視圖

    我們將首先創(chuàng)建一個(gè)基本模板和一個(gè)指向索引視圖的索引模板,該索引視圖將列出數(shù)據(jù)庫(kù)中的待辦事項(xiàng)。我們將使用 DaisyUI(Tailwind CSS 的擴(kuò)展)來(lái)使 Todos 看起來(lái)更漂亮。

    這是設(shè)置視圖后、添加 HTMX 之前頁(yè)面的樣子:

    Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

    添加視圖和 URL

    首先,我們需要更新項(xiàng)目根目錄中的 urls.py 文件,以包含我們將在“核心”應(yīng)用程序中定義的 url:

    # todomx/urls.py
    
    from django.contrib import admin
    from django.urls import include, path # <-- NEW
    
    urlpatterns = [
        path("admin/", admin.site.urls),
        path("", include("core.urls")), # <-- NEW
    ]
    

    然后,我們?yōu)閼?yīng)用程序定義新的 URL,添加新文件 core/urls.py:

    # core/urls.py
    
    from django.urls import path
    from . import views
    
    urlpatterns = [
        path("", views.index, name="index"),
        path("tasks/", views.tasks, name="tasks"),
    ]
    

    現(xiàn)在我們可以創(chuàng)建相應(yīng)的視圖了,在core/views.py

    # core/views.py
    
    from django.shortcuts import redirect, render
    from .models import UserProfile, Todo
    from django.contrib.auth.decorators import login_required
    
    
    def index(request):
        return redirect("tasks/")
    
    
    def get_user_todos(user: UserProfile) -> list[Todo]:
        return user.todos.all().order_by("created_at")
    
    
    @login_required
    def tasks(request):
        context = {
            "todos": get_user_todos(request.user),
            "fullname": request.user.get_full_name() or request.user.username,
        }
    
        return render(request, "tasks.html", context)
    
    

    這里有一些有趣的事情:我們的索引路由(主頁(yè))將僅重定向到任務(wù) URL 和視圖。這將使我們能夠在未來(lái)自由地為應(yīng)用程序?qū)崿F(xiàn)某種登陸頁(yè)面。

    任務(wù)視圖需要登錄,并在上下文中返回兩個(gè)屬性:用戶的全名(如果需要的話會(huì)合并到用戶名)和待辦事項(xiàng),按創(chuàng)建日期排序(我們可以在未來(lái))。

    現(xiàn)在讓我們添加模板。我們將為整個(gè)應(yīng)用程序提供一個(gè)基本模板,其中包括 Tailwind CSS 和 DaisyUI,以及任務(wù)視圖的模板。

    <!-- core/templates/_base.html -->
    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
        <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
        {% block header %}
        {% endblock %}
      </head>
      <body>
    
    
    
    <p>Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be  bundled in your app.</p>
    
    <p>We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.<br>
    </p>
    
    <pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->
    
    {% extends "_base.html" %}
    
    {% block content %}
    <div>
    
    
    
    <p>We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. </p>
    
    <p>We're now ready to add some HTMX to the app, to toggle the completion of the item</p>
    
    <h2>
      
      
      Add inline partial templates
    </h2>
    
    <p>In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on <strong>server-driven</strong> updates, leveraging <strong>hypermedia</strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.</p>
    
    <p>In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.</p>
    
    <p>To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.<br>
    </p>
    
    <pre class="brush:php;toolbar:false">? uv add django-template-partials
    Resolved 24 packages in 435ms
    Installed 1 package in 10ms
     + django-template-partials==24.4
    

    按照安裝說(shuō)明,我們應(yīng)該更新我們的settings.py 文件

    INSTALLED_APPS = [
        "django.contrib.admin",
        "django.contrib.auth",
        "django.contrib.contenttypes",
        "django.contrib.sessions",
        "django.contrib.messages",
        "django.contrib.staticfiles",
        "core",
        "template_partials",  # <-- NEW
    ]
    

    在我們的任務(wù)模板中,我們將每個(gè)待辦事項(xiàng)定義為內(nèi)聯(lián)部分模板。如果我們重新加載頁(yè)面,它不應(yīng)該有任何視覺(jué)差異。

    <!-- core/templates/tasks.html -->
    
    {% extends "_base.html" %}
    {% load partials %} <!-- NEW -->
    
    {% block content %}
    <div>
    
    
    
    <p>The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.</p>
    
    <p>With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.</p>
    
    <h2>
      
      
      Toggling todo items on and off with HTMX
    </h2>
    
    <p>To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.</p>
    
    <p>First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:<br>
    </p>
    
    <pre class="brush:php;toolbar:false">    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css"/>
        <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
        <script src="https://unpkg.com/htmx.org@2.0.4" ></script> <!-- NEW -->
        {% block header %}
        {% endblock %}
    
    

    在 core/urls.py 上,我們將添加新路線:

    # core/urls.py
    
    from django.urls import path
    from . import views
    
    urlpatterns = [
        path("", views.index, name="index"),
        path("tasks/", views.tasks, name="tasks"),
        path("tasks/<int:task_id>/", views.toggle_todo, name="toggle_todo"), # <-- NEW
    ]
    

    然后,在core/views.py上,我們添加相應(yīng)的視圖:

    # core/views.py
    
    from django.shortcuts import redirect, render
    from .models import UserProfile, Todo
    from django.contrib.auth.decorators import login_required
    from django.views.decorators.http import require_http_methods # <-- NEW
    
    # ... existing code
    
    # NEW
    @login_required
    @require_http_methods(["PUT"])
    def toggle_todo(request, task_id):
        todo = request.user.todos.get(id=task_id)
        todo.is_completed = not todo.is_completed
        todo.save()
    
        return render(request, "tasks.html#todo-item-partial", {"todo": todo})
    
    

    在 return 語(yǔ)句中,我們可以看到如何利用模板部分:通過(guò)引用其名稱 todo-item-partial 以及與我們要處理的項(xiàng)目名稱相匹配的上下文,我們僅返回部分在tasks.html中的循環(huán)中進(jìn)行迭代。

    我們現(xiàn)在可以測(cè)試打開(kāi)和關(guān)閉該項(xiàng)目:

    Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

    看起來(lái)我們只是在做一些客戶端工作,但是檢查瀏覽器中的網(wǎng)絡(luò)工具向我們展示了如何分派 PUT 請(qǐng)求并返回部分 HTML:

    PUT 請(qǐng)求

    Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

    回復(fù)

    Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX

    我們的應(yīng)用程序現(xiàn)已 HTMX 化!您可以在此處查看最終代碼。在第 4 部分中,我們將添加添加和刪除任務(wù)的功能。

    以上是使用 Django 和 HTMX 創(chuàng)建待辦事項(xiàng)應(yīng)用程序 - 創(chuàng)建前端并添加 HTMX 部分的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

    本站聲明
    本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請(qǐng)聯(lián)系admin@php.cn

    熱AI工具

    Undress AI Tool

    Undress AI Tool

    免費(fèi)脫衣服圖片

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驅(qū)動(dòng)的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用于從照片中去除衣服的在線人工智能工具。

    Clothoff.io

    Clothoff.io

    AI脫衣機(jī)

    Video Face Swap

    Video Face Swap

    使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費(fèi)的代碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級(jí)代碼編輯軟件(SublimeText3)

    Python的UNITDEST或PYTEST框架如何促進(jìn)自動(dòng)測(cè)試? Python的UNITDEST或PYTEST框架如何促進(jìn)自動(dòng)測(cè)試? Jun 19, 2025 am 01:10 AM

    Python的unittest和pytest是兩種廣泛使用的測(cè)試框架,它們都簡(jiǎn)化了自動(dòng)化測(cè)試的編寫、組織和運(yùn)行。1.二者均支持自動(dòng)發(fā)現(xiàn)測(cè)試用例并提供清晰的測(cè)試結(jié)構(gòu):unittest通過(guò)繼承TestCase類并以test\_開(kāi)頭的方法定義測(cè)試;pytest則更為簡(jiǎn)潔,只需以test\_開(kāi)頭的函數(shù)即可。2.它們都內(nèi)置斷言支持:unittest提供assertEqual、assertTrue等方法,而pytest使用增強(qiáng)版的assert語(yǔ)句,能自動(dòng)顯示失敗詳情。3.均具備處理測(cè)試準(zhǔn)備與清理的機(jī)制:un

    如何將Python用于數(shù)據(jù)分析和與Numpy和Pandas等文庫(kù)進(jìn)行操作? 如何將Python用于數(shù)據(jù)分析和與Numpy和Pandas等文庫(kù)進(jìn)行操作? Jun 19, 2025 am 01:04 AM

    pythonisidealfordataanalysisionduetonumpyandpandas.1)numpyExccelSatnumericalComputationswithFast,多dimensionalArraysAndRaysAndOrsAndOrsAndOffectorizedOperationsLikenp.sqrt()

    什么是動(dòng)態(tài)編程技術(shù),如何在Python中使用它們? 什么是動(dòng)態(tài)編程技術(shù),如何在Python中使用它們? Jun 20, 2025 am 12:57 AM

    動(dòng)態(tài)規(guī)劃(DP)通過(guò)將復(fù)雜問(wèn)題分解為更簡(jiǎn)單的子問(wèn)題并存儲(chǔ)其結(jié)果以避免重復(fù)計(jì)算,來(lái)優(yōu)化求解過(guò)程。主要方法有兩種:1.自頂向下(記憶化):遞歸分解問(wèn)題,使用緩存存儲(chǔ)中間結(jié)果;2.自底向上(表格化):從基礎(chǔ)情況開(kāi)始迭代構(gòu)建解決方案。適用于需要最大/最小值、最優(yōu)解或存在重疊子問(wèn)題的場(chǎng)景,如斐波那契數(shù)列、背包問(wèn)題等。在Python中,可通過(guò)裝飾器或數(shù)組實(shí)現(xiàn),并應(yīng)注意識(shí)別遞推關(guān)系、定義基準(zhǔn)情況及優(yōu)化空間復(fù)雜度。

    如何使用__ITER__和__NEXT __在Python中實(shí)現(xiàn)自定義迭代器? 如何使用__ITER__和__NEXT __在Python中實(shí)現(xiàn)自定義迭代器? Jun 19, 2025 am 01:12 AM

    要實(shí)現(xiàn)自定義迭代器,需在類中定義__iter__和__next__方法。①__iter__方法返回迭代器對(duì)象自身,通常為self,以兼容for循環(huán)等迭代環(huán)境;②__next__方法控制每次迭代的值,返回序列中的下一個(gè)元素,當(dāng)無(wú)更多項(xiàng)時(shí)應(yīng)拋出StopIteration異常;③需正確跟蹤狀態(tài)并設(shè)置終止條件,避免無(wú)限循環(huán);④可封裝復(fù)雜邏輯如文件行過(guò)濾,同時(shí)注意資源清理與內(nèi)存管理;⑤對(duì)簡(jiǎn)單邏輯可考慮使用生成器函數(shù)yield替代,但需結(jié)合具體場(chǎng)景選擇合適方式。

    Python編程語(yǔ)言及其生態(tài)系統(tǒng)的新興趨勢(shì)或未來(lái)方向是什么? Python編程語(yǔ)言及其生態(tài)系統(tǒng)的新興趨勢(shì)或未來(lái)方向是什么? Jun 19, 2025 am 01:09 AM

    Python的未來(lái)趨勢(shì)包括性能優(yōu)化、更強(qiáng)的類型提示、替代運(yùn)行時(shí)的興起及AI/ML領(lǐng)域的持續(xù)增長(zhǎng)。首先,CPython持續(xù)優(yōu)化,通過(guò)更快的啟動(dòng)時(shí)間、函數(shù)調(diào)用優(yōu)化及擬議中的整數(shù)操作改進(jìn)提升性能;其次,類型提示深度集成至語(yǔ)言與工具鏈,增強(qiáng)代碼安全性與開(kāi)發(fā)體驗(yàn);第三,PyScript、Nuitka等替代運(yùn)行時(shí)提供新功能與性能優(yōu)勢(shì);最后,AI與數(shù)據(jù)科學(xué)領(lǐng)域持續(xù)擴(kuò)張,新興庫(kù)推動(dòng)更高效的開(kāi)發(fā)與集成。這些趨勢(shì)表明Python正不斷適應(yīng)技術(shù)變化,保持其領(lǐng)先地位。

    如何使用插座在Python中執(zhí)行網(wǎng)絡(luò)編程? 如何使用插座在Python中執(zhí)行網(wǎng)絡(luò)編程? Jun 20, 2025 am 12:56 AM

    Python的socket模塊是網(wǎng)絡(luò)編程的基礎(chǔ),提供低級(jí)網(wǎng)絡(luò)通信功能,適用于構(gòu)建客戶端和服務(wù)器應(yīng)用。要設(shè)置基本TCP服務(wù)器,需使用socket.socket()創(chuàng)建對(duì)象,綁定地址和端口,調(diào)用.listen()監(jiān)聽(tīng)連接,并通過(guò).accept()接受客戶端連接。構(gòu)建TCP客戶端需創(chuàng)建socket對(duì)象后調(diào)用.connect()連接服務(wù)器,再使用.sendall()發(fā)送數(shù)據(jù)和.recv()接收響應(yīng)。處理多個(gè)客戶端可通過(guò)1.線程:每次連接啟動(dòng)新線程;2.異步I/O:如asyncio庫(kù)實(shí)現(xiàn)無(wú)阻塞通信。注意事

    如何在Python中切片列表? 如何在Python中切片列表? Jun 20, 2025 am 12:51 AM

    Python列表切片的核心答案是掌握[start:end:step]語(yǔ)法并理解其行為。1.列表切片的基本格式為list[start:end:step],其中start是起始索引(包含)、end是結(jié)束索引(不包含)、step是步長(zhǎng);2.省略start默認(rèn)從0開(kāi)始,省略end默認(rèn)到末尾,省略step默認(rèn)為1;3.獲取前n項(xiàng)用my_list[:n],獲取后n項(xiàng)用my_list[-n:];4.使用step可跳過(guò)元素,如my_list[::2]取偶數(shù)位,負(fù)step值可反轉(zhuǎn)列表;5.常見(jiàn)誤區(qū)包括end索引不

    Python類中的多態(tài)性 Python類中的多態(tài)性 Jul 05, 2025 am 02:58 AM

    多態(tài)是Python面向?qū)ο缶幊讨械暮诵母拍睿浮耙环N接口,多種實(shí)現(xiàn)”,允許統(tǒng)一處理不同類型的對(duì)象。1.多態(tài)通過(guò)方法重寫實(shí)現(xiàn),子類可重新定義父類方法,如Animal類的speak()方法在Dog和Cat子類中有不同實(shí)現(xiàn)。2.多態(tài)的實(shí)際用途包括簡(jiǎn)化代碼結(jié)構(gòu)、增強(qiáng)可擴(kuò)展性,例如圖形繪制程序中統(tǒng)一調(diào)用draw()方法,或游戲開(kāi)發(fā)中處理不同角色的共同行為。3.Python實(shí)現(xiàn)多態(tài)需滿足:父類定義方法,子類重寫該方法,但不要求繼承同一父類,只要對(duì)象實(shí)現(xiàn)相同方法即可,這稱為“鴨子類型”。4.注意事項(xiàng)包括保持方

    See all articles