使用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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
JavaScript 中的六种循环方法
Jan 06 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多进程模拟并发事务产生的问题小结
2018/12/07 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
解决python flask中config配置管理的问题
2019/07/26 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
pygame实现五子棋游戏
2019/10/29 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
详解Python yaml模块
2020/09/23 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
《刷子李》教学反思
2016/02/20 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
python实现手机推送 代码也就10行左右
2022/04/12 Python