spa with pure js
1.0.0
โครงการนี้เป็นแอปพลิเคชันหน้าเดียว (SPA) ที่สร้างขึ้นโดยใช้ HTML, CSS และ JavaScript บริสุทธิ์ มันแสดงให้เห็นถึงการกำหนดเส้นทางฝั่งไคลเอ็นต์และการแสดงผลโดยไม่ต้องพึ่งพากรอบหรือห้องสมุดส่วนหน้า
มัน ไม่ได้ มีไว้เพื่อ? การใช้งานผลิต ! มันง่ายและแฮ็กได้พอที่จะใช้หรือ? ? วัตถุประสงค์การเรียนรู้
หมายเหตุ : webapp นี้ขึ้นอยู่กับ catfact.ninja api ดู: cat-fact.js
ดูเว็บไซต์ที่โฮสต์บน AWS S3: http://spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com
การโหลดเพจแบบไดนามิก: หน้า (ข้อเท็จจริงที่บ้านและแมว) จะถูกโหลดลงในพื้นที่เนื้อหาเดียวโดยไม่ต้องโหลดทั้งหน้าใหม่
การนำทางด้านหลัง/ไปข้างหน้า: จัดการปุ่มด้านหลังและด้านหน้าของเบราว์เซอร์อย่างถูกต้องเพื่อให้มั่นใจว่าการนำทางที่ราบรื่นระหว่างหน้าเว็บ
การตั้งค่า Nginx: Dockerized ด้วยการกำหนดค่า NGINX สำหรับการให้บริการ SPA
จำนวนการนำทางของผู้ใช้: ติดตามการนำทางออฟไลน์ภายใน SPA และการโหลดหน้าใหม่
แสดงการนับการนำทางออฟไลน์ (เช่นการเปลี่ยนแปลงหน้าภายในสปาโดยไม่ต้องโหลดหน้าเต็ม) ค่าได้รับการอัปเดตโดย JavaScript ในไฟล์ app.js การเพิ่มขึ้นแต่ละครั้งนำทางจะเกิดขึ้นภายใน SPA
แสดงจำนวนครั้งที่หน้าถูกโหลดซ้ำตั้งแต่เริ่มเซสชัน ค่านี้ได้รับการจัดการโดยใช้ 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 หรือ Node.js:
ติดตั้ง Docker
ติดตั้งโหนด
โคลนที่เก็บ:
git clone https://github.com/elidaniel92/spa-with-pure-js.git
สลับไปที่โฟลเดอร์ที่เก็บ:
cd spa-with-pure-js
เริ่มแอปโดยใช้ Docker Compose
สร้างภาพคอนเทนเนอร์ Nginx:
docker-compose build
เริ่มคอนเทนเนอร์:
docker-compose up
HTTP-Server เป็นเซิร์ฟเวอร์ HTTP แบบคงที่บรรทัดคำสั่งแบบง่าย
ติดตั้ง http-server ด้วย NPM:
npm install --global http-server
วิ่งบนพอร์ต 8080:
http-server ./src --port 8080
โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
