這裡我們的想法是點開頁面，自動讀取伺服器某個檔案，然後在文字框顯示出來

HTML程式碼

<textarea id = "div1"  style="width:1650px; height:740px" readonly>
</textarea>

JS程式碼

這裡試用了兩種方法都可以

1.ajax

    mounted() { 
        document.getElementById('div1').innerHTML = '讀取中...';
        $(document).ready(function(){
	        $.ajax({async: true, url:"dhcpdlog",success:function(result){
                $("#div1").html(result);
		    }});
	    });
    }
 

2.load

   mounted() {
    // this.getInfo()	
    document.getElementById('div1').innerHTML = '讀取中...';
    $(document).ready(function(){
    $("#div1").load("/arplog");
    });
  }

然後效果如圖所示

讀取中

讀取完畢

本來是採用load的方法，後來發現在讀取文件的過程中，游標會變成白色小手，然後點選其他事件不會立即觸發，直到讀取完畢才會執行。於是試著採取能非同步操作的ajax方法，但結果還是出現這種情況。然後看Network發現這裡讀取資料用的是get方法，而且資料量較大約5w行，所以該原子操作必須一次性執行完。