Простой учебник из 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.