URL短縮を作成しましょう

33120 ワード
node webdev mongodb javascript テキストリンク
完全な記事を見つけることができますhere .
今日はノードを使用して簡単なURL短縮を構築します.JS , MongoDB , Vuejs
可能性があるかのようなURL短縮サービスを聞いたことがありますか bitly , and tinyurl .
これらのサービスを使用すると、長い(そして非常に醜い)URLを入力することができますし、順番に長いURLの代わりに使用できる非常に短い(より魅力的な)リンクを与える.
短いリンクは、より少ないスペースを取って、共有して、タイプがより簡単です.
ほとんどのURL短縮はまた、あなたのURLを受信したクリックの数を追跡することができますそのような解析を備えています.
しかし、このチュートリアルではURL短縮の主な目的に焦点を当て、URLを短縮します.このように、我々のアプリケーションが簡単になります.長いURLを受け取り、短いリンクを返します.
ノードを使用します.バックエンドの上のJSとMongoDBとVue.JSクライアントアプリケーションを作成します.これらをコンピュータにインストールしてください.
ノードを取得するhere
取得するhere
Vueを取得します.jshere

プロジェクト設定


我々は私たちのnodejs/エクスプレスサーバーを作成します
  • サーバーという名前のフォルダーを作成するか、または選択の名前を指定します
  • あなたのフォルダに
  • npm initを実行する
  • インストールエクスプレスをインストール
  • 我々はクライアントのアプリからのアクセスを許可するだけでなく、セットアップのCORSをする必要があります
  • NPMのインストール
    • さらにパッケージをインストールする必要があります.我々はMongoDBデータベースに接続するマングースが必要ですShortID短い文字列を作成し、検証する必要があります.は、受信したURLを検証するために、最後に我々は環境変数を読み込むためにdotenvを必要とする.次のコマンドを実行します.
    npm install mongoose --save 

npm install shortid --save 

npm install validate.js --save  

npm install dotenv --save
    次のフォルダ構造を作成します.

    データベース設定


    データベース接続を作成します.dbに以下を加えます.js私はローカルMongoDB接続を使用します.
    const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost/UrlShortener", {
  useNewUrlParser: true,
  useUnifiedTopology: true
});
mongoose.set('useCreateIndex', true)
    ここでは、私たちのMongoDB接続をurlShortnerと呼ばれるローカルデータベースに設定します.
    次に、私たちのURLのモデルを作成します.URLを更新します.以下のJS.
    
const mongoose = require("mongoose");
const urlSchema = new mongoose.Schema({
    longURL: {
        type: String,
        required: true
    },
    shortURL: {
        type: String,
        required: true,
    },
    shortUrlId: {
        type: String,
        required: true,
        unique: true
    }
});

module.exports = mongoose.model("URL", urlSchema);
    次に、保存し、URLのURLを見つけるためにロジックを追加します.jsファイル.
    const Url = require("../models/Url");

const save = (longURL, shortURL, shortUrlId) => {
    Url.create({ longURL, shortURL, shortUrlId })
};

const find = (shortUrlId) => Url.findOne({ shortUrlId: shortUrlId });

module.exports = {
    save,
    find
};

    クリエイトエクスプレスサーバー


    それではサーバを設定します.まず、環境変数を追加しましょう.envファイル.
    port = 5000
host = localhost
    我々はアプリを使用してこれらの変数にアクセスすることができますprocess.env. 変数名.
    次に、アプリの中に私たちのExpressサーバーを設定します.js
    
const express = require('express');
const app = express();
const cors = require('cors');
require('dotenv').config()
const port = process.env.port;
const host = process.env.host;
const bodyParser = require("body-parser"); //use to parse incoming request bodies

const urlServices = require("./services/urlServices");
const db = require("./data-access/db");
const urlDb = require("./data-access/urlDb");

const corsOptions = {
  origin: 'http://localhost:8080',
  optionsSuccessStatus: 200
}

