使用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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
了解一点js的Eval函数
Jul 26 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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 获取远程网页内容的函数
2009/09/08 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
django的model操作汇整详解
2019/07/26 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python 实现二维列表转置
2019/12/02 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
军训心得体会
2013/12/31 职场文书
公司员工离职证明书
2014/10/04 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Java中try catch处理异常示例
2021/12/06 Java/Android