使用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 JSON的解析方式分享
Apr 05 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
laypage分页控件使用实例详解
May 19 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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中使用XML
2006/10/09 PHP
一个PHP的String类代码
2010/04/20 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python程序输出无内容的解决方式
2020/04/09 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
数控专业个人求职信范例
2013/11/29 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
公司放假通知怎么写
2015/04/15 职场文书
村官2015年度工作总结
2015/10/14 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
用python画城市轮播地图
2021/05/28 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers