【NodeJS學習小案例】DNS域名解析 <四>

時間 2019-12-06

原文原文鏈接

在上一節中咱們在瀏覽器打開了咱們的案例，並輸入網址點擊查詢獲得對應的 IP ：
javascript

可是當咱們點擊重置時咱們會發現只是輸入框中的數據清空了，可是下面的 IP 地址並無消失，因此咱們要進行一些修改。打開 index.html ，在提交表單的JavaScript代碼下面添加：css

$('button[type=reset]').click(function() {
    $('#check_result').html('');
});

這段代碼就是當咱們點擊重置按鈕時將下面的 id 屬性爲 check_result 的div 內容設置爲空。html

整個 index.html 的完整的代碼以下：java

<!DOCTYPE html>
<html>
    <head>
        <title>DNS查詢</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <style type="text/css">
            .container{
                margin-top: 5em;
            }
            #check_result{
                color: #CD46A2;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1>DNS查詢工具</h1>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal" action="/parse" method="post">
                                <div class="form-group">
                                    <label for="search_dns" class="col-sm-3 control-label">查詢DNS: </label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="search_dns" name="search_dns">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-8">
                                        <button type="submit" class="btn btn-primary">查詢</button>
                                        <button type="reset" class="btn btn-default">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer">                          
                            <div id='check_result'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('form').submit(function () {
                    var $this = $(this),
                        search_dns = $('#search_dns').val(),
                        url = $this.attr('action');
                    if ( search_dns ) {
                        $.get(url,{search_dns: search_dns}, function (res) {
                            var res = JSON.parse(res);
                            $('#check_result').html('IP 地址: ' + res.addresses);
                        })
                    }else{
                        alert('請輸入域名!');
                    }
                    return false;
                });
                $('button[type=reset]').click(function() {
                    $('#check_result').html('');
                });
            });
        </script>
    </body>
</html>

你們可能還會遇到一個問題，當輸入的是如 blog.helloarron.com、www.helloarron.com 這樣的網址時纔會查詢到 IP ，若是輸入的是如 http://blog.helloarron.com/、http://blog.helloarron.com/node/46.html 就無法查詢到了，因此咱們還要修改咱們服務器端的代碼，主要的問題就是要對提交的網址進行解析。node

修改 parse_dns.js 中的 getDns() 方法以下:jquery

function getDns(postData,callback){
    var domain = '',
        url_get = url.parse(postData.search_dns);
    if ( url_get.host ) {
        domain = url_get.host;
    }else{
        url_get = url.parse( 'http://' + postData.search_dns);
        domain = url_get.host;
    }
    dns.resolve(domain, function(err, addresses){
        if(!addresses){
            addresses=['Not Exist !']
        }
        callback(domain, addresses);
    });
}

到這裏咱們的案例就算完成了。git

我已經將案例代碼共享到了 GitHub 上（地址）。也可直接到 http://dns.helloarron.com/ 演示。github

但願你們多多評論，我還在學習中，有什麼錯誤的地方請你們必定要指正。
謝謝你們的支持。bootstrap