使用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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
党委书记岗位职责
2013/11/24 职场文书
项目合作意向书模板
2014/07/29 职场文书
技术股份合作协议书
2014/10/05 职场文书
2015年元旦标语大全
2014/12/09 职场文书
初中信息技术教学计划
2015/01/22 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
Vue操作Storage本地化存储
2022/04/29 Vue.js