使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动

作者 : IT 大叔 本文共3014个字,预计阅读时间需要8分钟 发布时间: 2020-09-19

通过构建一个简单的URL缩短项目,让我们了解MongoDB,Mongoose,Node和其他技术。

您是否曾经想过如何为自己创建一个快速的URL缩短器?像Twitter共享时Twitter如何缩短您的链接?或如何工作?

当然,这些都是复杂的公司,但是URL缩短器的概念很简单。通过分7个步骤实际构建此项目,让我们了解MongoDB和其他后端工具。

项目介绍

我们将使用从Codedamn到真正的免费URL缩短器教室,就像真正创建和评估我们的动手项目并查看反馈一样。

我们将使用以下技术:

  • 猫鼬作为ORM
  • MongoDB作为后端数据库
  • Node.js作为后端
  • 一个简单的嵌入式JS文件作为前端

实验1:设置Express服务器

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图

实验室的链接在这里

这是一个相当简单的实验室。我们必须创建一条/short应该适当响应的路线。此代码将使我们通过:

// 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')
})

实验2:设置我们的视图引擎

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图(2)

实验室的链接在这里

我们使用的是单个.ejs文件,因此让我们对其进行一些探讨。同样,这是一个非常简单的实验,因为我们只需要更改变量的名称即可。这应该使我们完成:

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')
})

实验3:设置MongoDB

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图(4)

实验室的链接在这里

在本实验中,我们将正确连接到MongoDB并插入一条记录,仅用于记录

这是应该使我们进入下一个实验的解决方案:

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')
    })
})

实验4:设置猫鼬模式

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图(6)

实验室的链接在这里

最后,我们在models/url.js文件中定义一个模式,以使用Mongoose进行适当处理,这是该代码:

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)

另外,作为挑战的一部分,我们/short现在更新路线。

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 })
})

实验5:链接前端,后端和MongoDB

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图(8)

这也是一个简单的实验室。我们只需要更新路由以提取传递的URL,然后使用我们的模式将其存储在数据库中即可。

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('/')
})

实验6:在前端显示短URL

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图(10)

现在,我们使用.ejs传递的变量来显示网站上设置的URL 。

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

实验7:使重定向有效

使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动插图(12)

最后,我们使用动态快递路线和正确的状态码链接重定向方案。

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)
})

结论

!您只是使用Express + Node + MongoDB自己构建了一个可以正常工作的URL缩短器。

最终源代码可在GitHub上获得

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用MongoDB + Node创建URL Shortener项目(网址缩短程序)纯手动

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论