Простой учебник из 4 частей о том, как сделать хороший, удобный для резюме сокращатель URL.
Используемые технологии (Полезно знать, не обязательно)
- Node.js
- Express.js
- MongoDB
- TailwindCSS
- Alpine.js
- EJS
Всем привет! Меня зовут Питер, и в этой статье мы будем делать URL-Shortener в Node.js. Наше веб-приложение будет использовать современные веб-технологии, и ничего страшного, если вы никогда о них не слышали. Я проведу вас через все. Это хорошо для всех, от новичка до среднего разработчика. Без дальнейших церемоний, давайте начнем кодировать.
Это руководство будет разделено на 4 раздела.
Часть 1 — Бизнес-логика
В этом разделе мы обсудим веб-технологии и реальную теорию нашего URL-Shortener. Я настоятельно рекомендую прочитать часть 1, но это совершенно необязательно. Если вы хотите сразу погрузиться в код, я рекомендую вам начать с части 2.
Часть 2. Создание серверной части с помощью Express.js
Здесь мы перейдем прямо к серверной части и начнем реализовывать нашу бизнес-логику. Мы настроим простой сервер Express и запустим наш сервер MonogoDB. Затем мы начнем отправлять необработанный HTML.
Часть 3 — Отправка нашего HTML-интерфейса с помощью TailwindCSS
В этой части мы начнем создавать наши представления в EJS. Мы также стилизуем их с помощью TailwindCSS, динамического и простого CSS-фреймворка.
Часть 4 — JavaScript с Alpine.js и настройка нашего счетчика кликов
В заключительном разделе мы закончим и доработаем наш сервис, добавив адаптивный JavaScript к нашим вторичным представлениям (см. часть 3).
Как видите, сделать URL-Shortener очень просто. Но прежде чем мы сделаем что-либо из этого, мы должны знать, как будет работать бизнес-логика. Наша цель — сохранить все наши URL-адреса и их соответствующие идентификаторы на сервере, а также тип просмотра, который они выбрали. Мы также разрешаем использование пользовательских изображений и брендинга.
Как мы видим, мы будем использовать наш сервер в качестве API для доступа к нашей базе данных, а затем передавать его в наши шаблоны EJS. Поначалу задача может показаться сложной, но при дальнейшем рассмотрении она будет легкой.
Спасибо за прочтение и следите за обновлениями для части 2 — Настройка сервера!
Первоначально опубликовано на http://github.com.