app.use(cors(corsOptions))
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.listen(port, () => console.log("listening port " + port));
    ここでは、必要なパッケージやファイルを必要とするだけでなく、基本的なサーバを設定します.
    dotenv :ノードを環境変数で読み込む
    ボディパーサー:我々のサーバーに着信要求の本文を解析するために使用します.
    urlservices : URLを処理するためのいくつかのロジック(検証など)が含まれます.
    DB :前のセクションからの我々のデータベースセットアップ.
    URLDB : URLの保存と取得のための関数を含んでいます.
    Cors :他のドメインを許可するのに使われます(例えば、我々のフロントエンド)我々のAPIへの要求をすること.
    The origin: 'http://localhost:8080' CorsOptions変数の内側にのみ、我々のクライアントになるドメインからの要求を受け入れるように我々のアプリを指示します.Vueデフォルトのポートは8080です.
    最後に、サーバを設定し、ポートのポートを聞きます.envファイル.

    APIエンドポイントの追加


    次にURLを受け入れるエンドポイントを作成し、短縮版と一緒に保存し、短縮版をユーザーに返します.あなたのアプリケーションに次を追加します.js
    
app.post("/url", async (req, res) => {
    try {
        if (!!urlServices.validateUrl(req.body.url))
            return res.status(400).send({ msg: "Invalid URL." });

        const urlKey = urlServices.generateUrlKey();
        const shortUrl = `http://${host}:${port}/${urlKey}`

        await urlDb.save(req.body.url, shortUrl, urlKey)
        return res.status(200).send({ shortUrl });

    } catch (error) {
        return res.status(500).send({ msg: "Something went wrong. Please try again." });
    }
});
    ここでは、リクエスト本文の一部としてURLを受け取ります.js
    また、GenerateUrlKey ()関数を使用して、指定したURLのURL IDを作成します.
    次に、サーバーのホスト名とショートゾーンを使用してURLの短いリンクを作成します.
    次に、URL、短いリンク、およびShorturlid我々のデータベースに保存します.それから、短いリンクを返します.エラーが発生した場合は、適切なエラーメッセージを返します.

    サービス


    上記の2つの機能を使用しましたvalidateurl ()およびgenerateurlkey ()それらの関数を作りましょう.以下をurlservicesに加えてください.js
    const validate = require("validate.js");
const shortId = require("shortid");

const validateUrl = (url = "") => {
    return validate({ website: url }, {
        website: {
            url: {
                allowLocal: true
            }
        }
    });
}

const generateUrlKey = () => shortId.generate();

module.exports = { validateUrl, generateUrlKey: generateUrlKey };
    次の手順は、ShortRowIDを受け入れるエンドポイントを作成し、データベース内のShortRightを検索し、ブラウザに関連付けられている長いURLにリダイレクトします.あなたのアプリケーションに次を追加します.js
    
