三步带你开发一个短链接生成平台
<div><blockquote>
<p>本文由葡萄城技术团队原创并首发</p>
<p>转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。</p>
</blockquote>
</div>
<p> </p>
<p>前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二维码，但类似像下面这样的Url 即便是看也觉得很头疼了https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxxxxxxxxxxx&redirect_uri=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect</p>
<p>用这个地址生成的二维码也是密密麻麻，虽不影响微信长按扫码，一旦二维码尺寸缩一点点，图片马上就会糊掉，导致摄像头直接扫码会难以识别。</p>
<p class="il">那这种情况下， 我们自然就会想到如果使用短链接减少url的字符，生成的码自然就会变得容易识别了，同时还会使url更美观且易于转发。现在市面上可用的就是微博的t.cn和一些第三方的生成短链接工具，但这两类工具都有一些使用上的问题，例如：t.cn现在的规则是会出现一个中转页不会直接跳转，而第三方的工具因为是一个公共平台，有时可能会因一些不良信息导致整个平台无法访问。</p>
<p class="il">那与其这样，不如我们自己来实现一个短链接平台吧，实现一个短链接平台原理上也非常简单，搞定两部分就行了：1.保存长短链接的对应关系。2.通过短链接查询长连接并重定向。</p>
<p class="il">为了高效，我这使用的是node和mongodb，下面我们就来开始动手吧。</p>
<p>首先，我们先创建一个express工程</p>
<div class="cnblogs_code">
<pre>express -<span style="color: rgba(0, 0, 0, 1)">e demo
change directory:
</span>><span style="color: rgba(0, 0, 0, 1)"> cd demo
</span><span style="color: rgba(0, 0, 255, 1)">install</span><span style="color: rgba(0, 0, 0, 1)"> dependencies:
</span>> npm <span style="color: rgba(0, 0, 255, 1)">install</span><span style="color: rgba(0, 0, 0, 1)">
run the app:
</span>> SET DEBUG=demo:* & npm start</pre>
</div>
<p>然后进入demo目录并安装express必要依赖</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">npm install
</pre>
</div>
<p class="il">同时通过npm安装我们需要用到的mongoose和shortid和body-parser</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">npm install mongoose
npm install shortid
npm install body-parser
</pre>
</div>
<p class="il">下面分别对使用到的这三个包简单说明一下：</p>
<ul>
<li class="il">在这个应用中，我们使用了mongodb，之所以选择它是因为执行高效且低开销，所以执行起来也很高效，不过如果使用其他数据库也是没问题的。这里的<strong>mongoose</strong>就是npm的一个包，主要是为程序提供连接mongodb并增删查改的功能。</li>
<li class="il">通过使用<strong>shortid</strong>可以生成一个指定字符不重复的编码，便于我们生成类似xxx.com/<strong><span style="color: rgba(255, 0, 0, 1)">ngTsfdgh</span></strong> 类似红字部分的编码。</li>
<li class="il">由于我们生成短链接部分的api使用的是post方法，使用<strong>body-parser</strong>可以多扩展一种body编码类型解析能力。</li>
</ul>
<h2>首先设置MongoDB的连接信息</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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");
</pre>
</div>
<h2>数据库模型定义</h2>
<p>因为我们的对应关系是需要通过短链接查询长连接，所以这里我们主要以存储短链接和长连接为主，另外大家也可以根据自己需要添加链接点击统计之类的字段，方便后期统计。 </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var urlSchema = new Schema({
shortUrl: String,
longUrl: String
});
module.exports = mongoose.model('UrlTable', urlSchema);
</pre>
</div>
<h2>定义<span lang="EN-US">express路由</span></h2>
<p>因为这个应用我们只有生成和Redirect两个功能，所以这里只有两个页面即可完成所有工作。 </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var index = require('./routes/index');
var url = require('./routes/url');
app.use('/', index);
app.use('/url', url);
</pre>
</div>
<h4>生成短链接页面</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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;
});
</pre>
</div>
<p class="il">指定生成shortId字符的范围并生成：</p>
<p class="il">shortId.characters('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')</p>
<p class="il">var shortid = shortId.generate();</p>
<p class="il">为数据库构建符合要求的数据模型：</p>
<p class="il">var objurl = { shortUrl: shortid, longUrl: url};</p>
<p class="il">最后，连接数据库并保存后将短链接结果返回客户端：</p>
<p class="il">mongoose.connect(setup.mongo_db, setup.mongo_options);</p>
<p class="il"> UrlTable.create(objurl, function (err, objurl) {</p>
<p class="il"> //if (err) console.log(err);</p>
<p class="il"> res.send("http://localhost:3000/" + shortid);</p>
<p class="il">});</p>
<h4>短链接跳转页面</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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;
</pre>
</div>
<p class="il">这个页面为了便于快速跳转，我们就使用get接收参数，这个页面功能就很简单了，接参查询并跳转。</p>
<p class="il">接收短链接码</p>
<p class="il">var shortUrl = req.params.shortUrl;</p>
<p class="il">连接数据库查询并跳转</p>
<p class="il">mongoose.connect(setup.mongo_db, setup.mongo_options);</p>
<p class="il"> UrlTable.findOne({ shortUrl:shortUrl }).then((result) => {</p>
<p class="il"> //待添加错误处理</p>
<p class="il"> res.redirect(result.longUrl);</p>
<p class="il"> })</p>
<p class="il">后期大家可以对一些错误异常处理，数据统计等做一些增强，这里就不做补充了。</p>
<p>下面让我们启用应用开始测试吧。 </p>
<h2>启动应用并测试</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">npm start
</pre>
</div>
<p class="il">启动后，默认的访问端口为3000，我们首先测试下短链接生成页，这里我们post一个名为longUrl的长链接参数，数据对象为：</p>
<p class="il">{"longUrl" : "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/tables/basic-table/purejs"}</p>
<p><img src="https://img2020.cnblogs.com/blog/139239/202009/139239-20200925091848554-725498908.gif" alt="" loading="lazy"> </p>
<p class="il">成功生成了如下短链接：</p>
<p class="il">http://localhost:3000/iGE6ZlDmh</p>
<p class="il">我们只要通过访问短链接能正常跳转至保存的长连接即可。</p>
<p><img src="https://img2020.cnblogs.com/blog/139239/202009/139239-20200925091915163-1190123426.gif" alt="" loading="lazy"> </p>
<p class="il">这样就测试通过了，其实代码量不大，原理也很简单。大家如果自己有较短的域名的话，上线后会让链接变得更短、更美观，这样一个属于我们自己短链接生成平台就开发完成了。下面附上源码，执行npm install 即可自动安装所有依赖，如果大家有问题，可通过评论区告诉我。</p>
<p>源码下载>> </p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<br>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网</p>
<!--p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解企业级低代码开发平台，请前往活字格
</p><p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件</p>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解嵌入式的商业智能和报表软件，请前往Wyn Enterprise
</p-->
<br><br><br>
来源：https://www.cnblogs.com/powertoolsteam/p/shorturlgenerator.html
頁:
[1]