spa with pure js

？ ‍？與純JavaScript的水療中心

該項目是使用純HTML，CSS和JavaScript構建的單頁應用程序（SPA）。它演示了客戶端的路由和渲染，而無需依賴任何前端框架或庫。

它不打算嗎？生產使用！它很簡單且可砍才足以用於？ ‍？學習目的。

配x注意：此WebApp取決於catfact.ninja api。請參閱：cat-fact.js

？ ‍♂️TL; dr

查看在AWS S3上託管的網站：http：//spa-with-pure-javascript.s3-website-us-east-1.amazonaws.com

特徵

• 動態頁面加載：頁面（家庭和貓事實）動態加載到單個內容區域，而無需重新加載整個頁面。

• 背面/向前導航：正確處理瀏覽器的背面和向前按鈕，以確保頁面之間的無縫導航。

• NGINX設置：使用用於服務水療中心的NGINX配置進行擴展。

• 用戶導航計數：在水療中心和頁面重新加載中跟踪離線導航。

  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組成啟動應用程序。

構建NGINX容器圖像：

 docker-compose build

開始容器：

 docker-compose up

？使用HTTP服務器本地運行

HTTP-Server是一個簡單的命令行靜態HTTP服務器。

使用NPM安裝HTTP-Server：

 npm install --global http-server

在端口8080上運行：

 http-server ./src --port 8080

？打開瀏覽器並導航到http：// localhost：8080以查看應用程序。

提示：使用Chrome DevTools（按F12）了解如何加載文件。

執照

該項目是根據MIT許可證獲得許可的 - 有關詳細信息，請參見許可證文件。