從零開始學習前端JAVASCRIPT — 13、Ajax-前後端非同步交互以及Promise-非同步編程的改進

来源:https://www.cnblogs.com/witkeydu/archive/2018/02/28/8481682.html
-Advertisement-
Play Games

（註：本章講解涉及部分後端知識，將以php提供數據的方式進行相應的demo實現） 1：ajax的概念 全稱：Asynchronous Javascript And Xml AJAX不是一種新的編程語言，而是一種用於創建更快更好以及交互性更強的WEB應用程式技術，該技術在98年前後得到了應用。通過AJ ...


（註：本章講解涉及部分後端知識，將以php提供數據的方式進行相應的demo實現）

1：ajax的概念

全稱：Asynchronous Javascript And Xml

AJAX不是一種新的編程語言，而是一種用於創建更快更好以及交互性更強的WEB應用程式技術，該技術在98年前後得到了應用。通過AJAX，你的JS可以通過JS的XMLHttpRequest對象在頁面不重載的情況下與伺服器直接進行通信。這樣可以在伺服器請求到想要的數據，而不是整個頁面。AJAX的核心就是JS的XMLHttpRequest對象。xhr對象是在IE5中首次引入，它是一種支持非同步請求的對象。

 2：ajax的優勢

  • 無刷新更新數據。
  • 非同步與伺服器通信。
  • 基於標準被廣泛支持。
  • 前端與後端分離。
  • 節省帶寬。

 3：編寫步驟

1.創建XMLHttpRequest對象。

所有現代瀏覽器(IE7+，chrome，firefox，opera，safari)均內建XMLHttpRequest對象。但是IE5、6使用ActiveXObject對象。

function getAjax() {

var  xmlhttp = null;

if(window.ActiveXObject){

　　 //針對IE

         xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);

} else if(window.XMLHttpRequest){

         xmlhttp = new XMLHttpRequest();

}

return  xmlhttp;

}

2.打開與Server的連接，指定發送方式、URL以及許可權等。

open方法：創建新的HTTP請求，並指定此請求的方法，URL以及驗證信息。

xhr.open(type, url, async, user, password);

type：HTTP請求方式，GET、POST等。大小寫不敏感。

url：請求地址。（get請求如果有傳值直接以url?param=value的方式傳遞。post的方式直接在發送指令的時候傳遞）

async：布爾型，請求是否為非同步方式。預設為true。如果為真，當狀態改變時會調用onreadystatechange屬性指定的回調函數。（可選）

註釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：

xmlhttp.open("GET","test.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

 

user：如果伺服器需要驗證，此處指定用戶名，如果未指定，當伺服器需要驗證時，會彈出驗證視窗。（少用僅瞭解）

password：驗證信息中的密碼部分，如果用戶名為空，則此值將會被忽略。（少用僅瞭解）

註：在AJAX中，其實我們就是來模擬正常的表單提交數據。正常的表單在POST數據時，會發送Content-Type欄位，所以我們在AJAX中就要指定該欄位值為application/x-www-form-urlencoded。並且對欄位名稱和值進行編碼處理在發送。使用setRequestHeader：單獨指定請求的某個HTTP頭。

註：一些特殊字元可能與代碼中的字元衝突（如URL中分隔符&等等），故數據應使用encocdeURIComponent()函數進行編碼。

3.發送指令。

send()：發送請求到HTTP伺服器並接收回應。

此方法的同步或非同步方式取決於open方法中的async參數，如果async為true，此方法將立即返回，如果為false，此方法將會等待請求完成或者超時時才會返回。

xhr.send(body);

body：通過此請求發送的數據。GET請求設置為null即可。

post和get方式實現ajax的不同之處 

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

//傳參方式的不同以及編碼方式的不同post提交需要被別，則需要指定編碼方式與get的方式一樣

 

4.等待並接收伺服器返回的處理結果。

5.客戶端接收。

6.釋放XMLHttpRequest對象。

 4：回調函數

通過onreadystatechange屬性指定readystate屬性改變時的事件處理回調函數。

xhr.onreadystatechange = function(){}

readyState屬性：返回請求的當前狀態。

  • 0：對象已建立，尚未初始化（未調用open方法）。
  • 1：對象已建立，尚未調用send方法。
  • 2：send方法已調用。但是當前的狀態以及HTTP狀態未知。
  • 3：開始接收數據，因為響應以及HTTP頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤。
  • 4：數據接收完畢，此時可以通過responseBody和responseText獲取完整的響應數據。

status屬性：返回當前請求的狀態碼。

  • 200 OK：請求文檔已經找到，並正確返回。
  • 304 Not Modified：擁有一個本地的緩存副本，伺服器端內容與此相同。
  • 403 Forbidden：請求者對所請求的文檔不具有相應的許可權。
  • 404 Not Found：請求的文檔沒找到。

statusText屬性：返回當前請求的響應行信息。

responseXML屬性：將響應信息格式化為XML Document對象返回。

responseText屬性：將響應信息作為字元串返回。

5：JS解析JSON

 JSON：Javascript Object Notation，一種輕量級的基於文本的數據交換格式，易於人閱讀和編寫，也能提高網路傳輸速率。

 ES5新增的兩個方法：

 JSON.parse：將JSON字元串數據轉換為JSON對象。

 JSON.stringify：將JSON對象轉換為JSON字元串。

 註：1、瀏覽器支持：IE8+。

　　2、JSON格式的字元串裡面的key或者字元串型的value都必須用雙引號包裹

6：局部數據刷新 

demo講解上述提到的知識點:操作相應的DOM節點（例如評論列表的分頁效果）

html頁面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新聞列表</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 80%;
            margin: 0 auto;
        }
        .newsTitle{
            font-size: 24px;
            text-align: center;
            margin: 0 auto;
            padding: 20px 10px;
            font-weight: normal;
            letter-spacing: 10px;
        }
        .newsList{
            display: block;
            margin: 0 auto;
            line-height: 50px;
            font-size: 16px;
            list-style: none;
        }
        .newsList li{
            border-top: 1px dashed #f4f4f4;
            padding: 0 20px;
        }
        .newsList li:nth-child(odd){
            background: #f3f3f3;
        }
        .newsPage{
            display: block;
            margin: 0 auto;
            text-align: center;
        }
        .newsPage li{
            margin:20px 5px;
            display: inline-block;
            padding: 5px  10px;
            border:1px solid #f3f3f3;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3 class="newsTitle">新聞列表</h3>
        <ul id="newsList" class="newsList">
            <li>東航首位外籍女機長：來中國是最好的選擇</li>
            <li>東航首位外籍女機長：來中國是最好的選擇</li>
            <li>東航首位外籍女機長：來中國是最好的選擇</li>
            <li>東航首位外籍女機長：來中國是最好的選擇</li>
            <li>東航首位外籍女機長：來中國是最好的選擇</li>
        </ul>    
        <ul id="newsPage" class="newsPage">
            <li data-page="1">1</li>
            <li data-page="2">2</li>
            <li data-page="3">3</li>
            <li data-page="4">4</li>
            <li data-page="5">5</li>
            <li data-page="6">6</li>
            <li data-page="7">7</li>
            <li data-page="8">8</li>
            <li data-page="9">9</li>
            <li data-page="10">10</li>
        </ul>        
    </div>
</body>
<script type="text/javascript" src="ajax.js"></script>
</html>

 js頁面

var oNewsPage=document.getElementById('newsPage');
var oNewsPage=Array.from(oNewsPage.children);
var oNewsList=document.getElementById('newsList');

oNewsPage.forEach(function (value) {
    value.onclick=function () {
        oNewsList.innerHTML = "";
        //獲取頁碼值
        var pageNum = value.getAttribute("data-page");

        /*步驟一：創建XMLHttpRequest對象*/
        var xhr = new XMLHttpRequest();

        /*步驟二：請求配置*/
        var pageNum = "pageNum="+ pageNum;
        //xhr.open('get','ajax.php?'+pageNum,true);
        xhr.open('post','ajax.php',true);

        /*步驟四：接受返回結果*/
        xhr.onreadystatechange=function () {
            //根據狀態返回碼判定請求的狀態
            if (xhr.readyState === 4 && xhr.status === 200) {
                //獲取返回結果
                var newsList = JSON.parse(xhr.responseText)//返回結果通過json將字元串進行轉換
                //數據結果渲染到頁面
                newsList.forEach( v => {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = v.title;
                    oNewsList.appendChild(oLi);
                });
            }
        }

        /*步驟三：發送請求*/
        //post請求需要設置編碼格式  否則無法解析數據
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(pageNum);//post方式將參數傳遞的方式
    }
})

 php後臺頁面

<?php
    $pageNum=$_POST['pageNum']; //接收參數頁碼
    //通過頁碼判斷載入的內容
    if ($pageNum == 1) {
        //通過二維數組存儲數據
        $arr = [
            [
                'id' => 1,
                'title' => '東航首位外籍女機長：來中國是最好的選擇'
            ],
            [
                'id' => 2,
                'title' => '南航首位外籍女機長：來中國是最好的選擇'
            ],
            [
                'id' => 3,
                'title' => '國際航空首位外籍女機長：來中國是最好的選擇'
            ]
        ];        
    }
    else if ($pageNum == 2) {
        $arr=[
            [
                'id' =>4,
                'title'=>'世界那麼大不如出去走走'
            ],
            [
                'id'=>5,
                'title'=>'今天陽光明媚適合出去走走'
            ]
        ];
    }
    else{        
        $arr=[
            [
                'id' =>6,
                'title'=>'我是第三頁以後的內容'
            ],
            [
                'id'=>7,
                'title'=>'我是第三頁以後的內容'
            ]
        ];
    }
    echo json_encode($arr);
?>

 7：前後端分離（ajax函數的封裝）

 後臺只管數據輸出和業務邏輯處理，前端負責交互邏輯和界面展示。簡單的說：前端靜態頁面中沒有有後臺程式代碼，後臺輸出不帶有HTML標簽的數據。前後端分離靠ajax來實現數據的交互。

demo通過封裝的ajax實現載入更多的功能以及通過事件源對象刪除單條數據(本來打算將源碼托管到GitHub,賬號丟失)

*文件夾目錄 

 1.html頁面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新聞列表</title>
    <link rel="stylesheet" href="styles/ajax.css">
</head>
<body>
    <div class="box">
        <h3 class="newsTitle">新聞列表</h3>
        <ul id="newsList" class="newsList">
            <li>
                冬天來了，春天還會遠麽 
                <a class="deleteBtn" href="#">&times;</a>
            </li>
            <li>
                面朝大海，幸福花開 
                <a class="deleteBtn" href="#">&times;</a>
            </li>
            <li>
                Nothing is impossible! 
                <a class="deleteBtn" href="#">&times;</a>
            </li>
            <li>
                水能載舟亦能覆舟 
                <a class="deleteBtn" href="#">&times;</a>
            </li>
            <li>
                中國是最好的選擇 
                <a class="deleteBtn" href="#">&times;</a>
            </li>
        </ul>    
        <div id="loadMoreInfo" class="loadMoreInfo">
            <img id="loadingImg" class="loading" src="images/timg.gif" />
            載入更多...
        </div>    
    </div>
</body>
<script type="text/javascript" src="scripts/common.js"></script>
<script type="text/javascript" src="scripts/ajax.js"></script>
</html>
ajax.html

 2.css文件

@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
}
body{
    background: #7CCD7C;
}
.box{
    width: 80%;
    margin: 0 auto;
}
.newsTitle{
    font-size: 24px;
    text-align: center;
    margin: 0 auto;
    padding: 20px 10px;
    font-weight: normal;
    letter-spacing: 10px;
}
.newsList{
    display: block;
    margin: 0 auto;
    line-height: 50px;
    font-size: 16px;
    list-style: none;
}
.newsList li{
    padding: 0 20px;
    box-shadow: 0 0 10px #eeeeee;
}
.box .newsList li:hover{
    background: #B0E2FF;
}
.newsList li:nth-child(odd){
    background: #f3f3f3;
}
.newsList li:nth-child(even){
    background: #eeeeee;
}

.deleteBtn{
    float: right;
    text-decoration: none;
    font-size: 16px;
    color: #555555;
}
.loadMoreInfo{
    margin-top: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    background: #ffffff;
    cursor: pointer;
    vertical-align: middle;
    margin-bottom: 20px;
}
.loadMoreInfo img{
    display: none;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
ajax.css

 3.公共js(封裝的$函數以及ajax函數)

/* 
封裝$函數
參數說明：
id:標簽的id屬性值
*/
function $(id) {
    return document.getElementById(id);
}

/*
封裝ajax函數
參數說明：對象作為參數不用考慮參數順序問題
type:請求類型；
url:請求訪問地址；
param：請求數據,支持對象也支持字元串；
asyn:是否非同步載入,boolean類型，true非同步，false同步
beforesend：回調函數在發送請求之前執行
success：回調函數,請求成功時執行
complete：回調函數,請求完成後執行
*/
function ajax({type,url,param,asyn=true,beforesend,success,complete}) {
    //創建XMLHttpRequest對象
    var xhr = new XMLHttpRequest();
    //param參數為對象時進行拼接字元串
    if (param && typeof(param) === 'object') {
        var str;
        for(var child in param){
            //encodeURIComponent編碼參數，避免特殊字元分割時丟失
            str+=encodeURIComponent(child) + '=' + encodeURIComponent(param[child]) + '&'
        }
        param=str.slice(0,-1);//截取拼接完成後最後的&符
    }
    //get請求對url傳參進行拼接
    if (type.toUpperCase()==="GET" && param) {
        url+='?'+param;
    }
    //請求配置
    xhr.open(type , url, asyn);
    //獲取返回的數據
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            //獲取返回的數據並轉換
            success(xhr.responseText);
        }
        //請求完成後的函數
        complete && complete();
    }
    //發送請求
    beforesend && beforesend();
    if (type.toUpperCase()==="POST") {
        //post請求設置編碼方式
        xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded')
        //post請求時通過send向body傳參(無論param參數是否為空，必須傳)
        xhr.send(param);
    }
    else{
        //get請求發送請求
        xhr.send();
    }
}
common.js

 4.頁面js

