вступление
Amock.io — бесплатный веб-сервис для имитации API. Это позволяет людям, работающим с внешними веб-сервисами, не зависящими от них, легко создавать бесплатные макеты своих веб-сервисов и API для использования во время разработки и тестирования.
Со временем amock.io превратился из простого веб-сервиса для имитации REST/SOAP API в возможность имитировать очень широкий спектр типов медиа-контента, включая text/html
. Это означает, что на самом деле можно создать макет, который возвращает HTML-контент через HTTP GET, или, проще говоря, веб-сайт. В этой статье я собираюсь показать вам, как именно это сделать.
Предостережение
Прежде чем мы начнем, обратите внимание:
amock.io не является платформой веб-хостинга и не должен использоваться как таковая. Хотя может быть довольно легко обслуживать многостраничные веб-сайты с amock.io, эта функция, очевидно, не предназначена для фактического хостинга крупномасштабных, живых веб-сайтов, но может оказаться очень удобной для размещения макетов веб-сайтов для демонстрационные цели.
Предположения
Для остальной части этой демонстрации мы будем работать со следующими предположениями:
- У вас есть понимание HTML, CSS и основных принципов веб-дизайна.
- Вы собираетесь использовать эти знания во благо. Помните, с большой силой приходит большая ответственность.
Теперь, когда мы со всем этим разобрались, давайте приступим к размещению нашего веб-сайта на amock.io.
Домашняя страница
Итак, допустим, у нас есть следующая веб-страница
с исходным кодом, выглядящим так
Разместить указанную выше страницу на amock так же просто, как:
- Посетите
https://www.amock.io.
- Войдите в свой аккаунт. Если у вас еще нет учетной записи, создайте учетную запись (это бесплатно), а затем войдите в систему.
- Нажмите на кнопку «Создать макет».
- В поле «
HTTP Method
» выберитеGET.
- В поле «
HTTP Response Code
» выберите200 Ok.
- В поле «
Request Endpoint
» введите любое выбранное вами значение. Это составит URL-адрес, который вы можете использовать для доступа к своему веб-сайту в формеhttps://www.amock.io/api/v1/<your_username/<your_chosen_endpoint>
. В этом случае мы будем использоватьamock/index.html
в качестве конечной точки. - В поле
Content-Type
выберите «text/html
». Этот шаг очень важен, потому что он говорит amock.io возвращать ваш макет в качестве веб-страницы всякий раз, когда он запрашивается. - Затем введите код
HTML
для своего веб-сайта в текстовое полеresponse body
. - Нажмите кнопку «Создать макет», чтобы сохранить и создать свою веб-страницу.
- Вы увидите подтверждающее сообщение, и отобразится сгенерированная фиктивная конечная точка.
Теперь наш макет создан. Чтобы увидеть это в действии, мы копируем сгенерированную фиктивную конечную точку в адресную строку браузера, а затем нажимаем Enter. И вуаля!
Другие страницы
Теперь вы могли заметить, что у нас есть ссылки на другие страницы (about.html
и contact.html
) в верхней части нашей домашней страницы. И в настоящее время нажатие любой из этих ссылок возвращает ошибку invalid mock endpoint
XML
.
Чтобы эти ссылки работали и приводили нас на нужные страницы, нам нужно сначала создать эти страницы. Мы повторяем шаги, которые мы выполнили при создании макета индексной страницы, чтобы создать макеты для «о» и «контакт». Для этой демонстрации мы будем использовать amock/about.html
и amock/contact.html
в качестве фиктивных конечных точек, потому что мы использовали amock/index.html
на странице индекса, а гиперссылки на всех страницах указывают на index.html
, about.html
и contact.html
соответственно.
Обратите внимание, что мы также можем использовать абсолютные URL-адреса для наших гиперссылок, в отличие от относительных URL-адресов, которые мы использовали выше.
Исходный код страницы about
И для страницы контактов
Теперь у нас есть макет всех трех страниц.
Теперь мы можем посетить любой из фиктивных URL-адресов в браузере и перейти на любую другую страницу, щелкнув гиперссылку в верхней части страницы.
Шаг вперед
В большинстве случаев наши веб-сайты содержат внешние ресурсы, такие как CSS и JavaScript, во внешних файлах, которые мы включаем на наши страницы с тегами <style />
и <script />
соответственно. В таких случаях, независимо от того, размещена ли сама веб-страница на amock.io или нет, мы можем создавать макеты для таких ресурсов и просто ссылаться на них на нашей веб-странице.
Например, у нас есть следующий CSS на нашем веб-сайте выше:
<style> .nav-right { width:auto !important; } </style>
Если мы переместим приведенный выше CSS с нашей html-страницы в файл CSS, скажем, style.css
, мы заменим тег стиля тегом ссылки следующим образом:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Теперь, сделав еще один шаг, мы можем создать макет на amock.io со следующими настройками:
- Тип контента:
text/css
- HTTP-метод:
GET
- Код HTTP-ответа:
200 Ok
- Конечная точка: выберите любой понравившийся URL-адрес конечной точки. (скажем
amock/style.css
) - Тело ответа: код CSS, без тега
<style/>
, конечно.
и обновите свойство href
тега ссылки, указав сгенерированную фиктивную конечную точку:
<link rel=”stylesheet” type=”text/css” href=”https://www.amock.io/api/v1/k32y/amock/style.css” />
И вот так наш CSS теперь обслуживается с amock.io.
Мы можем сделать то же самое и для JavaScript. Единственная разница будет заключаться в том, что наш Content-Type
для JavaScript будет application/javascript
вместо text/css
. И мы включим JavaScript на нашу страницу с кодом:
<script type=”application/javascript” src=”https://www.amock.io/api/v1/k32y/amock/script.js"></script>
Где https://www.amock.io/api/v1/k32y/amock/script.js
— сгенерированная фиктивная конечная точка для скрипта.
Ну наконец то
И это подводит нас к концу этой демонстрации. И если вы остались со мной до конца, вот кое-что для вас:
Поздравляем! Теперь заходите на amock.io и дайте волю своим веб-сайтам.
Вы можете разветвить или клонировать весь веб-сайт, использованный в этой демонстрации, здесь https://github.com/k32yr04n/amockwebsite на Github.