spa with pure js

? ‍? 순수한 자바 스크립트가있는 스파

이 프로젝트는 순수한 HTML, CSS 및 JavaScript를 사용하여 구축 된 단일 페이지 응용 프로그램입니다. 프론트 엔드 프레임 워크 나 라이브러리에 의존하지 않고 클라이언트 측 라우팅 및 렌더링을 보여줍니다.

의도되지 않습니까 ? 생산 사용 ! 그것은 단순하고 해킹 가능합니까? 학습 목적 .

켈 참고 :이 웹 앱은 catfact.ninja api에 따라 다릅니다. 참조 : cat-fact.js

?; 뷰시; DR

AWS S3 : http://spa-with-pure-javaScript.s3-website-us-east-1.amazonaws.com에서 호스팅 된 웹 사이트를보십시오

특징

• 동적 페이지 로딩 : 페이지 (홈 및 고양이 사실)는 전체 페이지를 다시로드하지 않고 단일 콘텐츠 영역으로 동적으로로드됩니다.

• 뒤로/전방 탐색 : 브라우저의 후면 및 전방 버튼을 올바르게 처리하여 페이지 간의 원활한 탐색을 보장합니다.

• NGINX 설정 : 스파를 제공하기위한 NGINX 구성으로도 커진.

• 사용자 탐색 카운트 : 스파 및 페이지 재 장전 내에서 오프라인 내비게이션을 추적합니다.

  1. 오프라인 탐색 수를 표시합니다 (즉, 전체 페이지 재 장전없이 스파 내에서 페이지 변경). 값은 app.js 파일의 javaScript에 의해 업데이트되며 스파 내에서 내비게이션이 발생할 때마다 증가합니다.

  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 Compose는 기계에 설치하여 컨테이너로 작동합니다.
• ? 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 서버입니다.

NPM으로 HTTP-Server를 설치하십시오.

 npm install --global http-server

포트 8080에서 실행 :

 http-server ./src --port 8080

? 브라우저를 열고 http : // localhost : 8080으로 이동하여 응용 프로그램을보십시오.

팁 : Chrome DevTools (F12를 누르면)를 사용하여 파일의로드 방법을 이해하십시오.

특허

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.