الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

؟ ‍؟ سبا مع جافا سكريبت نقي

هذا المشروع عبارة عن تطبيق صفحة واحدة (SPA) مصممة باستخدام HTML Pure و CSS و JavaScript. إنه يوضح التوجيه من جانب العميل وتقديمه دون الاعتماد على أي أطر عمل أو مكتبات في الواجهة الأمامية.

ليس المقصود؟ استخدام الإنتاج ! انها بسيطة ويمكن اختراقها بما يكفي لاستخدامها؟ ‍؟ أغراض التعلم .

️ ملاحظة : يعتمد هذا webapp على catfact.ninja API. انظر: cat-fact.js

؟ ‍tl ؛ د

عرض موقع الويب المستضاف على AWS S3: http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com

سمات

  • تحميل الصفحة الديناميكية: يتم تحميل الصفحات (حقيقة المنزل والقطط) ديناميكيًا في منطقة محتوى واحد دون إعادة تحميل الصفحة بأكملها.

  • الخلف/التنقل الأمامي: يتعامل بشكل صحيح مع الأزرار للخلف والأمام للمتصفح ، مما يضمن التنقل السلس بين الصفحات.

  • إعداد NGINX: مقيد بتكوين NGINX لخدمة المنتجع الصحي.

  • عدد الملاحة للمستخدم: تتبع التنقل في وضع عدم الاتصال داخل SPA و PAGE RELOALS.

    1. يعرض عدد عمليات التنقل في وضع عدم الاتصال (أي ، يتغير الصفحة داخل المنتجع الصحي دون إعادة تحميل الصفحة الكاملة). يتم تحديث القيمة بواسطة JavaScript في ملف App.js ، مما يحدث في كل مرة يحدث فيها التنقل داخل المنتجع الصحي.

    2. يعرض عدد المرات التي تم فيها إعادة تحميل الصفحة منذ بدء الجلسة. تتم إدارة هذه القيمة باستخدام SessionStorage ، وتزيد في كل مرة يتم فيها إعادة تحميل الصفحة. تنعكس القيمة المحدثة في الصفحة ، كما هو موضح في ملفات app.js و contact.html .

؟ هيكل المشروع 

src/
│   ├── index.html           # Main entry point of the app  
│   ├── 404.html             # Redirect to index.html, necessary when running with http-server (npm package)
│   ├── contact.html         # A normal HTML page
│   ├── app/                 # JavaScript logic
│   │    └── app.js          # Main SPA logic, including navigation and route handling
│   │    └── routes.js       # Class responsible for routing and loading page content
│   └── pages/               # HTML pages for different routes
│      ├── home/
│      │   └── home.js       # Home page content
│      ├── about/
│      │   └── about.js      # About page content
│      └── not-found/
│          └── not-found.js  # Fallback page content (404)
├── docker-compose.yml       # Docker Compose configuration
├── Dockerfile               # Dockerfile for containerizing the app
├── nginx.conf               # Nginx configuration

ابدء

المتطلبات الأساسية

  • ؟ يقوم Docker و Docker بتركيب على جهازك لتشغيله في حاوية.
  • ؟ عقدة لتشغيل مع NPM.

تثبيت

تثبيت Docker أو Node.js:

تثبيت Docker

تثبيت العقدة

استنساخ المستودع: 

 git clone https://github.com/elidaniel92/spa-with-pure-js.git

التبديل إلى مجلد المستودع: 

 cd spa-with-pure-js

؟ يعمل محليًا مع Docker

ابدأ التطبيق باستخدام Docker Compose.

بناء صورة حاوية nginx: 

 docker-compose build

بدأت الحاوية: 

 docker-compose up

؟ يعمل محليًا مع HTTP Server

HTTP-Server هو خادم HTTP ثابت سطر أوامر بسيط.

قم بتثبيت HTTP-Server مع NPM: 

 npm install --global http-server

تشغيل على المنفذ 8080: 

 http-server ./src --port 8080

؟ افتح متصفحك وانتقل إلى http: // localhost: 8080 لعرض التطبيق.

نصيحة: استخدم Chrome DevTools (Press F12) لفهم كيفية تحميل الملفات.

image

رخصة

تم ترخيص هذا المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا - راجع ملف الترخيص للحصول على التفاصيل.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل