2. 程式人生 > 其它 >vue中計算屬性和觀察屬性

vue中計算屬性和觀察屬性

阿新 • • 發佈：2020-12-08

Ajax 技術簡介

背景分析？

在網際網路高速發展的今天，傳統的WEB應用，對於高併發、高效能、高可靠性的要求已迫在眉睫。單執行緒方式的客戶端與服務端互動方式已經不能滿足現階段的需求.我們需要以非同步、按需載入的方式從服務端獲取資料並及時重新整理，來提高使用者體驗，於是Ajax技術誕生。

Ajax 是什麼？

Ajax (Asynchronous JavaScript and XML) 是一種Web應用客戶端技術,可以藉助客戶端指令碼(javascript)與服務端應用進行非同步通訊(可以有多個執行緒同時與伺服器互動)，並且按需獲取服務端資料以後,可以進行區域性重新整理,進而提高資料的響應和渲染速度。

Ajax 應用場景？

Ajax技術最大的優勢就是底層非同步,然後區域性重新整理,進而提高使用者體驗,這種技術現在在很多專案中都有很好的應用,例如:

  • 商品系統。
  • 評價系統。
  • 地圖系統。

Ajax 程式設計步驟及模板程式碼分析

Ajax 編碼的基本步驟?(重點是ajax技術的入口-XMLHttpRequest-XHR物件)

第一步:基於dom事件建立XHR物件
第二步:在XHR物件上註冊狀態監聽(監聽客戶端與服務端的通訊過程)
第三步:與服務端建立連線(指定請求方式,請求url,同步還是非同步)
第四步:傳送請求(將請求資料傳遞服務端)

Ajax 編碼過程的模板程式碼如下:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
           console.log(xhr.responseText)
    }
}
xhr.open("GET",url,true);
xhr.send(null);

SpringBoot 專案Ajax技術入門實現

第二步:新增Spring web依賴,程式碼如下:

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>

第三步:建立AjaxController處理客戶端請求,程式碼如下:

package com.cy.pj.ajax.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
    @RequestMapping("/doAjaxStart")
    public String doAjaxStart(){
        return "Response Result Of Ajax Get Request 01 ";
    }
}

第四步:在專案中static目錄下,建立一個頁面ajax-01.html,程式碼如下:

html元素程式碼如下:

<h1>The Ajax 01 Page</h1>
<fieldset>
   <legend>Ajax 非同步Get請求</legend>
   <button onclick="doAjaxStart()">Ajax Get Request</button>
   <span id="result">Data is Loading ...</span>
</fieldset>

javascript 指令碼程式碼如下:

function doAjaxStart(){
 //debugger//客戶端斷點(此斷點生效需要開啟控制檯)
 //1.建立XHR物件(XmlHttpRequest)-Ajax應用的入口物件
 let xhr=new XMLHttpRequest();
 //2.在XHR物件上註冊狀態監聽(拿到服務端響應結果以後更新到頁面result位置)
 xhr.onreadystatechange=function(){//事件處理函式(客戶端與服務端通訊狀態發生變化  時會執行此函式)
 //readyState==4表示服務端響應到客戶端資料已經接收完成.
 if(xhr.readyState==4){
            if(xhr.status==200){//status==200表示請求處理過程沒問題
               document.getElementById("result").innerHTML=
                    xhr.responseText;
            }
        }
 }
 //3.與服務端建立連線(指定請求方式,請求url,非同步)
 xhr.open("GET","http://localhost/doAjaxStart",true);//true代表非同步
 //4.向服務端傳送請求
 xhr.send(null);//get請求send方法內部不傳資料或者寫一個null
//假如是非同步客戶端執行完send會繼續向下執行.
}

服務端關鍵程式碼設計及實現

基於業務描述,在AjaxController類中新增相關屬性和方法,用於處理客戶端的ajax請求.

新增屬性和構造方法,程式碼如下:

/**假設這個是用於儲存資料的資料庫*/
    private List<Map<String,Object>> dbList=new ArrayList<>();
    public AjaxController(){
        Map<String,Object> map=new HashMap<>();
        map.put("id","100");
        map.put("name","家用電器");
        map.put("parentId",null);//parentId為null則表示它是1級分類
        map.put("remark","電器相關等");
        map.put("createdTime",new Date());
        dbList.add(map);
    }

新增Ajax請求處理方法,程式碼如下:

    @GetMapping("/doAjaxGet")
    public List<Map<String,Object>> doAjaxGet(){
        return dbList;
    }
    @PostMapping("/doAjaxPost")
    public String doAjaxPost(@RequestParam Map<String,Object> map){
        map.put("createdTime",new Date());
        dbList.add(map);
        return "save ok";
    }
    @DeleteMapping("/doAjaxDelete")
    public String doAjaxDelete(String id){
        //獲取迭代器物件,然後迭代list集合,找到id對應的元素,進行刪除操作
        Iterator it=dbList.iterator();
        while(it.hasNext()){
            Map<String,Object> map=(Map<String,Object>)it.next();
            if(map.get("id").equals(id)){
                //dbList.remove(map);//這樣刪除會出現併發刪除異常
                it.remove();//通過迭代器執行刪除操作
            }
        }
        return "delete ok";
    }
    
    @PutMapping("/doAjaxUpdate")
    public String doAjaxUpdate(@RequestParam Map<String,Object> updateMap){
        Iterator it=dbList.iterator();
        while(it.hasNext()){
            Map<String,Object> map=(Map<String,Object>)it.next();
            if(map.get("id").equals(updateMap.get("id"))){
               map.put("name",updateMap.get("name"));
               map.put("remark",updateMap.get("remark"));
            }
        }
       return "update ok";
    }

客戶端關鍵程式碼設計及實現

在static目錄下建立ajax-02.html檔案,關鍵程式碼如下:

<h1>The Ajax 02 Page</h1>
<button onclick="doAjaxGet()">Do Ajax Get</button>
<button onclick="doAjaxPost()">Do Ajax Post</button>
<button onclick="doAjaxDelete()">Do Ajax Delete</button>
<button onclick="doAjaxUpdate()">Do Ajax Update</button>
<div id="result"></div>

客戶端JavaScript指令碼設計,程式碼如下:

  • Get 請求方式,程式碼如下:
 function doAjaxGet(){
       let xhr=new XMLHttpRequest();
       xhr.onreadystatechange=function(){
           if(xhr.readyState==4){
               if(xhr.status==200){
                  document.getElementById("result").innerHTML=xhr.responseText;
               }
           }
       }
       xhr.open("GET","http://localhost/doAjaxGet",true);
       xhr.send(null);
    }
  • Post 請求方式,程式碼如下:
function doAjaxPost(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("POST","http://localhost/doAjaxPost",true);
        //post請求向服務端傳遞資料,需要設定請求頭,必須在open之後
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //傳送請求(post請求傳遞資料,需要將資料寫入到send方法內部)
        xhr.send("id=101&name=Computer&remark=Computer...");
    }
  • Update 請求方式,程式碼如下:
 function doAjaxUpdate(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("put","http://localhost/doAjaxUpdate",true);
        //post請求向服務端傳遞資料,需要設定請求頭,必須在open之後
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //傳送請求(post請求傳遞資料,需要將資料寫入到send方法內部)
        xhr.send("id=101&name=Book&remark=Book...");
    }
  • Delete 請求方式,程式碼如下:
 function doAjaxDelete(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("delete","http://localhost/doAjaxDelete?id=101",true);
        xhr.send(null);
    }

啟動服務進行訪問測試分析

Ajax 技術進階實現

Ajax 程式碼的封裝

在實際程式設計過程中我們通常會封裝程式碼共性,提取程式碼特性.然後來提高程式碼的可重用性.例如:

  • ajax get 請求,程式碼如下:
function ajaxGet(url,params,callback) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                callback(xhr.responseText);
            }
        }
    }
    xhr.open("GET",params?url+"?"+params:url,true);
    xhr.send(null);
}
  • ajax post 請求,程式碼如下:
function ajaxPost(url,params,callback) {//add
 let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                callback(xhr.responseText);
            }
        }
    }
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
}
  • ajax put 請求,程式碼如下:
function ajaxPut(url,params,callback) {//update
 let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                callback(xhr.responseText);
            }
        }
    }
    xhr.open("PUT",url,true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
}
  • ajax delete 請求,程式碼如下:
function ajaxDelete(url,params,callback) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                callback(xhr.responseText);
            }
        }
    }
    xhr.open("delete",params?url+"?"+params:url,true);
    xhr.send(null);
}

Ajax 程式設計小框架的實現(瞭解)

我們在實際的js程式設計中經常會以面向物件的方式進行實現，例如ajaxGet函式,如何以物件方式進行呼叫呢？關鍵程式碼分析如下：(如下程式碼的理解需要具備JS中面向物件的基礎知識,假如不熟可暫時跳過)

(function(){
    //定義一個函式，可以將其連線為java中的類
     var ajax=function(){}
    //在變數ajax指向的類中新增成員，例如doAjaxGet函式，doAjaxPost函式
     ajax.prototype={
        ajaxGet:function(url,params,callback){
        //建立XMLHttpRequest物件，基於此物件傳送請求
        var xhr=new XMLHttpRequest();
        //設定狀態監聽(監聽客戶端與服務端通訊的狀態)
        xhr.onreadystatechange=function(){//回撥函式，事件處理函式
            if(xhr.readyState==4&&xhr.status==200){
                //console.log(xhr.responseText);
                callback(xhr.responseText);//jsonStr
            }
        };
        //建立連線(請求方式為Get,請求url,非同步還是同步-true表示非同步)
        xhr.open("GET",url+"?"+params,true);
        //傳送請求
        xhr.send(null);//GET請求send方法不寫內容
     },
        ajaxPost:function(url,params,callback){
        //建立XMLHttpRequest物件，基於此物件傳送請求
        var xhr=new XMLHttpRequest();
        //設定狀態監聽(監聽客戶端與服務端通訊的狀態)
        xhr.onreadystatechange=function(){//回撥函式，事件處理函式
            if(xhr.readyState==4&&xhr.status==200){
                    //console.log(xhr.responseText);
            callback(xhr.responseText);//jsonStr
            }
        };
        //建立連線(請求方式為POST,請求url,非同步還是同步-true表示非同步)
        xhr.open("POST",url,true);
       //post請求傳參時必須設定此請求頭
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //傳送請求
        xhr.send(params);//post請求send方法中傳遞引數
        }
    }
    window.Ajax=new ajax();//構建ajax物件並賦值給變數全域性變數Ajax
})()

此時外界再呼叫doAjaxGet和doAjaxPost函式時，可以直接通過Ajax物件進行實現。

Ajax 技術在Jquery中的應用

Jquery簡介

jQuery是一個快速、簡潔的JavaScript庫框架，是一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。

Jquery中常用ajax函式分析

jQuery中基於標準的ajax api 提供了豐富的Ajax函式應用，基於這些函式可以編寫少量程式碼，便可以快速實現Ajax操作。常用函式有：

  • ajax(…)
  • get(…)
  • getJSON(…)
  • post(…)

Jquery中Ajax函式的基本應用實現

業務描述
構建一個html頁面,並通過一些button事件,演示jquery中相關ajax函式的基本應用,如圖所示:

關鍵步驟及程式碼設計如下:
第一步:在static目錄下新增jquery-ajax-01.html頁面.
第二步:在頁面上新增關鍵的html元素,程式碼如下:

<h1>The Jquery Ajax 01 Page</h1>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doAjaxPost()">$.post(...)</button>
<button onclick="doAjaxGet()">$.get(...)</button>
<button onclick="doAjaxLoad()">$("..").load(...)</button>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>

第三步:新增button事件對應的事件處理函式,程式碼如下:

  • ajax 函式應用,程式碼如下:
function doAjax(){
   let url="http://localhost/doAjaxGet";
   let params="";
   //這裡的$代表jquery物件
   //ajax({})這是jquery物件中的一個ajax函式(封裝了ajax操作的基本步驟)
   $.ajax({
      type:"GET",//省略type,預設就是get請求
      url:url,
      data:params,
      async:true,//預設為true,表示非同步
      success:function(result){//result為服務端響應的結果
      console.log(result);//ajax函式內部將服務端返回的json串轉換為了js物件
   }//success函式會在服務端響應狀態status==200,readyState==4的時候執行.
 });
}
  • post 函式應用,程式碼如下
function doAjaxPost(){
    let url="http://localhost/doAjaxPost";
    let params="id=101&name=Computer&remark=Computer...";
    $.post(url,params,function(result){
    $("#result").html(result);
});
  • get函式應用,程式碼如下:
function doAjaxGet(){
    let url="http://localhost/doAjaxGet";
    let params="";
    $.get(url,params,function(result){
      $("#result").html(result);
    },"text");
}
  • load 函式應用,程式碼如下:
function doAjaxLoad(){
    let url="http://localhost/doAjaxGet";
    $("#result").get(url,function(){
      console.log("load complete")
    });
}

相關推薦

vue中計算屬性和觀察屬性

技術標籤：學習筆記vue vue中計算屬性和觀察屬性 計算屬性： computed用來監控自己定義的變數，該變數不在data裡面宣告，直接在computed裡面定義，然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理

淺談Vue中計算屬性computed的實現原理

雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個專案實際經歷來看還是非常愉悅的，Vue文件清晰規範，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多場景使用Vue比React開發效率更

Vue中計算屬性是方法

對於常規的計算屬性，都是直接返回單個值，如： computed: { result() { return this.one + this.two

vue中style下scoped的屬性的原理

scoped屬性的功能 實現元件的私有化，不對全域性造成樣式汙染，表示當前style屬性只屬於當前模塊

Vue中的 watch監聽屬性詳情

目錄一.watch監聽一般資料的變化(數值，字串，布林值)1.數值2.字串3.布林值二.watch 監聽 複雜型別資料的變化1.物件2.陣列3.物件陣列4.物件數組的屬性首先要確認 watch是一個物件，要當成物件來使用。

script 標籤中的defer 和 async 屬性

瀏覽器在解析 HTML 的時候，如果遇到一個沒有任何屬性的 <script> 標籤 ，就會暫停解析，先發送網路請求獲取該 JS 指令碼的程式碼內容，然後讓 JS 引擎執行該程式碼，當代碼執行完畢後恢復解析。整個過程如下

02 Python 類屬性和例項屬性

下表列出了 4 個常見的明星人物： 姓名 年齡 周潤發 58 成龍 55 劉德華 53 周星馳 54 進行歸納總結：

詳談vue中router-link和傳統a連結的區別

Vue-router是伴隨著Vue框架出現的路由系統，它也是公認的一種優秀的路由解決方案。在使用Vue-router時候，我們常常會使用其自帶的路徑跳轉元件Link,通過實現跳轉，這和傳統的何其相似！但它們到底有什麼具體的區別呢

有關vue中v-if和v-show的區別

其實這兩個都是屬於根據條件判斷元素是否可見，但是還有有區別的哦！ v-show：就是無論什麼時候它其實都一直存在頁面上也就是會渲染在DOM上，只是你寫了條件讓它可見或不可見而已，因為它本質是把它的css屬性display

淺談vue中$event理解和框架中在包含預設值外傳參

在vue中普通方法中預設帶有event DOM事件如greet方法，如果是行內函數的話如warn方法，只需要在定義方法的地方同時傳入$event即可，這裡需要強調的是在iview中，這裡用的是select元件，在其on-change事件中如果想要

詳解vue中v-model和v-bind繫結資料的異同

vue的模板採用DOM模板，也就是說它的模板可以當做DOM節點執行，在瀏覽器下不報錯，繫結資料有三種方式，一種是插值，也就是{{name}}的形式，一種是v-bind，還有一種是v-model。{{name}}的形式比較好理解，就是以文字

21. 例項屬性和類屬性

例項屬性與類屬性 由於Python是動態語言，根據類建立的例項可以任意繫結屬性。

面向物件--類屬性和例項屬性

類屬性和例項屬性 在瞭解了類基本的東西之後，下面看一下python中這幾個概念的區別

vue中利用provide和inject實現頁面重新整理（無白屏）過載元件

1.場景 在處理列表時，常常有刪除一條資料或者新增資料之後需要重新重新整理當前頁面的需求。

二、Vue中的MVVM和options

Vue中的MVVM 一、Vue 的 MVVM1.1、View 層1.2、Model 層1.3、VueModel 層 二、options2.1、el2.2、data2.3、methods

Vue中的scoped和scoped穿透

1.什麼是scoped(轉帖原地址: https://segmentfault.com/a/1190000015932467?utm_source=tag-newest#comment-area)

詳解Vue中的watch和computed

前言 對於使用Vue的前端而言，watch、computed和methods三個屬性相信是不陌生的，是日常開發中經常使用的屬性。但是對於它們的區別及使用場景，又是否清楚，本文我將跟大家一起通過原始碼來分析這三者的背後實現原理

Vue中防抖和節流 --來自官方文件

Vue 沒有內建支援防抖和節流，但可以使用 Lodash 等庫來實現。 如果某個元件僅使用一次，可以在 methods 中直接應用防抖：

終於不再對transition和animation,傻傻分不清楚了 --vue中使用transition和animation

以前寫頁面注重在功能上，對於transition和animation是隻聞其聲，不見其人，對於頁面動畫效果心理一直癢癢的。最近做活動頁面，要求頁面比較酷炫，終於有機會認真瞭解了。

詳解vue中使用transition和animation的例項程式碼

以前寫頁面注重在功能上，對於transition和animation是隻聞其聲，不見其人，對於頁面動畫效果心理一直癢癢的。最近做活動頁面，要求頁面比較酷炫，終於有機會認真瞭解了。