如何使用Javascript创建一个URL缩短器

DebugUsery
371 阅读5分钟

如何使用Javascript创建一个URL缩短器

在这个项目中，我们要建立一个统一资源定位器（URL）缩短器服务。我敢肯定，你们大多数人都听说过bit.ly、goo.gl和其他URL缩短器。

通过URL缩短器，你可以缩短长的URL，使其易于分享。

在本教程中，你将建立一个这样的服务。我们将使用JavaScript、PHP和MySQL数据库构建缩短长链接的API。

不多说了，让我们开始吧。

前提条件

需要对HTML、CSS、JavaScript和PHP有基本了解。在你的电脑上安装一个文本编辑器，最好是Visual Studio Code。

我们将使用MySQL数据库。确保你的电脑上安装有WAMP或XAMPP服务器。

URL缩短器

URL缩短器是一种工具，它将一个长而复杂的URL压缩成一个短而清晰的链接，更容易分享。用户在点击这些短链接时，会被重定向到主要的URL。

例如，你可能想分享一篇文章并包括一个到Twitter的链接，但你面临着字符限制。Twitter最多限制280个字符。为了解决这个问题，你使用一个URL缩短器来减少链接。它不仅对Twitter有用，而且在其他任何长链接无法管理的情况下也是如此。

短链接在展出时可以节省很多空间，因为它们小而清晰。此外，用户也很难打错短链接。

URL缩短器是如何工作的？

缩短URL的过程相当简单。URL缩短器生成一个随机字符串，将主URL映射到短码并提供一个新的URL。这两个URL被放在数据库中。

当你点击缩短后的URL时，数据库会检查短码并将你重定向到主URL。URL缩短器得到一个长的URL并返回一个短的URL。

在这种情况下，我们将创建一个输入区来输入长的（原始）URL。点击按钮后，系统将生成短网址。此外，还可以编辑和保存缩短后的URL。删除功能也将是可用的。

你可以用任何编程语言和数据库建立一个URL缩短器。在本教程中，我们将使用HTML、JavaScript、PHP和MySQL。

建立一个URL缩短器

要创建一个URL缩短器，我们需要一个数据库和一个服务器。在本指南中，我们将使用WAMP服务器，这意味着我们将在Windows操作系统中托管API。

WAMP（Windows、Apache、MySQL和PHP）可以解释如下。

  • Windows- 指定系统与Windows设备兼容。
  • Apache- 这是为应用程序提供主机的程序。
  • MySQL- 为你的应用程序的内容提供一个数据库。
  • PHP--一种创建动态内容的语言。

步骤1：导航到WAMP服务器

导航到WAMP服务器。该目录在安装时自动创建，位于本地磁盘C（c:\wamp\www）。在www目录中，创建了被称为项目的文件夹。这些在存储HTML、CSS、JavaScript和PHP文件时很方便。

要开始创建项目，创建一个文件夹并命名为shorten-url 。

第2步：创建一个PHP文件

为了创建一个URL缩短器，我们需要一个文本输入区和一个按钮，然后添加脚本标签。在shorten-url 目录内创建index.php 文件，用VS代码打开它。

为了创建文本输入区和按钮，我们将使用下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>URL Shortener</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <form action="#">
            <i class="url-icon uil uil-link"></i>
            <input type="text"placeholder="Enter the long url" required>
            <button>Shorten the URL</button>
        </form>
        <div class="count">
            <span>Total Links: <span>10</span> & Total Clicks</span>
        </div>
        <div class="url-area">
            <div class="title">
                <li>Shorten URL</li>
                <li>Original URL</li>
                <li>Clicks</li>
                <li>Actions</li>
            </div>

    </div>
    <script src="script.js"></script>
</body>
</html>

下面是输入区。

Input area

在文件夹shorten-url ，我们还将添加script.js 、connect.php 、controller.php 、save-url.php 、delete.php 和style.css 文件。

第3步：配置MySQL并创建一个数据库和表

在这一部分，我们将通过打开phpMyAdmin面板来配置MySQL数据库。管理员的用户名默认设置为root ，而密码是一个空白字段。

创建一个数据库，并将其命名为shorten-url 。然后创建一个表url 。表url 的属性包括（id，short_url，original_url，和clicks）。shorten-url 数据库存储URL数据（id、原始url、短url和点击量）。

Database

第4步：数据库配置

创建一个文件connect.php ，并在其中添加数据库凭证。

<?php
$domain = "localhost/url/";
$servername = "localhost";
$username = "root";
$password = "";
$dbname='shorten-url';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

第5步：用PHP创建一个短网址

在输入区，我们输入长的URL，点击按钮后，短的URL就生成了。

下面的代码使用PHP和MySQL创建一个短的URL。

<?php
  include "php/connect.php";
  $new_url = "";
  if(isset($_GET)){
    foreach($_GET as $key=>$val){
      $u = mysqli_real_escape_string($conn, $key);
      $new_url = str_replace('/', '', $u);
    }
      $sql = mysqli_query($conn, "SELECT original_url FROM url WHERE short_url = '{$new_url}'");
      if(mysqli_num_rows($sql) > 0){
        $sql2 = mysqli_query($conn, "UPDATE url SET clicks = clicks + 1 WHERE short_url = '{$new_url}'");
        if($sql2){
            $original_url = mysqli_fetch_assoc($sql);
            header("Location:".$original_url['original_url']);
          }
      }
  }
?>

