本文由葡萄城技术团队原创并首发
转载请注明出处:葡萄城官网,葡萄城为开发者提供业余的开发工具、解决方案和服务,赋能开发者。
前端工夫在开发【葡萄城社区】公众号时有一个性能是须要用网页受权认证地址生成二维码,但相似像上面这样的 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 即可主动装置所有依赖,如果大家有问题,可通过评论区通知我。
源码下载 >>