用nodejs和mongodb构建一个短URL发生器
#网络开发人员 #node #mongodb #expressjs

我们总是遇到许多链接，这些链接对于我们日常使用而言太长了，很难轻松记住它们，或者在需要时转发/共享它们。因此，这是我们要求URL短而有效的地方。

我们将借助 nodejs ， mongodb 和 expressjs 。

  • 第一步是创建文件体系结构以创建我们的项目，因此我在这里使用VS代码作为代码编辑器。
  • 现在打开终端并通过使用命令初始化NPM文件 
npm init
  • 根据您的需要填写所需的细节
  • 现在创建一个文件结构，用于管理路由和视图文件夹，如下图所示。

File structure

  • 现在让我们首先安装所需的依赖项，打开终端并点击： 
npm i expressjs mongoose ejs shortid dotenv nodemon

这里 Expressjs 用于设置路线，猫鼬用于为我们的DB创建模型，而EJS则用于该项目的观看引擎的前端部分， shortid <<> shortid < /strong>是我们将用于在URL中为feed生成shortids/shorturl的主要函数，最后 * dotenv *是一个用于存储用于访问DB的凭据的NPM软件包。

  • 因此，在安装软件包/依赖项后，您的 package.json 文件应该看起来像下面的图像，不要忘记更改脚本，如下所示，因为我们将需要 nodemon 用于快速开发该应用程序，该应用会在对文件进行任何更改时自动重新运行服务器。 
{
  "name": "url_shortner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "author": "Rohit",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^10.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "mongoose": "^6.0.7",
    "shortid": "^2.2.16"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}
  • 首先，我们将使用DB URL设置 dotenv 文件，我们将连接到该项目，我们将将我们的应用程序连接到我们的本地 mongodb 数据库，因此更新 .env 文件，如下所示。 
MONGO_DB_URL=mongodb://127.0.0.1:27017/urlshortnerappdb
  • 现在，我们将与 server.js 文件中的数据库建立连接。 
const express = require("express");
const mongoose = require("mongoose");
const app = express();

require("dotenv").config();

mongoose.connect(process.env.MONGO_DB_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

app.listen(process.env.PORT || 5000, () => {
  console.log("SERVER RUNNING AT PORT 5000...");
});

dotenv 在第一行中包含 dotenv 文件，该文件具有用于连接的DB URL，然后要求Express创建实例，然后遵循通过要求猫鼬建立连接。
然后，我们为端口5000上的服务器或可以在 dotenv 文件中指定的端口定义端口。

  • 现在，我们将通过需要杂种和添加收藏品来定义URL DB的架构。 
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,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("ShortUrl", shortUrlSchema);

我们使用 shortid 软件包在 shortid.generate.generate 命令和单击集合中为我们的URL生成随机短形，以存储单击数量的数量这是人们在Shorturl链接上进行的。

  • 现在，在 index.ejs 文件中添加“ ejs” 的视图引擎代码部分。 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL shortner</title>
    <style>
        body {
            background-color: powderblue;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        h1 {
            color: blue;
        }
        button {
            font-size: 17px;
            color: white;
            background-color: green;
            border-radius: 15px;
            width: 70px;
            height: 50px;
        }
        form {
            width: 50%;
            display: flex;
        }
        input {
            border-radius: 10px;
            width: 100%;
            height: 40px;
            border: none;
            margin: 10px;
        }
        table {
            width: 70%;
            padding-top: 20px;
        }
        table,
        td,
        th {
            border-radius: 5px;
        }
        table,
        thead,
        tr {
            font-size: 25px;
        }
        table,
        tbody,
        tr,
        td {
            font-size: 25px;
        }
        th {
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>URL shortner</h1>
    <form action="/shortUrls" method="POST">
        <input type="url" name="fullUrl" id="fullUrl">
        <button type="submit">Submit</button>
    </form>

    <table>
        <thead>
            <tr>
                <th>Full URL</th>
                <th>Short URL</th>
                <th>Clicks</th>
            </tr>
        </thead>
        <tbody>
            <% shortUrls.forEach(shortUrl=> { %>
                <tr>
                    <td><a href="<%= shortUrl.full %>"><%= shortUrl.full %></a></td>
                    <td><a href="<%= shortUrl.short %>"><%= shortUrl.short %></a></td>
                    <td><%= shortUrl.clicks %></td>
                </tr>
                <% }) %>
        </tbody>
    </table>
</body>

</html>

并将表单操作设置为“/shorturls” ，因为这是有助于我们连接到后端的终点。

  • 现在，我们将在 server.js 文件中添加路由。 
const shortUrl = require("./models/shortUrl");
const ShortUrl = require("./models/shortUrl");

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false }));

app.get("/", async (req, res) => {
  const shortUrls = await ShortUrl.find();
  res.render("index", { shortUrls: shortUrls });
});

app.post("/shortUrls", async (req, res) => {
  await ShortUrl.create({ full: req.body.fullUrl });

  res.redirect("/");
});

app.get("/:shortUrl", async (req, res) => {
  const shortUrl = await ShortUrl.findOne({ short: req.params.shortUrl });
  if (shortUrl == null) return res.sendStatus(404);

  shortUrl.clicks++;
  shortUrl.save();

  res.redirect(shortUrl.full);
});

我们将使用 app.set 来设置视图引擎，以查看我们的EJS文件并从后端传递JSON数据，我们将应用程序设置为 app.use（Express.URLENCODED） {扩展：false}））。

“/” 的第一条路线将是我们应用程序的主页，它将从DB中获取所有先前的URL并使用EJS脚本渲染。

第二个路线“/shorturls” 允许我们将URL发布到db

第三路线“/：shorturl” 是使原始链接和短URL链接之间的连接的原因，因此它将其重新引向我们想要的链接，我们想要短URL和它将存储在DB中的URL的ID作为参数，然后我们增加了点击量。

  • 因此，最终代码看起来像： 
const express = require("express");
const mongoose = require("mongoose");
const shortUrl = require("./models/shortUrl");
const app = express();
const ShortUrl = require("./models/shortUrl");

require("dotenv").config();

mongoose.connect(process.env.MONGO_DB_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false }));

app.get("/", async (req, res) => {
  const shortUrls = await ShortUrl.find();
  res.render("index", { shortUrls: shortUrls });
});

app.post("/shortUrls", async (req, res) => {
  await ShortUrl.create({ full: req.body.fullUrl });

  res.redirect("/");
});

app.get("/:shortUrl", async (req, res) => {
  const shortUrl = await ShortUrl.findOne({ short: req.params.shortUrl });
  if (shortUrl == null) return res.sendStatus(404);

  shortUrl.clicks++;
  shortUrl.save();

  res.redirect(shortUrl.full);
});

app.listen(process.env.PORT || 5000, () => {
  console.log("SERVER RUNNING AT PORT 5000...");
});

现在命中

npm start

在启动应用程序的终端中。

输入以 - localhost访问应用程序的URL：5000 在您的Web -Browser上。

您将能够看到以下页面：

Final app image

因此，这就是您使用nodejs，expresjs和mongodb创建一个简单的URL Shortner应用程序，并可以将URL夹成小尺寸。

如果您喜欢帖子并与您的朋友分享，请点击“¥”按钮，让他们知道如何轻松创建一个URL Shortner应用程序。

关注@rohit23421，以获取更多有关开发和开发人员更好实践的内容。