三步帶你開發一個短連接生成平臺

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

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

 

前段時間在開發【葡萄城社區】公衆號時有一個功能是須要用網頁受權認證地址生成二維碼，但相似像下面這樣的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必要依賴

1	npm install

同時經過npm安裝咱們須要用到的mongoose和shortid和body-parser

123	npm install mongoose npm install shortid npm install body-parser

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

• 在這個應用中，咱們使用了mongodb，之因此選擇它是由於執行高效且低開銷，因此執行起來也很高效，不過若是使用其餘數據庫也是沒問題的。這裏的mongoose就是npm的一個包，主要是爲程序提供鏈接mongodb並增刪查改的功能。

• 經過使用shortid能夠生成一個指定字符不重複的編碼，便於咱們生成相似xxx.com/ngTsfdgh 相似紅字部分的編碼。

• 因爲咱們生成短連接部分的api使用的是post方法，使用body-parser能夠多擴展一種body編碼類型解析能力。

首先設置MongoDB的鏈接信息

123456789101112

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");

數據庫模型定義

由於咱們的對應關係是須要經過短連接查詢長鏈接，因此這裏咱們主要以存儲短連接和長鏈接爲主，另外你們也能夠根據本身須要添加連接點擊統計之類的字段，方便後期統計。　　

123456789

var mongoose = require('mongoose');var Schema = mongoose.Schema; var urlSchema = new Schema({  shortUrl: String,  longUrl: String}); module.exports = mongoose.model('UrlTable', urlSchema);

定義express路由

由於這個應用咱們只有生成和Redirect兩個功能，因此這裏只有兩個頁面便可完成全部工做。　　

1234	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);

 })

後期你們能夠對一些錯誤異常處理，數據統計等作一些加強，這裏就不作補充了。

下面讓咱們啓用應用開始測試吧。　　

啓動應用並測試

1

npm start

啓動後，默認的訪問端口爲3000，咱們首先測試下短連接生成頁，這裏咱們post一個名爲longUrl的長連接參數，數據對象爲：

{"longUrl" : "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/tables/basic-table/purejs"}

　　

成功升成了以下短連接：

http://localhost:3000/iGE6ZlDmh

咱們只要經過訪問短連接能正常跳轉至保存的長鏈接便可。

　　

這樣就測試經過了，其實代碼量不大，原理也很簡單。你們若是本身有較短的域名的話，上線後會讓連接變得更短、更美觀，這樣一個屬於咱們本身短連接生成平臺就開發完成了。下面附上源碼，執行npm install 便可自動安裝全部依賴，若是你們有問題，可經過評論區告訴我。

源碼下載>>