var oLoadMoreInfo = $("loadMoreInfo");
var oNewsList = $("newsList");
var oLoadingImg = $("loadingImg");
oLoadMoreInfo.onclick=function () {
    ajax({
        type:'post',
        url:'php/ajax.php',
        beforesend:function () {
            //發送前顯示載入過程中的動態效果
            oLoadingImg.style.display="inline-block"
        },
        success:function (data) {
            //接受返回的數據進行轉換並渲染到頁面
            var data=JSON.parse(data);
            data.forEach(function (value) {
                var li=document.createElement("li");
                li.innerHTML=value+'<a class="deleteBtn" href="#">&times;</a>';
                oNewsList.appendChild(li);
            })
        },
        //完成後顯示渲染出來的網頁效果,關閉等待效果
        complete:function () {
            oLoadingImg.style.display="none"
        }
    })
}
newsList.onclick=function (ev) {
    var e=ev||window.event;
    //獲取事件原對象
    var tar=e.target||e.srcElement;
    //判斷事件原對象是否為a標簽nodenName的值都是大寫
    if (tar.nodeName==="A") {
        oNewsList.removeChild(tar.parentNode);
    }
}
ajax.js

 5.php後臺

<?php
  sleep(2);//本地測試資源載入速度過快無法看出載入的動態效果
  $news=[
      '東航首位外籍女機長：來中國是最好的選擇',
      '南航首位外籍女機長：來中國是最好的選擇',
      '國際航空首位外籍女機長：來中國是最好的選擇',
      '東航首位外籍女機長：來中國是最好的選擇',
      '南航首位外籍女機長：來中國是最好的選擇',
      '國際航空首位外籍女機長：來中國是最好的選擇',
      '東航首位外籍女機長：來中國是最好的選擇',
      '南航首位外籍女機長：來中國是最好的選擇',
      '國際航空首位外籍女機長：來中國是最好的選擇',
      '東航首位外籍女機長：來中國是最好的選擇',
      '南航首位外籍女機長：來中國是最好的選擇',
      '國際航空首位外籍女機長：來中國是最好的選擇'
  ];
  echo json_encode($news, JSON_UNESCAPED_UNICODE);
  /*  PHP的json_encode來處理中文的時候, 中文都會被編碼, 變成不可讀的, 類似”\u***”的格式,PHP5.4,JSON_UNESCAPED_UNICODE:Json不要編碼Unicode*/
ajax.php

 6.圖片資源

 

 8：ajax的依賴調用

在使用ajax非同步調用的時候，可能碰到同時調用多個ajax的情況，而且多個ajax之間還存在依賴關係。

引用回調函數的嵌套說明ajax的以來調用： 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回調函數的嵌套</title>
</head>
<body>
    
</body>
<script type="text/javascript">
    function a(d, e) {
        d && d(e);
    }

    function b(f) {
        console.log('函數b！');
        f && f();
    }

    a(b, function() {
        console.log('實參e(回調函數)');
    });
/*回調函數的簡單理解：函數在方法中以參數的方式進行傳遞*/
/*這裡提供兩種形式理解回調函數的嵌套*/
/*    function a(d, e) {
        d && d(e);
    }

    a(
        function b(f){
            console.log('函數b！');
            f && f();
        }, 
        function() {
            console.log('實參e(回調函數)');
        }
    );*/

</script>
</html>
回調函數的嵌套

 demo：逐個非同步驗證驗證碼、用戶名和密碼，只有用戶通過，才能非同步驗證密碼。

 此處只給出部分重要代碼逐個調用封裝的ajax方法（前後端分離的demo封裝的ajax方法）進行非同步驗證驗證碼、用戶名和密碼： 

            // 表單提交事件用純ajax實現表單驗證
            // 驗證驗證碼
            var sCaptcha = oCaptcha.value;
            ajax({
                type: 'POST',
                url: 'login.php',
                data: {captcha: sCaptcha},
                success: function (data) {
                    if(data == 1) {
                        // 驗證賬號
                        var sAccount = oAccount.value;

                        ajax({
                            type: 'POST',
                            url: 'login.php',
                            data: {account: sAccount},
                            success: function (data) {
                                if(data == 1) {
                                    // 驗證密碼
                                    var sPassword = oPassword.value;
                                    ajax({
                                        type: 'POST',
                                        url: 'login.php',
                                        data: {password: sPassword},
                                        success: function (data) {
                                            if(data == 1) {
                                                oShow.innerHTML = '登錄成功！';
                                            } else {
                                                oShow.innerHTML = '密碼錯誤！';
                                            }
                                        }
                                    });
                                } else {
                                    oShow.innerHTML = '賬號錯誤！';
                                }
                            }
                        });
                    } else {
                        oShow.innerHTML = '驗證碼錯誤！';
                    }
                }
            });
ajax非同步調用demo 

 9：Promise介紹

Promise函數,是一個構造函數,它實際上是對回調函數的一種封裝 對非同步編程的一種改進。

1>Promise對象的特點：

1.Promise對象代表一個非同步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

2.一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。這與

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jquery添加html代碼的幾種方法
    經常用jq來DOM添加html代碼 就總結了jq裡面最常用的動態添加html代碼的方法 append在元素內部的尾部加上元素 prepend在元素內部的前部加上元素 after在元素外部的尾部加上元素 before在元素外部的頭部加上元素 html用當前內容替換掉原內容 $(" id1")inser ...
  • css表格
    今天寫某個平臺的前端數據展示 主要使用表格展示 正好複習總結一下css的表格 首先說說thead、tbody、tfoot 無論前後順序如何改變， 內的元素總是在表的最上面， 總在表的最下麵 可能會有人分不清 tr th td tr: table row = 表格中的一行 th: table head ...
  • JavaScript 中，定義函數時用 var foo = function () {} 和 function foo() 有什麼區別？
    某天寫代碼突然縣道這個問題,順勢總結一波 JavaScript 函數和變數聲明的“提前”（hoist）行為 簡單的說 如果我們使用 匿名函數 var a = {} 這種方式， 編譯後變數聲明a 會“被提前”了，但是他的賦值（也就是a）並不會被提前。 也就是，匿名函數只有在被調用時才被初始化。 如果使 ...
  • Markdown常用語法
    1、標題類 標題是每篇文章最常用的格式，在Markdown中，如果使一段文字定義為標題，則只要在這段文字前加“#”號即可。如上圖所示。 總共有6級標題，建議在#號後添加一個空格符。 2、列表類 在文字前加“-”或“*”，即可變為無序列表； 在文字前加“1. ”、“2. ”...等數字元號，即可變為有 ...
  • 如何水平居中一個元素
    在項目中經常會遇到居中問題，這裡借鑒度娘的眾多答案，做一個總結： 一、元素的水平居中 1、行級元素的水平居中 很明顯：子元素為行級元素時，只需要設置父元素 text-align:center 即可。 2、塊級元素的水平居中 很明顯：子元素為塊級元素時，只需要設置父元素 margin: 0 auto; ...
  • CSS佈局(四) float詳解
    一、float設計初衷 因為float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left之後，文字會環繞圖片。 二、float多個特性 2.1. 破壞性 首先大家來看兩個demo，如下圖。第一個demo是一個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的 ...
  • CSS——清除浮動的六種解決方案
    內容的高度撐起父元素容器的高度，效果圖如下HTML和CSS代碼如下給ｐ標簽加上浮動以後，ｐ｛float：left；｝，此時DIV塌陷，兩段內容同行顯示，效果如下： 解決方案一：給前面一個父元素設置高度 ！企業開發中，能不寫高度就不寫，所以這種方式用得很少解決方案二：給後面的盒子添加clear屬性； ...
  • 輕鬆畫任意三角形，你需要一個小工具。
    點擊拖動中間小點，得到你想要的三角形形狀，獲取每條邊框的寬度，把其餘的三條邊設為透明色，就得到了你想要的三角形，是不是很方便？拿走不謝， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類