devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【HAVENT原创】NodeJS 短网址开发(调用第三方接口)

作者：很楠不爱3 | 2024-02-08 12:10:51

赞

踩

node调第三方接口原生实现

为什么80%的码农都做不了架构师？>>>   hot3.png

最近想弄个短网址的示例站点，在网上搜集了一些代码，都需要数据库支持，所以只能自己写个简单的不需要数据库支持的（PS:那就只能借调第三方的接口了）。

index.js 启动文件

  1. 'use strict';
  2.  
  3. var express = require('express');
  4. var bodyParser = require('body-parser');
  5.  
  6. /* HH: 增加路由配置 HEAD */
  7. const indexRouter = require('./router');
  8.  
  9. var app = express();
  10.  
  11. app.use(express.static('build'));
  12.  
  13. /* HH: 增加路由配置 BODY */
  14. app.use('/', indexRouter);
  15.  
  16. app.use(bodyParser.json());
  17. app.listen(8000);

 

router/index.js 路由主文件

  1. 'use strict';
  2.  
  3. const express = require('express');
  4. const router = express.Router();
  5.  
  6. const request = require('request');
  7. const logger = require('../logger');
  8.  
  9. // 扩展路径配置
  10. const apiRouter = require('./api');
  11.  
  12. router.get('/', function (req, res) {
  13.     res.send('hello, express');
  14. });
  15.  
  16. router.use('/api', apiRouter);
  17.  
  18.  
  19. router.get('/:path', function (req, res) {
  20.     var url = 'http://suo.im/' + req.params.path;
  21.     var options = {
  22.         url :  url,
  23.         timeout: 2000,
  24.         followAllRedirects: true
  25.     };
  26.     request(options,
  27.         function(err, res1, body) {
  28.             if (err) logger.error(err);
  29.             if (res1) logger.debug(res1.request.uri.href);
  30.             //if (body) logger.debug(body);
  31.  
  32.             if (res1 && res1.request && res1.request.uri.href) {
  33.                 res.redirect(res1.request.uri.href);
  34.             } else {
  35.                 res.send('非法请求路径: /' + req.params.path);
  36.             }
  37.         }
  38.     );
  39. });
  40.  
  41. module.exports = router;

 

router/api.js 路由 api 接口文件

  1. 'use strict';
  2.  
  3. const express = require('express');
  4. const router = express.Router();
  5.  
  6. const request = require('request');
  7. const logger = require('../logger');
  8.  
  9.  
  10. router.get('/shortUrl/:encodeUrl', function (req, res) {
  11.     var url = req.params.encodeUrl;
  12.     if (url) {
  13.         url = decodeURIComponent(url);
  14.     }
  15.     logger.info(url);
  16.  
  17.     var url = 'http://suo.im/api.php?url=' + encodeURIComponent(url);
  18.     var options = {
  19.         url :  url,
  20.         json : true
  21.     };
  22.     request(options,
  23.         function(err, res1, body) {
  24.             var domain = req.protocol + '://' + req.headers.host;
  25.             if (err) logger.error(err);
  26.             //if (body) logger.info(body);
  27.             if (domain) logger.debug(domain);
  28.             var shortUrl = body.replace('http://suo.im', domain);
  29.             res.send({
  30.                 'shortUrl' : shortUrl
  31.             });
  32.         }
  33.     );
  34. });
  35.  
  36.  
  37. router.get('/:path', function (req, res) {
  38.     logger.info(req.params.path);
  39.     res.send('非法请求路径: /api/' + req.params.path);
  40. });
  41.  
  42. module.exports = router;

 

前端访问静态页面 index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.   <title>URL Shortener - MY00.COM</title>
  9.   <link href='http://fonts.font.im/css?family=Raleway' rel='stylesheet' type='text/css'>
  10.   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  11.   <link href="css/styles.css" rel="stylesheet">
  12. </head>
  13. <body>
  14.  
  15.   <div class="site-wrapper">
  16.  
  17.     <div class="site-wrapper-inner">
  18.  
  19.       <div class="main-container">
  20.  
  21.         <div class="inner cover">
  22.           <span class="glyphicon glyphicon-link"></span>
  23.           <h1>URL Shortener</h1>
  24.           <h4>os1.cc</h4>
  25.  
  26.           <div class="row">
  27.  
  28.             <div class="col-lg-12">
  29.               <div class="input-group input-group-lg">
  30.                 <input id="url-field" type="text" class="form-control" placeholder="Paste a link...">
  31.                 <span class="input-group-btn">
  32.                   <button class="btn btn-shorten" type="button">SHORTEN</button>
  33.                 </span>
  34.               </div>
  35.             </div>
  36.  
  37.             <div class="col-lg-12">
  38.               <div id="link"></div>
  39.             </div>
  40.  
  41.           </div>
  42.  
  43.         </div>
  44.  
  45.       </div>
  46.  
  47.     </div>
  48.  
  49.   </div>
  50.  
  51.  
  52. <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  53. <script src="js/common.js"></script>
  54. <script type="text/javascript">
  55. $(function () {
  56.     $('.btn-shorten').click(function () {
  57.         var url = $('#url-field').val();
  58.         if (url) {
  59.             url = '/api/shortUrl/' + encodeURIComponent(url);
  60.             HH.common.ajaxGet(url, function (response) {
  61.                 console.log(response);
  62.                 if (response.shortUrl) {
  63.                     $('#link').show();
  64.                     $('#link').html(response.shortUrl);
  65.                 }
  66.             });
  67.         }
  68.     });
  69. });
  70. </script>
  71.  
  72. </body>
  73. </html>

 

前端 common.js 脚本文件

  1. /**
  2.  * 全局通用模块
  3.  * @author HAVENT
  4.  **/
  5.  
  6. var HH = HH || {};
  7.  
  8. HH.common = {
  9.  
  10.     ajaxGet: function (url, callback) {
  11.         $.ajax({
  12.             url: url,
  13.             type: 'GET',
  14.             contentType: 'application/json',
  15.             dataType: 'json',
  16.             success: function (response, textStatus, jqXHR) {
  17.                 //console.log(response);
  18.  
  19.                 if (callback) callback(response);
  20.             },
  21.             fail: function (response, textStatus, jqXHR) {
  22.                 //console.log(response);
  23.  
  24.                 if (callback) callback(response);
  25.             },
  26.             error: function (xhr, textStatus) {
  27.                 //console.log(xhr);
  28.  
  29.                 if (callback) callback(xhr);
  30.             }
  31.         });
  32.     },
  33.  
  34.     ajaxPost: function (url, params, callback) {
  35.         $.ajax({
  36.             url: url,
  37.             type: 'POST',
  38.             data: JSON.stringify(params),
  39.             contentType: 'application/json',
  40.             dataType: 'json',
  41.             success: function (response, textStatus, jqXHR) {
  42.                 //console.log(response);
  43.  
  44.                 if (callback) callback(response);
  45.             },
  46.             fail: function (response, textStatus, jqXHR) {
  47.                 //console.log(response);
  48.  
  49.                 if (callback) callback(response);
  50.             },
  51.             error: function (xhr, textStatus) {
  52.                 //console.log(xhr);
  53.  
  54.                 if (callback) callback(xhr);
  55.             }
  56.         });
  57.     }
  58.  
  59. };

 

效果如下：

3396fc8915866f09c967b958f5dd001be62.jpg

转载于:https://my.oschina.net/u/943746/blog/1859652

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/69036
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号