使用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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
vue下拉列表功能实例代码
Apr 08 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
大数据分析用java还是Python
2020/07/06 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
建筑行业的大学生自我评价
2013/12/08 职场文书
超市5.1促销活动
2014/01/15 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014年维修工作总结
2014/11/22 职场文书
初一军训感言
2015/08/01 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
php中pcntl_fork详解
2021/04/01 PHP
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技