使用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实现 在光标处插入指定内容
May 25 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php 启动报错如何解决
2014/01/17 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JsRender实用入门教程
2014/10/31 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
js轮播图之旋转木马效果
2020/10/13 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python 复平面绘图实例
2019/11/21 Python
Python使用re模块验证危险字符
2020/05/21 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
高级电工工作职责
2013/11/21 职场文书
外企求职信范文分享
2013/12/31 职场文书
安全资金保障制度
2014/01/23 职场文书
酒店经理职责
2014/01/30 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
会计试用期自我评价
2015/03/10 职场文书