使用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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
javascrip关于继承的小例子
May 10 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
Jquery $when done then的用法详解
May 20 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
浅谈php命令行用法
2015/02/04 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
js 操作css实现代码
2009/06/11 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
vue生命周期的探索
2019/04/03 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
对python的输出和输出格式详解
2018/12/08 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
小区门卫工作职责
2013/12/14 职场文书
单位领导证婚词
2014/01/14 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
整改报告格式
2014/11/06 职场文书
公务员年度个人总结
2015/02/12 职场文书
python not运算符的实例用法
2021/06/30 Python