app.get("/:shortUrlId", async (req, res) => {
    try {
        const url = await urlDb.find(req.params.shortUrlId);
        return !url ? res.status(404).send("Not found") : res.redirect(301, url.longURL)

    } catch (error) {
        return res.status(500).send("Something went wrong. Please try again.")
    }
});
    当社のサーバーが準備完了です.我々は郵便配達人を使用してそれをテストすることができます.ランnode app.js サーバーを起動します.CTR + Cを押すとサーバーを停止できます.
    APIのポストマンテスト

    クライアントアプリ


    我々は現在、アプリケーションのクライアント側を作成する設定されます.Vueを使います.これはJSです.
    まず、vue cliをruningしてインストールします.
    npm install -g @vue/cli
    今、あなたの端末を開き、サーバーディレクターの外にいることを確認し、次のコマンドを実行してVueアプリを作成します
    vue create client
    デフォルトのプリセットを選択するか、手動で機能を選択したい場合.次に、コードエディター内のクライアントフォルダーを開きます.
    アプリの内容を削除します.Vueと削除HelloWorld.コンポーネントフォルダ内のVueファイル.
    以下のフォルダ構造を使用します.だから、家を作成します.コンポーネントフォルダ内のVueコンポーネント.

    スタイリング用のブートストラップを使用します.インデックスの内側.パブリックフォルダのHTMLファイルで、ブートストラップのcssに次のリンクを追加します.
    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    次に、更新アプリ.以下をVueにします.
    <template>
  <div>
    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Shortly></a>
    </nav>
    <div class="container">
     <home />
    </div>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  name: "App",
  components: {
    Home,
  },
};
</script>
    我々は、単純なNAVバーだけでなく、ホームでインポートを追加しました.VUEコンポーネントと私たちのコンテナの部門内にレンダリング
    クライアントの内部で、コマンドを実行しますnpm run serve あなたのアプリケーションを起動するには.Vueはホットリロードを使用するので、一度だけ、このコマンドを実行する必要がありますあなたのアプリは、変更と保存を行うたびに更新されます.次のような出力が表示されます.

    あなたのアプリケーションを表示するには、ローカルリンクにアクセスします.あなたの簡単なNAVバーで画面を表示する必要があります.

    家VUEコンポーネントは、ユーザーが我々のアプリのロジックと対話するフォームが含まれます.シンプルなデザインを与えましょう.
     <template>
  <div>
    <div class="row">
     <div class="col col-12 offset-0 mt-2">
        <h1 class="jumbotron text-center text-white bg-primary">Create Click-Worthy Links</h1>
      </div>
    </div>

    <div class="col col-8 align-middle mt-5 offset-2">
      <div class="card">
        <div class="card-body">
          <form @submit.prevent="submit(url)">
            <div class="form-group">
              <label for="url">Enter Url</label>
              <textarea type="url" class="form-control" v-model="url" style="height:150px" />
            </div>
            <div class="for-group" v-show="shortUrl">
              <p>
                Short URL: :
                <a :href="shortUrl" class="text-primary">{{shortUrl}}</a>
              </p>
            </div>
            <div class="form-group">
              <button class="btn btn-primary" type="submit">Shorten URl</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
    ここでシンプルなデザインを作りました.双方向データ結合のためのVueのV -モデルの使用に注意してください.これは、データプロパティコールURLでユーザー入力を自動的に保存します.
    Vueの2つの方法のバインドについてお読みくださいhere .
    変更を保存し、ブラウザでそれを見てください.次のようにします.

    今、私たちのサーバーにURLを送信し、短縮URLを受信するロジックを追加しましょう.次のタグをホームに追加します.Vueそれがタグの外にあることを確認してください.
    API呼び出しを行うためにaxiosを使用していることに注意してください.それで、それをインストールしてください.
    npm install axios --save 

    <script>
import axios from "axios";
export default {
  data: () => {
    return {
      url: "",
      shortUrl: "",
    };
  },
  methods: {
    submit: async function (url) {
      try {
        const api = "http://localhost:5000/url";
        const response = await axios.post(api, {
          url,
        });
        this.shortUrl = response.data.shortUrl;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
    ここでは、ユーザーがURLを送信するときに呼び出されるメソッドを送信します.我々は、axiosを使用してサーバーに要求を行います.
    ShortURLデータプロパティは、エラーのためにサーバーから返されたURLで更新し、コンソールにログ出力します.変更内容を保存します.
    クライアントアプリケーションを完了すると、我々は完全に我々のURL短縮アプリをテストする準備が整いました.我々は両方のサーバーとクライアントのアプリケーションを実行する必要があります.
    お使いのサーバーが動作していない場合は、サーバーディレクトリの端末を開き、実行しますnode app.js .
    今すぐブラウザでクライアントアプリケーションを開き、選択の長いURLを選択し、フォームを介してそれを提出し、あなたに返されるURLをクリックします.あなたは元のサイトにリダイレクトする必要があります.
    バム!ちょうどそのように、あなた自身の簡単なURL短縮剤を作成しました.


    我々は正常に簡単なURL短縮を作成しました.APIによって返される短いリンクをクリックするとき、我々は後に来るランダムなストリングを受け入れる我々のサーバーにもう一つの要求をしていますhttp://localhost:5000/パラメータとして.
    その後、ランダムな文字列のデータベースを検索し、それに関連付けられている元のURLにブラウザをリダイレクトします.
    この動画はお気に入りから削除されています.コメントにあなたの考えを残してください.次回まで、考え、学ぶ、作成、繰り返し!
    この記事は役に立つか?



    Read more articles by Taslan at     www.taslangraham.com
    AWS DeepLens Tips
    [React] Clean up Effect