До того, как я начал свой первый проект одностраничного приложения на JavaScript, мое восприятие SPA (одностраничное приложение) заключалось в том, что вы не можете добавить к нему много и что вы не можете перемещаться по многим страницам на одной странице. К моему удивлению, этот мыслительный процесс длился недолго, когда я начал создавать свой проект.

Создание одностраничного приложения само по себе может быть очень творческим процессом, и здесь делается много рассуждений, чтобы узнать, как вы можете добавить функциональность для создания проекта своей мечты. Я думаю, что даже до того, как приступить к первым шагам построения проекта (которые включают в себя: обдумывание идей или начало с нуля), есть несколько вещей, которые человек должен знать, и которые действительно могут изменить весь процесс представления.

давайте начнем с того, что такое одностраничное приложение (SPA)?

Одностраничное приложение – это веб-приложение, которое загружает только один веб-документ, а затем обновляет основное содержимое этого документа с помощью API-интерфейсов JavaScript, таких как XMLHttpRequest и Выборка, когда нужно отобразить другой контент.

Источник: https://developer.mozilla.org/en-US/docs/Glossary/SPA

Другими словами, в SPA вы работаете только с одним файлом HTML без перенаправления на другую страницу. поэтому у вас может быть файл HTML, один файл JS и файл CSS для оформления вашего проекта.

Я буду делиться фрагментами своего проекта в качестве примеров, и я написал свой проект в Visual Studio.

Итак, это все, с чем мы здесь работаем. ПРИМЕЧАНИЕ: - db.json здесь не требуется для вашего проекта, но вы можете использовать это, чтобы добавить больше функциональности в свой проект, db.json это база данных полностью в json. База данных, запросы и результаты — это все данные json, и для их использования нам нужен установленный фиктивный json-сервер, к которому прикреплена ссылка на Github от @typicode о том, как его можно настроить src: — https://github.com/typicode /json-сервер

И это все, что нам нужно, чтобы начать процесс создания нашего проекта, теперь, когда мы знаем, что нам понадобится для создания SPA. Один из самых важных советов, которыми я хотел бы поделиться, который может так много добавить к вашему проекту.

<body>
  <div id= “mainContainer”>
<div> </body>

В этом примере мы создали в нашем HTML a div , куда мы хотим добавить наше содержимое (контент, хранящийся в других тегах), мы можем получить наш mainContainer, используя один из методов запроса в нашем JS file for, например, в этом случае: -

const mainContainer = document.getElementById("mainContainer");

теперь, когда мы имеем в виду mainContainer , мы имеем в виду наш основной div , куда я хочу добавить все содержимое. Трюк здесь, например, заключается в том, что если я добавляю ссылку с помощью тега привязки в свой div, как только я нажимаю на ссылку, я хочу, чтобы она показывала мне содержимое только этого тега привязки (примечание: вы можете добавить много вещей для привязки тега с помощью прослушивателя событий) мне нужно будет создать прослушиватель событий в моем теге привязки, по которому он щелкнул, чтобы показать мне содержимое, которое я добавлю на страницу, не перенаправляя меня на другую страницу, поэтому я сделаю a.href=#потому что я не хочу, чтобы он перенаправлял меня на любую другую ссылку, но самый важный совет - как вы можете имитировать, что вы переходите на другую страницу, но на самом деле вы не

mainContainer.innerHTML="";

вот оно!, вот наше спасение жизни, это в основном настройка нашего основного div для очистки существующего содержимого и загрузки нового содержимого с добавленным прослушивателем событий, вы можете сделать это с помощью кнопок, ссылок, как вам нравится, это сделает его похожим на вас переходят на разные страницы.

если вы не предпочитаете использовать innerHTML не беспокойтесь, есть другие способы достижения тех же результатов.

while (mainContainer.firstChild) {
mainContainer.removeChild(mainContainer.firstChild)}

or

mainContainer.querySelectorAll(“*”).forEach(el => el.remove())

поскольку все эти методы достигают одинаковых результатов, возможно, один из них может быть лучше, чем другой, с точки зрения производительности.

Совет № 2: когда вы работаете с SPA, вам, скорее всего, придется использовать API, если вы начинаете новый, вы можете начать с бесплатных API и / или создать поддельный REST API, используя фиктивный сервер Json, инструкции, описанные выше о том, как сделать твой собственный.

если вы работаете с одним из бесплатных или платных API, они могут выглядеть примерно так

не пугайтесь, когда вы впервые смотрите на них, лучший способ прочитать содержимое (в JSON) — это использовать наш другой спасатель жизни fetch() на нашем любимом console в браузере.

Функция fetch() извлекает данные. Это глобальный метод для объекта window. Хотите узнать больше о выборке? источник: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Базовый fetch() запрос выглядит примерно так:-fetch('http://example.com') //your api's URL
.then(response => response.json())
.then(data => console.log(data));

С помощью fetch() можно добиться многого: вы можете добавлять данные, если используете свой собственный REST API, вы можете извлекать содержимое, вы можете публиковать/обновлять данные, вы можете удалять содержимое. это очень полезный инструмент.

For my project, i used a free API, src:- https://makeup-api.herokuapp.com/api/v1/products.json

Я создал Online shopping website Experience для продуктов для макияжа, у этого API были некоторые проблемы с изображениями или ценами на некоторые бренды, поэтому я решил выбрать только те бренды, у которых указаны цены и изображения, которые мне понравились, поэтому я выбрал несколько брендов и отфильтровал API, используя их торговые марки, и для этого я создал функцию, которая выбирает только несколько брендов.

function fetchSelectedBrands()
{
const brands=[“nyx”,”maybelline”,”clinique”,”milani”];
brands.map((brands)=>{
fetch(`${baseURL}${brands}`)
.then(resp=>resp.json())
.then(product=>displayData(product))
})
}fetchSelectedBrands();

В моей функции я создал array, в котором хранятся названия моих брендов, а затем я использовал встроенный метод map для проверки того, что каждый элемент array's должен быть строкой, интерполированной в мой URL-адрес, и извлекает только эти названия брендов, поскольку мой базовый URL-адрес «https://makeup-api.herokuapp.com/api/v1/products.json?brand=»названия брендов сохраняются после этого URL-адреса, чтобы просто получить перечисленные названия брендов. Мне очень интересно, насколько полезен метод fetch и как его можно использовать.

Теперь, когда мы знаем, как эти основные концепции работают при создании проекта, давайте поговорим о том, как я использовал их на своем веб-сайте и как я реализовал эти идеи, а сейчас я поделюсь фотографиями своего веб-сайта.

Этот веб-сайт работает так же, как и реальный сайт покупок, вы можете добавлять товары в корзину или удалять из корзины, вы можете оформить заказ и щелкнуть продукт, чтобы просмотреть его описание и оставить отзывы об этом продукте.

для меня это был действительно забавный проект, потому что я люблю интернет-магазины, и, конечно же, мой первый проект для моих Flatiron School просто должен был быть посвящен этому.

Корзина пуста сообщение, когда в корзину не добавлены товары

после того, как вы нажмете на корзину после добавления продуктов, вы можете либо удалить товары из корзины, либо разместить заказ на товар. давайте посмотрим, как это будет выглядеть, если я удалю элемент, как следует, это будет держать меня на той же странице. Чтобы удалить элемент, я использую DELETE fetch request для удаления этого элемента из базы данных корзины.

теперь, когда я удалил один товар, я могу либо разместить заказ на товар, либо удалить его из своей корзины.

страница, когда я нажимаю разместить заказ на этот товар

когда я нажму на back to cart, я попаду в корзину с одним оставшимся товаром, или я могу нажать «Продолжить покупки», и это приведет к моей домашней странице, NOTE: - все это делается только в одном файле HTML, поэтому нет прямых адресов, и я использую mainContainer.innerHTML="", чтобы сделать мою страницу пустой, и использую fetch GET data/ или POST , когда срабатывают прослушиватели событий для этих кнопок.

еще одна вещь, как я упоминал ранее, вы можете нажимать на отдельные продукты и оставлять отзывы, если хотите, или вы также можете добавить товар прямо в корзину на этом

у меня есть POST FETCH request для reviews и для add to cart для db.json и для DELETE FETCH запроса для delete from cart и place order.

Это всего лишь один вид проекта, который вы можете сделать, если хотите, но существует так много других типов SPA, которые можно построить, например; игры. Есть так много других функций, которые можно добавить, когда мы работаем с таким веб-сайтом, даже если с одной страницей иногда это может быть ограничено, но, как вы можете видеть, есть способы обойти это и повеселиться. :)