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

時間 2019-12-07

原文原文鏈接

上一節咱們對 NodeJS 的安裝和模塊作了介紹，這一節咱們就正式開始編碼，實現咱們的小案例。
javascript

首先，咱們在喜歡的地方新建一個目錄用來存放這個案例的代碼，如 E:\node_workspace\code 注意路徑中不要出現中文，省得各類問題 ^_^css

咱們首先來完成頁面的佈局：index.htmlhtml

<!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>
    </body>
</html>

這裏咱們使用 bootstrap v3 ，下面就是來實如今點擊查詢按鈕的時候在不刷新頁面的狀況下經過 Ajax 提交數據，而後對返回結果進行處理。java

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。node

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。jquery

AJAX 是與服務器交換數據並更新部分網頁的藝術，在不從新加載整個頁面的狀況下。ajax

爲了更方便地使用 Ajax 和操做 DOM 元素，我這裏還使用了jQuery （jQuery 是一個 JavaScript 庫，極大地簡化了JavaScript 編程）。編程

修改 index.html 文件，在 body 標籤結束前加上引入 jQuery 文件：bootstrap

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>

接下來咱們在剛引入的 jQuery 一行下編寫點擊事件的 JavaScript 代碼：瀏覽器

<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;
        });
    });
</script>

這裏還只是一個 html 文件，還沒編寫服務器端的代碼，因此輸入一個網站如：http://www.helloarron.com 後並無返回咱們所需的查詢結果，反而會在瀏覽器控制檯報錯（能夠打開控制檯看看效果，Chrome 快捷鍵 F12）。

下面是這個步驟下的 index.html 文件的完整代碼：

<!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="/pae" 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;
                });
            });
        </script>
    </body>
</html>

在接下來的一章中咱們就正式開始服務器端代碼的編寫。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。