使用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设置元素的readonly和disabled的写法
Sep 22 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
js实现计算器功能
Aug 10 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数组的一些常见操作汇总
2011/07/17 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
javascript生成大小写字母
2015/07/03 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
js实现一个简易计算器
2020/03/30 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
js实现时钟定时器
2020/03/26 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
python中pygame模块用法实例
2014/10/09 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Python之变量类型和if判断方式
2020/05/05 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
params有什么用
2016/03/01 面试题
Java基础知识面试题
2014/03/25 面试题
培训心得体会
2013/12/29 职场文书
高中运动会广播稿
2014/01/21 职场文书
迟到检讨书
2015/01/26 职场文书
体育个人工作总结
2015/02/09 职场文书
德能勤绩工作总结
2015/08/11 职场文书