برنامه های یک صفحه می توانند محتوای متفاوتی را بدون بارگیری صفحه جدید نشان دهند. برای انجام این کار، آنها از کنترل کننده های کلیک روی پیوندها و History API استفاده می کنند. History API اجازه می دهد تا تاریخچه جلسه مرورگر را دستکاری کنید. به این ترتیب می‌توانیم URL را هنگام نمایش یک صفحه دیگر به‌روزرسانی کنیم (معمولاً در برنامه‌های یک صفحه «نما» نامیده می‌شود). همچنین مطمئن می شود که دکمه برگشت مرورگر همچنان همانطور که انتظار می رود کار می کند.
به اپلیکیشن Single Page در این کد لبه نگاهی بیندازید. این تصاویر گربه یا سگ را نشان می دهد و پیوندهایی برای جابجایی بین دو حیوان ارائه می دهد. به نظر می رسد خوب کار می کند!
کشف 404 یواشکی
متأسفانه یک اشکال ظریف در برنامه وجود دارد. بیایید نگاهی بیندازیم!
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
. - روی پیوند Doggos کلیک کنید. به نحوه تغییر URL توجه کنید.
- برنامه را دوباره بارگیری کنید.
شما صفحه‌ای دریافت می‌کنید که روی آن « Cannot GET /doggos —یک 404 یواشکی. این «دزدیک» است، زیرا به نظر می‌رسد برنامه وب تا زمانی که فقط روی پیوندهای درون آن کلیک کنید خوب کار می‌کند. هنگام استفاده از URL ها در یک پنجره مرورگر جدید یا هنگام بازخوانی صفحه، خراب می شود. مسئله این است که سرور نمی داند چگونه به درخواست این URL ها پاسخ دهد. کد جاوا اسکریپت در برنامه وب ما از History API برای پیمایش بین آنها استفاده می کند، اما سرور نمی داند با آنها چه کند. هر زمان که سرور نمی داند برای URL درخواستی چه کاری انجام دهد، با کد وضعیت HTTP 404 پاسخ می دهد. با این کد سرور می گوید چیزی برای URL درخواستی پیدا نکرده است.
موتورهای جستجو در این مورد URL ها را فهرست نمی کنند، زیرا کاربر روی یک نتیجه جستجو کلیک می کند و پیام خطا را پیدا می کند، اما نه محتوایی را که به دنبال آن بود، مانند تصاویر سگ.
تعمیر سرور
این پروژه از سرور express.js که با جاوا اسکریپت نوشته شده است استفاده می کند. بیایید سرور را تعمیر کنیم، بنابراین با index.html پاسخ می‌دهد و برنامه تک صفحه‌ای بقیه کارها را انجام می‌دهد.
- روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
- فایل
server.jsرا انتخاب کنید.
این فایل حاوی کد سرور است. یک سرور express.js راه اندازی می کند و محتوای index.html را ارسال می کند. راه‌اندازی مسیر در خط 15 تنها زمانی به برنامه وب ارائه می‌شود که درخواست‌ها به URL / مراجعه کنند. سرور همچنین باید URL های دیگری را که ایجاد کرده ایم ارائه کند. بیایید این را تغییر دهیم تا به همه URL ها ارائه شود، بنابراین در آینده با URL های اضافی نیز کار می کند.
برای انجام این کار، می‌توانیم کدی که از خط 15 شروع می‌شود را به این شکل تغییر دهیم:
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* با هر URL مطابقت دارد و سرور اکنون با برنامه وب در index.html برای هر URL داده شده پاسخ می دهد.
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
تازه کردن و باز کردن پیوندها در یک پنجره ناشناس جدید اکنون باید مطابق انتظار عمل کند.