使用next.js开发网址缩短服务的方法


Posted in Javascript onJune 17, 2020

一、网址缩短服务的原理

网址缩短服务,并不是压缩算法。而是把原网址存储在数据库中,用短的参数做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及演示

使用next.js开发网址缩短服务的方法

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

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

总结

到此这篇关于使用next.js开发网址缩短服务的文章就介绍到这了,更多相关next.js开发网址缩短服务内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
vue实现前端分页完整代码
Jun 17 #Javascript
JS实现网站楼层导航效果代码实例
Jun 16 #Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
JS 5种遍历对象的方式
Jun 16 #Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 #Javascript
You might like
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
javascript事件模型代码
2007/07/01 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
岗位明星事迹材料
2014/05/18 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
实验室的标语
2014/06/20 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2015年保险公司工作总结
2015/04/24 职场文书