建立 URL 縮短服務是深入使用 Node.js 和 MongoDB 進行全端開發的好方法。在本部落格中,我們將逐步介紹建立 URL 縮短器應用程式的過程,該應用程式允許使用者將長 URL 轉換為縮短版本並追蹤其使用情況。
要學習本教程,您應該:
首先,為您的專案建立新目錄並使用 npm 對其進行初始化:
mkdir url-shortener-app cd url-shortener-app npm init -y
接下來,安裝必要的依賴:
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
在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
在 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);
在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;
在controllers/urlController.js檔案中,實作控制器功能:
const Url = require('../models/urlModel'); function generateUniqueId(length) { const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i { 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 { 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 儲存庫以詳細探索程式碼。
您可以根據您的喜好隨意定制博客,並在需要時提供更多詳細信息或解釋。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3