使用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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Node.js的特点详解
Feb 03 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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文本数据库的搜索方法
2006/10/09 PHP
高亮度显示php源代码
2006/10/09 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
屏蔽script注入小例子
2013/11/12 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
pygame播放音乐的方法
2015/05/19 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
详解Python如何生成词云的方法
2018/06/01 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python发展史及网络爬虫
2019/06/19 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 调整图片亮度的示例
2020/12/03 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
教师演讲稿大全
2014/05/16 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
地道战观后感2000字
2015/06/04 职场文书
运动会5000米加油稿
2015/07/21 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang