使用next.js开发网址缩短服务的方法

一、网址缩短服务的原理

网址缩短服务，并不是压缩算法。而是把原网址存储在数据库中，用短的参数做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及演示

1、github地址：https://github.com/codetyphon ...

2、演示地址：https://nextshort.vercel.app

总结

到此这篇关于使用next.js开发网址缩短服务的文章就介绍到这了,更多相关next.js开发网址缩短服务内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Next.js实现react服务器端渲染的方法示例

    说明 实现 路由跳转.redux 文件版本 "next": "^4.2.3", "react": "^16.2.0", "react-dom": "^16.2.0" Next.js GitHub 文档 项目源码 使用 Next.js 使用文件体统作为API,可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom 2. package.j

  • 详解使用Next.js构建服务端渲染应用

    next.js简介 最近在学React.js,React官方推荐使用next.js框架作为构建服务端渲染的网站,所以今天来研究一下next.js的使用. next.js作为一款轻量级的应用框架,主要用于构建静态网站和后端渲染网站. 框架特点 使用后端渲染 自动进行代码分割(code splitting),以获得更快的网页加载速度 简洁的前端路由实现 使用webpack进行构建,支持模块热更新(Hot Module Replacement) 可与主流Node服务器进行对接(如express) 可自

  • 详解Next.js页面渲染的优化方案

    在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验,但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题.由于我之前既不知道这个框架的工作原理,自然也就不知道如何去优化它.乘着农历春节前工地活少所以稍微研究一下. 第一个问题:宣称前后台同构的Next.js为何会出现卡顿现象? Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染,

  • Next.js项目实战踩坑指南(笔记)

    Next.js项目实战踩坑指南(笔记)

    前言 github: https://github.com/code-coder/next-mobile-complete-app 已经用Next.js快两个月了,项目已经提测了,这里总结一下开发过程中,以及在部署的时候遇到一些棘手的问题. 疑难杂症 1. 移动端overflow:auto,ios滚动卡顿 解决方案: 主容器增加样式-webkit-overflow-scrolling: touch; 2. dev mode路由跳转后样式丢失 原因:dev下样式根据页面动态加载,浏览器缓存文件st

  • 使用next.js开发网址缩短服务的方法

    一.网址缩短服务的原理 网址缩短服务,并不是压缩算法.而是把原网址存储在数据库中,用短的参数做key,届时取出原始url,并跳转. 因此,短网址最适合用key/value数据库. 那么,短网址的唯一参数,如何生成呢?其实用的就是10进制转62进制. function string10to62(number) { var chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split(''), radix

  • Node.js创建一个Express服务的方法详解

    Node.js创建一个Express服务的方法详解

    本文实例讲述了Node.js创建一个Express服务的方法.分享给大家供大家参考,具体如下: 1.创建一个HttpServer服务端 在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件.首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数.在回调函数内对请求req进行处理,并返回res结果. 利用url的parse方法将req请

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • Node.js开发静态资源服务器

    Node.js开发静态资源服务器

    目录 正文 静态资源服务器 模块化 最后 正文 在09年Node.js出来后,让前端开发人员的开发路线变的不再那么单调,经过这么多年的发展,我们的开发基本已经离不开Node.js,不管是用作于工具类的开发,还是做完服务端的中间层,Node.js都占据了非常重要的地位,今天我们就一起通过原生的js+Node来实现一个简单的静态资源服务,如果你还不了解这方面的知识,那就跟我一起来学习吧! 静态资源服务器 Node.js经过这么多年的发展,已经有了很多很优秀的基础框架或类库,像express.js.K

  • linux环境安装node.js开发环境搭建图文教程

    linux环境安装node.js开发环境搭建图文教程

    Node.js现在有多火,有多重要,就不多说了,这里介绍一下他的开发环境安装,通常情况下,我们都是在window环境进行开发,或者是在mac环境下进行开发,但是我们的项目实际运行的环境一般都是在linux上的,所以我们让我们的开发环境和生产环境能够尽量统一,且能够方便我们开发,一般我们将必要环境安装在服务器上,然后在window上通过xshell,SecureCRTPortable等一些工具连接上去,在window上使用方便IDE软件开发,然后通过ftp将文件同步上去,所以这里就讲一些如何在服务

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • Angular开发实践之服务端渲染

    Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标准的 Angular 应用会执行在浏览器中,它会在 DOM 中渲染页面,以响应用户的操作. 而 Angular Universal 会在服务端通过一个被称为服务端渲染(server-side rendering - SSR)的过程生成静态的应用页面. 它可以生成这些页面,并在浏览器请求时直接用它们给出

  • node.js开发辅助工具nodemon安装与配置详解

    nodemon安装及使用 全局安装 nodemon 包,这样新创建的 Node.js 应用都能使用 Nodemon 运行起来了 npm install -g nodemon 安装完成之后,Nodemon 就可以启动 Express 应用了,先关闭当前正在执行的应用程序,然后再执行命令: nodemon index.js 默认地,nodemon会自动打开index.js.所以,也可以使用如下命令 nodemon 通过 Nodemon 启动应用之后,不管是修改了代码,还是安装了新的 npm 包,No

  • 分享五个Node.js开发的优秀实践 

    目录 1.分层组织代码 2.使用代码压缩 3.学会运用第三方解决方案 4.充分利用程序监控工具 5.保持你的代码整洁且易于复用 代码检查和格式化 代码风格指南 总结 前言: Node.js在全球开发者中非常流行,这种趋势极大地改变了Web开发的面貌.可以说,Node.js在实时Web应用开发中无所不能.使用这种技术并不难,懂得如何更好地构建代码结构,在开发过程中解决遇到的困难和错误,是你真正应该去做的事情. 在这篇文章中,我们列出了5个通用的优秀实践,需要我们在开发过程中牢记于心并尽可能的去实践

  • Ubuntu 16.04 64位中搭建Node.js开发环境教程

    前言 首先说下本文的系统环境是:Ubuntu 16.04 64位,本文内容亲测可用, 大家可以请放心借鉴参考,下面来一起看看详细的步骤. 使用淘宝镜像 淘宝镜像官网是https://npm.taobao.org/ 使用淘宝镜像前请自行安装好 npm 和 node node 和 npm 的安装 node可以在这里下载 本文使用的是官方推荐v4.4.4长期支持版 下载并解压 node-v4.4.4-Linux-x64.tar.xz tar -xJf node-v4.4.4-linux-x64.tar

随机推荐