使用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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
jquery 图片轮换效果
Jul 29 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
document.getElementBy("id")与$("#id")有什么区别
Sep 22 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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
第七节 类的静态成员 [7]
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
JS中style属性
2006/10/11 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
实例分析编写vue组件方法
2019/02/12 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python list转dict示例分享
2014/01/28 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python之list对应元素求和的方法
2018/06/28 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python 19个值得学习的编程技巧
2020/08/15 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
一些网络技术方面的面试题
2014/05/01 面试题
运动会100米解说词
2014/01/23 职场文书
办公室副主任职责范本
2014/03/08 职场文书
药品营销策划方案
2014/06/15 职场文书
党支部活动策划方案
2014/08/18 职场文书
党员对照检查材料
2014/09/22 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
欢迎新生标语2015
2015/07/16 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python