使用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的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
vue 实现tab切换保持数据状态
Jul 21 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php导出excel格式数据问题
2014/03/11 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
使用python实现ANN
2017/12/20 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python实现飞机大战小游戏
2019/11/08 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
企业文化口号
2014/06/12 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
工资证明格式模板
2015/06/12 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL