المقدمة

يمكن caching ثقب دونيت أن يكون تقنية مفيدة حيث ترغب في تخزين عناصر معينة من صفحة لكنها ليست كلها. ومع ذلك يمكن أن يكون من الصعب تنفيذها. في هذا المقال سأريكم كيفية تنفيذ تقنية تخزين ثقب بدونيت بسيطة باستخدام HTMX

المشكلة

أحد المشاكل التي كنت أواجهها مع هذا الموقع هو أنني أردت أن أستخدم "anti" - "token forgery" مع أوراقي. هذه ممارسة جيدة للسلامة من أجل منع هجمات "Cross" - "Site Request Forgery", و لكن , كانت تتسبب في مشكلة في حاسوب الصفحات "MSC7" "Anti" - "Token forgeri" فريد من كل طلب صفحة "M SK9" لذا إذا قمت بتخزين الصفحة "Mスク10" "the token will be the same for all users" "MSSK11" هذا يعني أنه إذا قدم المستخدم نموذجاً, "The tokens will be invalid and the form submission will fail" "A." "ASP" "P." "NET Core" prevents this by deactivating all caching on request where the Anti" (anti--) "Anti-Msk15" "forgery-token is used" "(anti-.") "This is a good security practice" (this is a Good Security Practice) "MRK17" "but it means that the page won't be cached at all" "It is not ideal for a site like this where the content is mostly static"

الحل

طريقة شائعة حول هذا هو ' ثقب دونيت ' تخزين حيث تقوم بتخزين الغالبية العظمى من الصفحة ولكن عناصر معينةM SK2 هناك' مجموعة من الطرق لتحقيق ذلك في ASPMSC4 شبكة الإنترنت Core باستخدام إطار الرؤية الجزئية على الرغم من أنه ' معقد لتطبيقه وغالبا ما يتطلب حزم محددة وتنظيمهMスク6 أردت حلا أبسطMسک7

بما أنني أستخدم بالفعل HTMX في هذا المشروع هناك ' طريقة بسيطة جدا للحصول على ديناميكية | ' | ثقب دونيت |' | من خلال تحميل الجسيمات الديناميكيا مع HTMX لقد كتبت بالفعل عن باستخدام توكينات AntiForgeryRequest مع Javascript لكن مرة أخرى كان المشكل هو أن هذا فعالاً غير ال caching للصفحة.

الآن يمكنني استعادة هذه الوظيفة عند استخدام HTMX لشحن الجسيمات الديناميكية.

  <li class="group relative mb-1 hidden lg:block ml-2" id="typeaheadelement">
    <div  hx-trigger="load" hx-get="/typeahead" hx-target="#typeaheadelement" hx-swap="innerHTML"></div>
</li>

ببساطة ميتة, يمين? كل ما تفعله هو إجراء مكالمة في سطر واحد من البرمجة في المتحكم الذي يعيد الرؤية الجزئية . هذا يعني أن الرموز المضادة للغش M SK3 يتم توليدها على сервер والصفحة يمكن تخزينها كما هي عادةMSC4 رؤية الجزئيات تم تحميلها ديناميكيا لذلك الرموز مازالت فريدة من نوعها لكل طلب

لاحظوا : إن كنت تستخدم 'SPA' نفس الطريقة التي أستخدمها مع HTMX عليك أن تتأكد من أن load event doesn't fire again on the back button. I make this happen by setting the typeahead to overwrite the target on the first load

هذا يعني أنه في المرة الأولى التي يتم تشغيلها فإنه يزيل div الأصلي ويقوم ببديله بالمحتوى الجديد من الجزء الذي أعاده جهاز التحكم بالأسفل. بما أن رمز التشويه Anto- تم توليده على сервер وحفظه في cookie للsession فإنه لا يزال يعمل مع هذا المقاربة M SK2 إلى أن أعيد توزيع التطبيق ).

لقد وضعنا hx-target إلى العنصر الخارجي أساساً لتجنب خطأ JS; لأن HTMX يحتاج إلى هدف صالح عند إنهاء الطلب. لذا يمكنك M SK2 عدم إزالة العنصر الذي أثار طلب HT MX

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    [HttpGet("typeahead")]
    public IActionResult TypeAhead()
    {
        return PartialView("_TypeAhead");
    }

في الجزء الأول مازلنا نملك الشكل البسيط المبسط مع الرموز المضادة للغش -

<div x-data="window.mostlylucid.typeahead()" class="relative" id="searchelement"  x-on:click.outside="results = []">
    @Html.AntiForgeryToken()
    <label class="input input-sm dark:bg-custom-dark-bg bg-white input-bordered flex items-center gap-2">
        <input
            type="text"
            x-model="query"
            x-on:input.debounce.300ms="search"
            x-on:keydown.down.prevent="moveDown"
            x-on:keydown.up.prevent="moveUp"
            x-on:keydown.enter.prevent="selectHighlighted"
            placeholder="Search..."
            class="border-0 grow  input-sm text-black dark:text-white bg-transparent w-full"/>
        <i class="bx bx-search"></i>
    </label>
    <!-- Dropdown -->
    <ul x-show="results.length > 0"
        class="absolute z-10 my-2 w-full bg-white dark:bg-custom-dark-bg border border-1 text-black dark:text-white border-b-neutral-600 dark:border-gray-300   rounded-lg shadow-lg">
        <template x-for="(result, index) in results" :key="result.slug">
            <li
                x-on:click="selectResult(result)"
                :class="{
                    'dark:bg-blue-dark bg-blue-light': index === highlightedIndex,
                    'dark:hover:bg-blue-dark hover:bg-blue-light': true
                }"
                class="cursor-pointer text-sm p-2 m-2"
                x-text="result.title"
            ></li>
        </template>
    </ul>
</div>

ومن ثم يقوم هذا بتفكيك كل البرمجة لبحث رؤوس الكتابة وعندما يُرسل ' فإنه يسحب الرموز ويضيفها إلى الطلب ( بالضبط كما قبل

        let token = document.querySelector('#searchelement input[name="__RequestVerificationToken"]').value;
            console.log(token);
            fetch(`/api/search/${encodeURIComponent(this.query)}`, { // Fixed the backtick and closing bracket
                method: 'GET', // or 'POST' depending on your needs
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token // Attach the AntiForgery token in the headers
                }
            })

في الختام

هذه طريقة بسيطة جدا للحصول على ' ثقب دونيت ' تخزين مع HTMX. إنها ' طريقة عظيمة للحصول على فوائد تخزين دون تعقيد الحزمة الإضافيةM SK4 أتمنى أن تجدوا هذا مفيداً