【HAVENT原創】NodeJS 短網址開發(調用第三方接口)

時間 2019-11-15

標籤 HAVENT原創 nodejs 網址開發調用第三方接口简体版

原文原文鏈接

最近想弄個短網址的示例站點，在網上搜集了一些代碼，都須要數據庫支持，因此只能本身寫個簡單的不須要數據庫支持的（PS:那就只能借調第三方的接口了）。javascript

index.js 啓動文件php

'use strict';

var express = require('express');
var bodyParser = require('body-parser');

/* HH: 增長路由配置 HEAD */
const indexRouter = require('./router');

var app = express();

app.use(express.static('build'));

/* HH: 增長路由配置 BODY */
app.use('/', indexRouter);

app.use(bodyParser.json());
app.listen(8000);

router/index.js 路由主文件css

'use strict';

const express = require('express');
const router = express.Router();

const request = require('request');
const logger = require('../logger');

// 擴展路徑配置
const apiRouter = require('./api');

router.get('/', function (req, res) {
    res.send('hello, express');
});

router.use('/api', apiRouter);


router.get('/:path', function (req, res) {
    var url = 'http://suo.im/' + req.params.path;
    var options = {
        url :  url,
        timeout: 2000,
        followAllRedirects: true
    };
    request(options,
        function(err, res1, body) {
            if (err) logger.error(err);
            if (res1) logger.debug(res1.request.uri.href);
            //if (body) logger.debug(body);

            if (res1 && res1.request && res1.request.uri.href) {
                res.redirect(res1.request.uri.href);
            } else {
                res.send('非法請求路徑: /' + req.params.path);
            }
        }
    );
});

module.exports = router;

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

'use strict';

const express = require('express');
const router = express.Router();

const request = require('request');
const logger = require('../logger');


router.get('/shortUrl/:encodeUrl', function (req, res) {
    var url = req.params.encodeUrl;
    if (url) {
        url = decodeURIComponent(url);
    }
    logger.info(url);

    var url = 'http://suo.im/api.php?url=' + encodeURIComponent(url);
    var options = {
        url :  url,
        json : true
    };
    request(options,
        function(err, res1, body) {
            var domain = req.protocol + '://' + req.headers.host;
            if (err) logger.error(err);
            //if (body) logger.info(body);
            if (domain) logger.debug(domain);
            var shortUrl = body.replace('http://suo.im', domain);
            res.send({
                'shortUrl' : shortUrl
            });
        }
    );
});


router.get('/:path', function (req, res) {
    logger.info(req.params.path);
    res.send('非法請求路徑: /api/' + req.params.path);
});

module.exports = router;

前端訪問靜態頁面 index.html前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>URL Shortener - MY00.COM</title>
  <link href='http://fonts.font.im/css?family=Raleway' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="css/styles.css" rel="stylesheet">
</head>
<body>

  <div class="site-wrapper">

    <div class="site-wrapper-inner">

      <div class="main-container">

        <div class="inner cover">
          <span class="glyphicon glyphicon-link"></span>
          <h1>URL Shortener</h1>
          <h4>os1.cc</h4>

          <div class="row">

            <div class="col-lg-12">
              <div class="input-group input-group-lg">
                <input id="url-field" type="text" class="form-control" placeholder="Paste a link...">
                <span class="input-group-btn">
                  <button class="btn btn-shorten" type="button">SHORTEN</button>
                </span>
              </div>
            </div>

            <div class="col-lg-12">
              <div id="link"></div>
            </div>

          </div>

        </div>

      </div>

    </div>

  </div>


<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
$(function () {
    $('.btn-shorten').click(function () {
        var url = $('#url-field').val();
        if (url) {
            url = '/api/shortUrl/' + encodeURIComponent(url);
            HH.common.ajaxGet(url, function (response) {
                console.log(response);
                if (response.shortUrl) {
                    $('#link').show();
                    $('#link').html(response.shortUrl);
                }
            });
        }
    });
});
</script>

</body>
</html>

前端 common.js 腳本文件java

/**
 * 全局通用模塊
 * @author HAVENT
 **/

var HH = HH || {};

HH.common = {

    ajaxGet: function (url, callback) {
        $.ajax({
            url: url,
            type: 'GET',
            contentType: 'application/json',
            dataType: 'json',
            success: function (response, textStatus, jqXHR) {
                //console.log(response);

                if (callback) callback(response);
            },
            fail: function (response, textStatus, jqXHR) {
                //console.log(response);

                if (callback) callback(response);
            },
            error: function (xhr, textStatus) {
                //console.log(xhr);

                if (callback) callback(xhr);
            }
        });
    },

    ajaxPost: function (url, params, callback) {
        $.ajax({
            url: url,
            type: 'POST',
            data: JSON.stringify(params),
            contentType: 'application/json',
            dataType: 'json',
            success: function (response, textStatus, jqXHR) {
                //console.log(response);

                if (callback) callback(response);
            },
            fail: function (response, textStatus, jqXHR) {
                //console.log(response);

                if (callback) callback(response);
            },
            error: function (xhr, textStatus) {
                //console.log(xhr);

                if (callback) callback(xhr);
            }
        });
    }

};

效果以下：jquery