<?php
      $sql2 = mysqli_query($conn, "SELECT * FROM url ORDER BY id DESC");
      if(mysqli_num_rows($sql2) > 0){;
        ?>
        <div class="url-area">
          <div class="title">
            <li>Shorten URL</li>
            <li>Original URL</li>
            <li>Clicks</li>
            <li>Action</li>
          </div>
          <?php
            while($row = mysqli_fetch_assoc($sql2)){
              ?>
                <div class="data">
                <li>
                  <a href="<?php echo $domain.$row['short_url'] ?>" target="_blank">
                  <?php
                    if($domain.strlen($row['short_url']) > 50){
                      echo $domain.substr($row['short_url'], 0, 50) . '...';
                    }else{
                      echo $domain.$row['short_url'];
                    }
                  ?>
                  </a>
                </li>
                <li>
                  <?php
                    if(strlen($row['original_url']) > 60){
                      echo substr($row['original_url'], 0, 60) . '...';
                    }else{
                      echo $row['original_url'];
                    }
                  ?>
                </li>
              </li>
              </div>
              <?php
            }
          ?>
      </div>
        <?php
      }
    ?>
  </div>

Shorten URL

第6步：生成一个唯一的随机数

我们创建了一个文件controller.php ，它生成了一个唯一的ID，并将原始URL插入到有短URL的表中。

下面的代码为长URL生成了一个唯一的随机ID。这就是我们如何生成唯一的id。

<?php
    include "connect.php";
    $original_url = mysqli_real_escape_string($conn, $_POST['original_url']);

    if(!empty($original_url) && filter_var($original_url, FILTER_VALIDATE_URL)){
        $ran_url = substr(md5(microtime()), rand(0, 26), 5);////generating a random number, 5 characters

        //checking that random generated url exists in the database or not
        $sql = mysqli_query($conn, "SELECT * FROM url WHERE short_url = '{$ran_url}'");
        if(mysqli_num_rows($sql) > 0){
            echo "Something went wrong. Please generate again!";
        }else{
            //insert typed url into the table with short url
            $sql2 = mysqli_query($conn, "INSERT INTO url (original_url, short_url, clicks)
                                         VALUES ('{$original_url}', '{$ran_url}', '0')");
            if($sql2){
                $sql3 = mysqli_query($conn, "SELECT short_url FROM url WHERE short_url = '{$ran_url}'");
                if(mysqli_num_rows($sql3) > 0){
                    $short_url = mysqli_fetch_assoc($sql3);
                    echo $short_url['short_url'];
                }
            }
        }
    }
    ?>

第7步：重定向到长URL

短网址应该重定向到长网址。下面的代码将用户从短网址重定向到长网址。

 let domain = "localhost/url/";
                shortenURL.value = domain + data;
                copyIcon.onclick = ()=>{
                    shortenURL.select();
                    document.execCommand("copy");
                }

 <div class="data">
                <li>
                  <a href="<?php echo $domain.$row['short_url'] ?>" target="_blank">
                  <?php
                    if($domain.strlen($row['short_url']) > 50){
                      echo $domain.substr($row['short_url'], 0, 50) . '...';
                    }else{
                      echo $domain.$row['short_url'];
                    }
                  ?>
                  </a>
                </li>

第8步：保存URL的功能

在创建短网址后，会产生一个唯一的ID。这个唯一的ID可以被编辑和保存。创建save-url.php 文件，然后复制和粘贴下面的代码。

<?php
    include "connect.php";
    $og_url = mysqli_real_escape_string($conn, $_POST['short_url']);
    $short_url = str_replace(' ', '', $og_url);
    $hidden_url = mysqli_real_escape_string($conn, $_POST['hidden_url']);

    if(!empty($short_url)){
        if(preg_match("/\//i", $short_url)){
            $explodeURL = explode('/', $short_url);
            $shortURL = end($explodeURL);
            if($shortURL != ""){
                $sql = mysqli_query($conn, "SELECT short_url FROM url WHERE short_url = '{$shortURL}' && short_url != '{$hidden_url}'");
                if(mysqli_num_rows($sql) == 0){
                    $sql2 = mysqli_query($conn, "UPDATE url SET short_url = '{$shortURL}' WHERE short_url = '{$hidden_url}'");
                    if($sql2){
                        echo "success";
                    }else{
                        echo "Error - Failed to update link!";
                    }
                }else{
                    echo "The short url that you've entered already exist. Please enter another one!";
                }
            }else{
                echo "Required - You have to enter short url!";
            }
        }else{
            echo "Invalid URL - You can't edit domain name!";
        }
    }else{
        echo "Error- You have to enter short url!";
    }
?>

下面是保存功能的工作原理。

Save URL

第9步：功能删除URL

也可以删除保存在数据库中的缩短的URL。创建delete.php 文件，然后复制并粘贴下面的代码。

<?php
    include "connect.php";
    if(isset($_GET['id'])){
        $delete_id = mysqli_real_escape_string($conn, $_GET['id']);
        $sql = mysqli_query($conn, "DELETE FROM url WHERE short_url = '{$delete_id}'");
        if($sql){
            header("Location: ../");
        }else{
            header("Location: ../");
        }
    }elseif(isset($_GET['delete'])){
        $sql3 = mysqli_query($conn, "DELETE FROM url");
        if($sql3){
            header("Location: ../");
        }else{
            header("Location: ../");
        }
    }else{
        header("Location: ../");
    }
?>

下面是删除功能的工作原理。

Delete URL

这就是URL缩短器系统的工作原理。

URL shortener

你可以在GitHub上找到这个项目的源代码。

收尾工作

恭喜你！你终于创建了一个URL缩短器。你终于用JavaScript、PHP和MySQL创建了一个URL缩短器。该系统生成了一个独特的随机ID，一旦保存，就会存储在数据库中。

总结一下，我们已经学会了。

  • 什么是URL缩短器？
  • URL缩短器如何工作。
  • 如何使用JavaScript、PHP和MySQL建立一个URL缩短器。
avatar
文章
阅读
粉丝