使用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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
详解js前端代码异常监控
Jan 11 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 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往windows中添加用户
2006/12/06 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python函数返回不定数量的值方法
2019/01/22 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
质检部部长职责
2013/12/16 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Nginx配置之禁止指定IP访问
2022/05/02 Servers