【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