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许可证获得许可的 - 有关详细信息，请参见许可证文件。