三步帶你開發一個短連結生成平臺
本文由葡萄城技術團隊原創並首發
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
前段時間在開發【葡萄城社群】公眾號時有一個功能是需要用網頁授權認證地址生成二維碼，但類似像下面這樣的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);
})
後期大家可以對一些錯誤異常處理，資料統計等做一些增強，這裡就不做補充了。
下面讓我們啟用應用開始測試吧。
啟動應用並測試
npm start
啟動後，預設的訪問埠為3000，我們首先測試下短連結生成頁，這裡我們post一個名為longUrl的長連結引數，資料物件為：
{"longUrl" : "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/tables/basic-table/purejs"}
成功生成了如下短連結：
http://localhost:3000/iGE6ZlDmh
我們只要通過訪問短連結能正常跳轉至儲存的長連線即可。
這樣就測試通過了，其實程式碼量不大，原理也很簡單。大家如果自己有較短的域名的話，上線後會讓連結變得更短、更美觀，這樣一個屬於我們自己短連結生成平臺就開發完成了。下面附上原始碼，執行npm install 即可自動安裝所有依賴，如果大家有問題，可通過評論區告訴我。
原始碼下載>>