三步帶你開發一個短鏈接生成平台

本文轉載自查看原文 2020-09-25 09:23 2751 工具使用/ 經驗分享/ 前端知識/ 技術解密

本文由葡萄城技術團隊原創並首發

轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

前段時間在開發【葡萄城社區】公眾號時有一個功能是需要用網頁授權認證地址生成二維碼，但類似像下面這樣的Url 即便是看也覺得很頭疼了https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxxxxxxxxxxx&redirect_uri=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect

用這個地址生成的二維碼也是密密麻麻，雖不影響微信長按掃碼，一旦二維碼尺寸縮一點點，圖片馬上就會糊掉，導致攝像頭直接掃碼會難以識別。

那這種情況下，我們自然就會想到如果使用短鏈接減少url的字符，生成的碼自然就會變得容易識別了，同時還會使url更美觀且易於轉發。現在市面上可用的就是微博的t.cn和一些第三方的生成短鏈接工具，但這兩類工具都有一些使用上的問題，例如：t.cn現在的規則是會出現一個中轉頁不會直接跳轉，而第三方的工具因為是一個公共平台，有時可能會因一些不良信息導致整個平台無法訪問。

那與其這樣，不如我們自己來實現一個短鏈接平台吧，實現一個短鏈接平台原理上也非常簡單，搞定兩部分就行了：1.保存長短鏈接的對應關系。2.通過短鏈接查詢長連接並重定向。

為了高效，我這使用的是node和mongodb，下面我們就來開始動手吧。

首先，我們先創建一個express工程

express -e demo

   change directory:
     > cd demo

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=demo:* & npm start

然后進入demo目錄並安裝express必要依賴

npm install

同時通過npm安裝我們需要用到的mongoose和shortid和body-parser

npm install mongoose 
npm install shortid
npm install body-parser

下面分別對使用到的這三個包簡單說明一下：

在這個應用中，我們使用了mongodb，之所以選擇它是因為執行高效且低開銷，所以執行起來也很高效，不過如果使用其他數據庫也是沒問題的。這里的mongoose就是npm的一個包，主要是為程序提供連接mongodb並增刪查改的功能。
通過使用shortid可以生成一個指定字符不重復的編碼，便於我們生成類似xxx.com/ngTsfdgh 類似紅字部分的編碼。
由於我們生成短鏈接部分的api使用的是post方法，使用body-parser可以多擴展一種body編碼類型解析能力。

首先設置MongoDB的連接信息

module.exports = {
    mongo_base_connection_url: 'mongodb://localhost:27017',
    mongo_db: 'mongodb://localhost:27017/shorturl',
    mongo_options: {
        autoReconnect: true,
        keepAlive: true,
        reconnectTries: 50,
        reconnectInterval: 1000,
        connectTimeoutMS: 5000000,
    }
}
console.log("Connection local mongo db");

數據庫模型定義

因為我們的對應關系是需要通過短鏈接查詢長連接，所以這里我們主要以存儲短鏈接和長連接為主，另外大家也可以根據自己需要添加鏈接點擊統計之類的字段，方便后期統計。　　

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var urlSchema = new Schema({
  shortUrl: String,
  longUrl: String
});

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

定義express路由

因為這個應用我們只有生成和Redirect兩個功能，所以這里只有兩個頁面即可完成所有工作。　　

var index = require('./routes/index');
var url = require('./routes/url');
app.use('/', index);
app.use('/url', url);

生成短鏈接頁面

const express = require("express");
const router = express.Router();
const shortId = require('shortid');
const UrlTable = require('../models/urltable');
const mongoose = require('mongoose');
var setup = require('../dbconfig/db');

router.post('/', function(req, res, next) {
    var params = req.body;
    var url = params.longUrl;
shortId.characters(' 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ^*')
    var shortid = shortId.generate();
    var objurl = { shortUrl: shortid, longUrl: url};
    mongoose.connect(setup.mongo_db, setup.mongo_options);
    UrlTable.create(objurl, function (err, objurl) {
      //if (err) console.log(err);
      res.send("http://localhost:3000/" + shortid);
    });
    return;
});

指定生成shortId字符的范圍並生成：

shortId.characters('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')

var shortid = shortId.generate();

為數據庫構建符合要求的數據模型：

var objurl = { shortUrl: shortid, longUrl: url};

最后，連接數據庫並保存后將短鏈接結果返回客戶端：

mongoose.connect(setup.mongo_db, setup.mongo_options);

UrlTable.create(objurl, function (err, objurl) {

//if (err) console.log(err);

res.send("http://localhost:3000/" + shortid);

});

短鏈接跳轉頁面

const express = require("express");
const router = express.Router();
const UrlTable = require('../models/urltable');
const mongoose = require('mongoose');
var setup = require('../dbconfig/db');

router.get('/:shortUrl', function (req, res, next) {
    var shortUrl = req.params.shortUrl;
    mongoose.connect(setup.mongo_db, setup.mongo_options);
    UrlTable.findOne({ shortUrl:shortUrl }).then((result) => {
       //待添加錯誤處理
	res.redirect(result.longUrl);
    })
});

module.exports = router;

這個頁面為了便於快速跳轉，我們就使用get接收參數，這個頁面功能就很簡單了，接參查詢並跳轉。

接收短鏈接碼

var shortUrl = req.params.shortUrl;

連接數據庫查詢並跳轉

mongoose.connect(setup.mongo_db, setup.mongo_options);

UrlTable.findOne({ shortUrl:shortUrl }).then((result) => {

//待添加錯誤處理

res.redirect(result.longUrl);

})

后期大家可以對一些錯誤異常處理，數據統計等做一些增強，這里就不做補充了。

下面讓我們啟用應用開始測試吧。　　