关于前端:三步带你开发一个短链接生成平台

本文由葡萄城技术团队原创并首发

转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。

前端工夫在开发【葡萄城社区】公众号时有一个性能是须要用网页受权认证地址生成二维码，但相似像上面这样的 Url 即使是看也感觉很头疼了 https://open.weixin.qq.com/co…_uri=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect

用这个地址生成的二维码也是稀稀拉拉，虽不影响微信长按扫码，一旦二维码尺寸缩一点点，图片马上就会糊掉，导致摄像头间接扫码会难以辨认。

那这种状况下，咱们天然就会想到如果应用短链接缩小 url 的字符，生成的码天然就会变得容易辨认了，同时还会使 url 更好看且易于转发。当初市面上可用的就是微博的 t.cn 和一些第三方的生成短链接工具，但这两类工具都有一些应用上的问题，例如：t.cn 当初的规定是会呈现一个直达页不会间接跳转，而第三方的工具因为是一个公共平台，有时可能会因一些不良信息导致整个平台无法访问。

那与其这样，不如咱们本人来实现一个短链接平台吧，实现一个短链接平台原理上也非常简单，搞定两局部就行了：1. 保留长短链接的对应关系。2. 通过短链接查问长连贯并重定向。

为了高效，我这应用的是 node 和 mongodb，上面咱们就来开始入手吧。

首先，咱们先创立一个 express 工程

express -e demo

change directory: > cd demo install dependencies: > npm install run the app: > SET DEBUG=demo:* & npm start

而后进入 demo 目录并装置 express 必要依赖

npm install

同时通过 npm 装置咱们须要用到的 mongoose 和 shortid 和 body-parser

npm install mongoose
npm install shortid
npm install body-parser

上面别离对应用到的这三个包简略阐明一下：

• 在这个利用中，咱们应用了 mongodb，之所以抉择它是因为执行高效且低开销，所以执行起来也很高效，不过如果应用其余数据库也是没问题的。这里的 mongoose 就是 npm 的一个包，次要是为程序提供连贯 mongodb 并增删查改的性能。
• 通过应用 shortid 能够生成一个指定字符不反复的编码，便于咱们生成相似 xxx.com/ngTsfdgh 相似红字局部的编码。
• 因为咱们生成短链接局部的 api 应用的是 post 办法，应用 body-parser 能够多扩大一种 body 编码类型解析能力。

首先设置 MongoDB 的连贯信息

module.exports = {

mongo\_base\_connection_url: 'mongodb://localhost:27017',
mongo_db: 'mongodb://localhost:27017/shorturl',
mongo_options: {
    autoReconnect: true,
    keepAlive: true,
    reconnectTries: 50,
    reconnectInterval: 1000,
    connectTimeoutMS: 5000000,
}

}
console.log(“Connection local mongo db”);

数据库模型定义

因为咱们的对应关系是须要通过短链接查问长连贯，所以这里咱们次要以存储短链接和长连贯为主，另外大家也能够依据本人须要增加链接点击统计之类的字段，不便前期统计。

var mongoose = require(‘mongoose’);
var Schema = mongoose.Schema;

var urlSchema = new Schema({
shortUrl: String,
longUrl: String
});

module.exports = mongoose.model(‘UrlTable’, urlSchema);

定义 express 路由

因为这个利用咱们只有生成和 Redirect 两个性能，所以这里只有两个页面即可实现所有工作。

var index = require(‘./routes/index’);
var url = require(‘./routes/url’);
app.use(‘/’, index);
app.use(‘/url’, url);

生成短链接页面

const express = require(“express”);
const router = express.Router();
const shortId = require(‘shortid’);
const UrlTable = require(‘../models/urltable’);
const mongoose = require(‘mongoose’);
var setup = require(‘../dbconfig/db’);

router.post(‘/’, function(req, res, next) {

var params = req.body;
var url = params.longUrl;

shortId.characters(‘ 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ^*’)

var shortid = shortId.generate();
var objurl = {shortUrl: shortid, longUrl: url};
mongoose.connect(setup.mongo\_db, setup.mongo\_options);
UrlTable.create(objurl, function (err, objurl) {//if (err) console.log(err);
  res.send("http://localhost:3000/" + shortid);
});
return;

});

指定生成 shortId 字符的范畴并生成：

shortId.characters(‘0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ’)

var shortid = shortId.generate();

为数据库构建符合要求的数据模型：

var objurl = {shortUrl: shortid, longUrl: url};

最初，连贯数据库并保留后将短链接后果返回客户端：

mongoose.connect(setup.mongo_db, setup.mongo_options);

    UrlTable.create(objurl, function (err, objurl) {

      //if (err) console.log(err);

      res.send(“http://localhost:3000/” + shortid);

});

短链接跳转页面

const express = require(“express”);
const router = express.Router();
const UrlTable = require(‘../models/urltable’);
const mongoose = require(‘mongoose’);
var setup = require(‘../dbconfig/db’);

router.get(‘/:shortUrl’, function (req, res, next) {

var shortUrl = req.params.shortUrl;
mongoose.connect(setup.mongo\_db, setup.mongo\_options);
UrlTable.findOne({shortUrl:shortUrl}).then((result) => {
   // 待增加错误处理
res.redirect(result.longUrl);
})

});

module.exports = router;

这个页面为了便于疾速跳转，咱们就应用 get 接管参数，这个页面性能就很简略了，接参查问并跳转。

接管短链接码

var shortUrl = req.params.shortUrl;

连贯数据库查问并跳转

mongoose.connect(setup.mongo_db, setup.mongo_options);

    UrlTable.findOne({shortUrl:shortUrl}).then((result) => {

           // 待增加错误处理

      res.redirect(result.longUrl);

 })

前期大家能够对一些谬误异样解决，数据统计等做一些加强，这里就不做补充了。

上面让咱们启用利用开始测试吧。

启动利用并测试

npm start

启动后，默认的拜访端口为 3000，咱们首先测试下短链接生成页，这里咱们 post 一个名为 longUrl 的长链接参数，数据对象为：

{“longUrl” : “https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/tables/basic-table/purejs”}

胜利升成了如下短链接：

http://localhost:3000/iGE6ZlDmh

咱们只有通过拜访短链接能失常跳转至保留的长连贯即可。

这样就测试通过了，其实代码量不大，原理也很简略。大家如果本人有较短的域名的话，上线后会让链接变得更短、更好看，这样一个属于咱们本人短链接生成平台就开发实现了。上面附上源码，执行 npm install 即可主动装置所有依赖，如果大家有问题，可通过评论区通知我。

源码下载 >>