首頁 >web前端 >js教程 >使用 Node.js 和 MongoDB 建立 URL 縮短應用程式

使用 Node.js 和 MongoDB 建立 URL 縮短應用程式

WBOY
WBOY原創
2024-07-23 17:18:34777瀏覽

Building a URL Shortener App with Node.js and MongoDB

建立 URL 縮短服務是深入使用 Node.js 和 MongoDB 進行全端開發的好方法。在本部落格中,我們將逐步介紹建立 URL 縮短器應用程式的過程,該應用程式允許使用者將長 URL 轉換為縮短版本並追蹤其使用情況。

先決條件

要學習本教程,您應該:

  • 已安裝 Node.js
  • JavaScript 和 Express.js 基礎
  • MongoDB 資料庫(您可以使用 MongoDB Atlas 作為雲端解決方案)

項目設定

第 1 步:初始化項目

首先,為您的專案建立一個新目錄並使用 npm 對其進行初始化:

mkdir url-shortener-app
cd url-shortener-app
npm init -y

步驟2:安裝依賴項

接下來,安裝必要的依賴項:

npm install express mongoose cors dotenv
npm install --save-dev nodemon

第三步:專案結構

建立以下資料夾結構:

url-shortener-app/
├── controllers/
│   └── urlController.js
├── models/
│   └── urlModel.js
├── routes/
│   └── urlRoutes.js
├── .env
├── index.js
├── package.json

建構後端

第 4 步:設定 Express 伺服器

在index.js檔案中,設定Express伺服器並連接到MongoDB:

const express = require('express');
const mongoose = require('mongoose');
const urlRoutes = require('./routes/urlRoutes');
const cors = require('cors');

const app = express();
app.use(express.json());

require("dotenv").config();

const dbUser = process.env.MONGODB_USER;
const dbPassword = process.env.MONGODB_PASSWORD;

// Connect to MongoDB
mongoose
    .connect(
        `mongodb+srv://${dbUser}:${dbPassword}@cluster0.re3ha3x.mongodb.net/url-shortener-app`,
        { useNewUrlParser: true, useUnifiedTopology: true }
    )
    .then(() => {
        console.log("Connected to MongoDB database!");
    })
    .catch((error) => {
        console.error("Connection failed!", error);
    });

app.use(cors({
    origin: "*",
}));

app.get('/', (req, res) => {
    res.send('Welcome to URL Shortener API');
});

app.use('/api', urlRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

在根目錄建立.env文件,用於儲存環境變數:

MONGODB_USER=yourMongoDBUsername
MONGODB_PASSWORD=yourMongoDBPassword

第 5 步:定義 URL 模型

在 models/urlModel.js 檔案中,定義 URL 的架構:

const mongoose = require('mongoose');

const urlSchema = new mongoose.Schema({
    originalUrl: { type: String, required: true },
    shortUrl: { type: String, required: true, unique: true },
    clicks: { type: Number, default: 0 },
    expirationDate: { type: Date },
    createdAt: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Url', urlSchema);

第 6 步:建立路線

在routes/urlRoutes.js檔案中,定義API的路由:

const express = require('express');
const { createShortUrl, redirectUrl, getUrls, getDetails, deleteUrl } = require('../controllers/urlController');
const router = express.Router();

router.post('/shorten', createShortUrl);
router.get('/urls', getUrls);
router.get('/:shortUrl', redirectUrl);
router.get('/details/:shortUrl', getDetails);
router.delete('/delete/:shortUrl', deleteUrl);

module.exports = router;

第 7 步:實作控制器

在controllers/urlController.js檔案中,實作控制器功能:

const Url = require('../models/urlModel');

function generateUniqueId(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        result += characters[randomIndex];
    }
    return result;
}

const createShortUrl = async (req, res) => {
    const { originalUrl } = req.body;
    const shortUrl = generateUniqueId(5);
    const urlRegex = new RegExp(/^(http|https):\/\/[^ "]+$/);
    if (!urlRegex.test(originalUrl))
        return res.status(400).json('Invalid URL');
    const url = await Url.findOne({ originalUrl });
    if (url) {
        res.json(url);
        return;
    }
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + 7);
    const newUrl = new Url({ originalUrl, shortUrl, expirationDate });
    await newUrl.save();
    res.json(newUrl);
};

const redirectUrl = async (req, res) => {
    const { shortUrl } = req.params;
    const url = await Url.findOne({ shortUrl });
    if (!url || (url.expirationDate && url.expirationDate < new Date())) {
        res.status(404).json('URL expired or not found');
        return;
    }
    url.clicks++;
    await url.save();
    res.redirect(url.originalUrl);
};

const getUrls = async (req, res) => {
    try {
        const urls = await Url.find({}).sort({ _id: -1 });
        res.json(urls);
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const getDetails = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        const url = await Url.findOne({ shortUrl });
        if (url) {
            res.json(url);
        } else {
            res.status(404).json('URL not found');
        }
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const deleteUrl = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        await Url.findOneAndDelete({ shortUrl });
        res.json('URL deleted');
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

module.exports = { createShortUrl, redirectUrl, getDetails, getUrls, deleteUrl };

運行應用程式

使用以下指令啟動伺服器:

npm run dev

此指令將使用 Nodemon 啟動您的伺服器,當您變更程式碼時,Nodemon 會自動重新啟動伺服器。

結論

在本部落格中,我們使用 Node.js 和 MongoDB 建立了一個簡單的 URL 縮短器應用程式。該應用程式允許用戶縮短 URL、追蹤其使用情況並透過到期日期進行管理。該專案是學習全端開發的一個很好的起點,並且可以透過使用者身份驗證、自訂 URL 別名等其他功能進行擴充。

探索程式碼

存取 GitHub 儲存庫以詳細探索程式碼。


您可以根據自己的喜好隨意定制博客,並在需要時提供更多詳細信息或解釋。

以上是使用 Node.js 和 MongoDB 建立 URL 縮短應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn