使用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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
js实现文章目录索引导航(table of content)
May 10 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
phpfpm的作用和用法
2019/10/10 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python 从attribute到property详解
2020/03/05 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
自我鉴定四大框架
2014/01/17 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
个园导游词
2015/02/04 职场文书
永不妥协观后感
2015/06/10 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
logback如何自定义日志存储
2021/08/30 Java/Android