使用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 相关文章推荐
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
js随机生成一个验证码
Jun 01 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
js实现搜索栏效果
Nov 16 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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
php中几种常见安全设置详解
2010/04/06 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php格式化时间戳
2016/12/17 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
javascript实现下拉菜单效果
2021/02/09 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python tornado微信开发入门代码
2018/08/24 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Django之路由层的实现
2019/09/09 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python中私有属性的定义方式
2020/03/05 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
抽象方法、抽象类怎样声明
2014/10/25 面试题
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
司机辞职报告范文
2014/01/20 职场文书
运动会开幕式解说词
2014/02/05 职场文书
环保标语口号
2014/06/13 职场文书
合作与交流自我评价
2015/03/09 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书