使用next.js開發網址縮短服務

1、網址縮短服務的原理

網址縮短服務，並非壓縮算法。而是把原網址存儲在數據庫中，用短的參數作key，屆時取出原始url，並跳轉。

所以，短網址最適合用key/value數據庫。

那麼，短網址的惟一參數，如何生成呢？其實用的就是10進制轉62進制。

function string10to62(number) {
    var chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split(''),
      radix = chars.length,
      qutient = +number,
      arr = [];
    do {
      let mod = qutient % radix;
      qutient = (qutient - mod) / radix;
      arr.unshift(chars[mod]);
    } while (qutient);
    return arr.join('');
}

相應地，每次生成後，都要讓一個10進制自增，這樣，每次就能根據惟一的10進制生成惟一的62進制。

爲何用10進制轉62進制呢？

由於，10進制的100000000轉爲62進制，是6LAze。它很短。

2、next.js的動態路由如何得到參數

創建文件：pages/[slug].js

注意，該文件名由括號組成，表明是變量。這樣，就能夠經過http://ip/xxx 的形式，獲得參數xxx。

關鍵代碼：

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;

獲得slug後，去數據庫裏找到並跳轉便可：

db.findOne({ slug: slug }, function (err, doc) {
    if(doc!=null){
        window.location.href=doc.url;
    }
});

3、github及演示

一、github地址：https://github.com/codetyphon...

二、演示地址：https://nextshort.vercel.app