一、網址縮短服務的原理

網址縮短服務，並不是壓縮演算法。而是把原網址儲存在資料庫中，用短的引數做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。它很短。

二、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;
 }
});

三、github及演示

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

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

總結

到此這篇關於使用next.js開發網址縮短服務的文章就介紹到這了,更多相關next.js開發網址縮短服務內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！