Vytvořte projekt URL Shortener pomocí MongoDB + Node - ale prakticky!

Pojďme se dozvědět o MongoDB, Mongoose, Node a dalších technologiích vytvořením jednoduchého projektu zkracování adres URL.

Přemýšleli jste někdy o tom, jak byste si pro sebe mohli vytvořit rychlý zkracovač URL? Líbí se vám, jak twitter zkracuje vaše odkazy, když je sdílíte? Nebo jak funguje bit.ly?

Jistě, jsou to komplikované společnosti, ale koncept zkracovačů URL je jednoduchý. Pojďme se dozvědět o MongoDB a dalších backendových nástrojích vytvořením tohoto projektu v 7 krocích.

Úvod do projektu

Tuto bezplatnou učebnu zkracovače URL budeme používat od zatraceného kódu k tomu, abychom skutečně, jako skutečně vytvořili a vyhodnotili náš praktický projekt a viděli zpětnou vazbu.

Budeme používat následující technologie:

  • Mongus jako ORM
  • MongoDB jako backendová databáze
  • Node.js jako backend
  • Jednoduchý vložený soubor JS jako rozhraní

Cvičení 1:Nastavení expresního serveru

Odkaz na tuto laboratoř je zde

Je to poměrně jednoduchá laboratoř. Musíme jen vytvořit trasu /short který by měl adekvátně reagovat. Tento kód by nám umožnil projít:

// Initialize express server on PORT 1337
const express = require('express')
const app = express()

app.get('/', (req, res) => {
    res.send('Hello World! - from codedamn')
})

app.get('/short', (req, res) => {
    res.send('Hello from short')
})

app.listen(process.env.PUBLIC_PORT, () => {
    console.log('Server started')
})

Laboratoř 2:Nastavení našeho zobrazovacího modulu

Odkaz na tuto laboratoř je zde

Používáme jeden .ejs soubor, tak to pojďme trochu prozkoumat. Opět velmi jednoduché cvičení, protože stačí změnit název proměnné. Tohle by nám mělo stačit:

const express = require('express')
const app = express()

app.set('view engine', 'ejs')

app.get('/', (req, res) => {
    res.render('index', { myVariable: 'My name is John!' })
})

app.listen(process.env.PUBLIC_PORT, () => {
    console.log('Server started')
})

Laboratoř 3:Nastavení MongoDB

Odkaz na tuto laboratoř je zde

V této laboratoři se správně připojíme k MongoDB a vložíme záznam, jen pro záznam

Toto je řešení, které by nás mělo dostat do další laboratoře:

app.post('/short', (req, res) => {
    const db = mongoose.connection.db
    // insert the record in 'test' collection
    db.collection('test').insertOne({ testCompleted: 1 })

    res.json({ ok: 1 })
})

// Setup your mongodb connection here
mongoose.connect('mongodb://localhost/codedamn', {
    useNewUrlParser: true,
    useUnifiedTopology: true
})
mongoose.connection.on('open', () => {
    // Wait for mongodb connection before server starts
    app.listen(process.env.PUBLIC_PORT, () => {
        console.log('Server started')
    })
})

Laboratoř 4:Nastavení schématu Mongoose

Odkaz na tuto laboratoř je zde

Nakonec definujeme schéma v models/url.js soubor pro správnou manipulaci s Mongoose a zde je kód pro to:

const mongoose = require('mongoose')
const shortId = require('shortid')

const shortUrlSchema = new mongoose.Schema({
  full: {
    type: String,
    required: true
  },
  short: {
    type: String,
    required: true,
    default: shortId.generate
  },
  clicks: {
    type: Number,
    required: true,
    default: 0
  }
})

module.exports = mongoose.model('ShortUrl', shortUrlSchema)

V rámci této výzvy také aktualizujeme /short trasa nyní.

app.post('/short', async (req, res) => {
    // insert the record using the model
    const record = new ShortURL({
        full: 'test'
    })
    await record.save()
    res.json({ ok: 1 })
})

Laboratoř 5:Propojení frontendu, backendu a MongoDB

Toto je také jednoduchá laboratoř. Musíme pouze aktualizovat cestu, abychom extrahovali předanou adresu URL a uložili ji do databáze pomocí našeho schématu.

app.use(express.urlencoded({ extended: false }))

app.post('/short', async (req, res) => {
    // Grab the fullUrl parameter from the req.body
    const fullUrl = req.body.fullUrl
    console.log('URL requested: ', fullUrl)

    // insert and wait for the record to be inserted using the model
    const record = new ShortURL({
        full: fullUrl
    })

    await record.save()

    res.redirect('/')
})

Laboratoř 6:Zobrazení krátkých adres URL na frontendu

Nyní zobrazujeme adresu URL nastavenou na našem webu pomocí .ejs proměnné předány.

app.get('/', async (req, res) => {
    const allData = await ShortURL.find()
    res.render('index', { shortUrls: allData })
})

Laboratoř 7:Fungování přesměrování

Nakonec propojíme schéma přesměrování pomocí dynamických expresních tras a správných stavových kódů.

app.get('/:shortid', async (req, res) => {
    // grab the :shortid param
    const shortid = req.params.shortid

    // perform the mongoose call to find the long URL
    const rec = await ShortURL.findOne({ short: shortid })

    // if null, set status to 404 (res.sendStatus(404))
    if (!rec) return res.sendStatus(404)

    // if not null, increment the click count in database
    rec.clicks++
    await rec.save()

    // redirect the user to original link
    res.redirect(rec.full)
})

Závěr

A můžeme tomu říkat den! Právě jste si sami vytvořili plně funkční zkracovač URL pomocí Express + Node + MongoDB. Poplácejte si po zádech!

Konečný zdrojový kód je k dispozici na GitHubu.

Pokud máte nějakou zpětnou vazbu na tento článek nebo zatracené učebny, neváhejte mě kontaktovat na Twitteru. Pojďme diskutovat :)