自學 TypeScript 第五天，手把手項目搭建 TS 篇

来源:https://www.cnblogs.com/LiuSan/archive/2022/11/23/16915033.html
-Advertisement-
Play Games

前言： 昨天咱們已經把貪吃蛇的頁面寫好了，今天咱們來寫 TS 部分 TS 我們要用面向對象的形式去編寫我們的功能，所以我們要以一個功能去定義一個對象 把這個項目分成幾個模塊，也就是幾個對象功能 Food類（食物類）： 寫對象的前提，我們要去定義類，用類去創建對象 首先我們直接 class 一個 Fo ...


前言：

昨天咱們已經把貪吃蛇的頁面寫好了，今天咱們來寫 TS 部分

TS 我們要用面向對象的形式去編寫我們的功能，所以我們要以一個功能去定義一個對象

把這個項目分成幾個模塊，也就是幾個對象功能

Food類（食物類）：

寫對象的前提，我們要去定義類，用類去創建對象

首先我們直接 class 一個 Food 類，由於我們的食物是一個 div 所以我們的 Food 類裡面必須有一個屬性來存放我們的元素

// 食物 Food 類
class Food{
    element:HTMLElement;
    constructor(){
        // 拿到元素 id
        this.element = document.getElementById('food')!;
    }
}

元素有了，現在我們想食物還有哪些功能？

我們的食物被蛇吃掉以後是不是要消失啊，那怎麼確定我的蛇吃到食物了呢，看代碼

    // 獲取食物 x 軸坐標的方法
    get x(){
        return this.element.offsetLeft
    }
    // 獲取食物 y 軸坐標的方法
    get y(){
        return this.element.offsetTop
    }

如果我們蛇的坐標和食物的坐標一樣了，是不是就證明我們吃到了食物，所以我們在 Food 類裡面直接寫倆 get 方法 獲取 offsetTop/Left 就獲取到了 x y 軸坐標

 坐標有了，但我們現在食物的位置是固定的，那能固定嗎？我們的蛇吃完食物，食物的位置是不是要改變，所以我們的食物一定是隨機一個位置

    // 修改食物位置
    change(){
        // 生成一個隨機的位置  食物的位置 最小是 0 最大是 290
        // 蛇移動一次是一格，一格大小是 10 所以要求食物的坐標必須是整 10
        let top = Math.round(Math.random() * 29) * 10        
        let left = Math.round(Math.random() * 29) * 10        
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }

因為我們的盒子是 300 我們的食物是 10 所以我們食物的位置最大是290，最小是0

而且我們設計蛇移動一次是一格也就是 10 所以我們食物的坐標必須是10的倍數

這樣我們食物的 Food 類就完成了

計分板，ScorePanel 類：

接下來我們再寫一個簡單的，我們的計分板，我們的計分板有兩個值，一個是積分一個是等級

還是同理，首先先獲取元素

// 計分板 定義一個 ScorePanel 類
class ScorePanel{
    // 積分
    score = 0
    lecel = 0
    // 元素
    scoreSpan:HTMLElement
    lecelSpan:HTMLElement
    constructor(){
        this.scoreSpan = document.getElementById('score')!;
        this.lecelSpan = document.getElementById('lecel')!;
    }
}

獲取完元素之後，我們的分數和等級是不是要進行一個增加

    addScore(){
        // this.score++
        this.scoreSpan.innerHTML = ++this.score + '';
        // 判斷我們多少積分升一級
        if(this.score % 10 === 0){
            this.lecelup();
        }
    }
    // 等級提升
    lecelup(){
        // 判斷是否到達最大等級
        if(this.lecel < 10){
            this.lecelSpan.innerHTML = ++this.lecel + '';
        }
    }

蛇類，Snake：

 蛇的類是我們這裡最主要的一個類也是最難寫的一個類，所以我們這裡先寫一個基礎

還是跟前面的一樣，我們先獲取元素，但是蛇這裡我們會麻煩一點，因為蛇是一個容器，我們要給他分為蛇頭和蛇身子

// 設置我們的蛇類
class Snake{
    // 蛇的容器
    element:HTMLElement
    // 蛇的頭部
    head:HTMLElement
    // 蛇的身體(包括蛇頭的) HTMLCollection 是一個集合，特點：它是會實時的刷新的
    bodies:HTMLCollection
    constructor(){
        // 容器元素
        this.element = document.getElementById('snake')!;
        // 獲取蛇頭的元素也就是我們元素裡面的第一個 div
        this.head = document.querySelector('#snake > div')! as HTMLElement;
        // 獲取容器裡面的所有 div
        this.bodies = this.element.getElementsByTagName('div')
    }
}

獲取完蛇元素之後，我們還需要獲取到蛇的位置，也就是蛇頭部的位置。蛇身子暫不考慮

    // 獲取我們的蛇的坐標（蛇頭）
    get x(){
       return this.head.offsetLeft
    }
    get y(){
        return this.head.offsetTop
    }
    // 設置我們蛇頭的坐標
    set x(value:number){
        this.head.style.left = value + ''
    }
    set y(value:number){
        this.head.style.top = value + ''
    }

這樣就獲取到了，設置蛇的坐標我們現在先寫一個簡單的，等會再完善

現在我們先寫一個吃完食物蛇的身子增加的方法，其實這個增加就是向元素里添加 div

    // 蛇增加身體的一個方法
    addBody(){
        // 向 element 中添加 div
        this.element.insertAdjacentHTML('beforeend','<div></div>')
    }

這樣一個基礎的模型就寫好了，但卻還有問題，我們的坐標還沒有完善，而我們蛇還不能動

整合：

到現在誰把三個類都放到一個 TS 裡面了 ？

看起來不多嗎，修改起來太墨跡了，所以我們要把這三個類差分，放到不同的 TS 文件里，然後每一個文件都作為一個模塊暴露出去

首先再 src 下邊創建一個 modules 的文件夾，然後創建三個 TS 文件

然後每一個 TS 都作為模塊暴露出去，代碼為

export default class類名;

都弄完了以後我們還需要一個 TS 文件來把我們這三個 TS 進行一個整合

新建一個 GameControl.ts 它現在就是我們的游戲控制器，控制其他的所有類

GameControl，游戲控制類：

首先先引入其他的類，然後來定義，方便使用，同時 GameControl 這個 TS 也是當一個模塊去暴露出去的，給到我們最終的 index.ts

// 引入其他類
import Food from './Food' // 食物類 Food
import ScorePanel from './ScorePanel' // 記分類 ScorePanel 
import Snake from './Snake' // 蛇 Snake
// 游戲控制器，控制其他的所有類
class GameControl{
    // 定義三個屬性
    food:Food // 食物
    scorepanel:ScorePanel // 記分類
    snake:Snake // 蛇
    constructor(){
        this.food = new Food();
        this.scorepanel = new ScorePanel();
        this.snake = new Snake();
　　　   this.init();
    }
}
export default GameControl;

定義完之後，肯定要有一個游戲的開始，或者一個游戲的初始化方法

那第一件事就是讓我們的蛇可以動，首先綁定一個鍵盤事件

// 創建一個屬性來存儲我們的按鍵,蛇的移動方向
　 direction:string = ''
 // 游戲初始化方法，調用之後游戲開始
    init(){
        // 鍵盤摁下的事件
        document.addEventListener('keydown',this.keydomnHandler.bind(this))
    }
    // ArrowUp
    // ArrowDown
    // ArrowLeft
    // ArrowRight
    // 創建一個鍵盤按下的響應
    keydomnHandler(event:KeyboardEvent){
        // 用戶是否合法，用了正確的摁鍵
        // 觸發按下 修改值
        // console.log(event.key)
        this.direction = event.key
    }

綁定寫完了，我們現在來讓蛇動起來，也就是改蛇的 left 和 top ，向上 top 減少，向下 top 增加，left 同理

    // 創建一個屬性來存儲我們的按鍵,蛇的移動方向
    direction:string = ''
    init(){
        // 鍵盤摁下的事件
        document.addEventListener('keydown',this.keydomnHandler.bind(this));
        this.run();
    }
    run(){
        /**
         * 根據方向 this.direction 來讓我們的蛇改變
         * 向上 top 減少
         * 向下 top 增加
         * 向左 left 減少
         * 向右 left 增加
         */
        let x = this.snake.x
        let y = this.snake.y
        // 計算我們的 x y 值
        switch(this.direction){
            case "ArrowUp": 
            case "Up":
                y -= 10 
                break;
            case "ArrowDown": 
            case "Down":
                y += 10
                break;
            case "ArrowLeft": 
            case "Left":
                x -= 10
                break;
            case "ArrowRight": 
            case "Right":
                x += 10
                break;
        };
        // 修改蛇的 x y 值
        this.snake.x = x;
        this.snake.y = y;
        setTimeout(this.run.bind(this), 500 - (this.scorepanel.lecel -1) * 50); 
    }

setTinmeout 重覆執行我們的代碼，讓蛇一直動，500 的數值越大，蛇走的越慢，讓它隨著我們的等級來走，等級乘 50 就行

接下來我們來寫游戲失敗的方法，貪吃蛇失敗無疑就是撞牆或裝自己身體

而我們再寫 class 類的時候要註意，誰的事情，儘量讓誰去處理，蛇死了，是蛇自己的事情，所以我們在 Snake 也就是蛇類，去處理

我們修改蛇的移動是調用了，Snake 里 set x 和 set y，所以只要給這倆前邊加一個限制

    // 設置我們蛇頭的坐標
    set X(value:number){
        // 新值和舊值相同，不會去改
        if(this.x === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        this.head.style.left =  value + "px" 
    }
    set Y(value:number){
        if(this.y === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        this.head.style.top = value + 'px'
    }

接下來就是如何吃到食物了

    checkEat(x:number,y:number){
        if(x === this.food.x && y === this.food.y){
            // 食物改變位置
            this.food.change()
            // 積分版
            this.scorepanel.addScore()
            // 蛇添加一節
            this.snake.addBody()
        }
    }

我們之前就都定義好了，直接拿來用就行了，剩下的就是我們的身體如何跟頭去移動，還有撞自己身體游戲結束的方法就完成了我們的貪吃蛇

    moveBody(){
        /**
         * 將我們後邊身體設置為前邊身體的位置，從後往前設置
         * 因為你要先設置前邊的，後邊的就找不到原來的值了
         */
        // 遍歷所有的身體
        for(let i=this.bodies.length-1;i>0;i--){
            // 獲取前邊身體的位置
            let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let y = (this.bodies[i-1] as HTMLElement).offsetTop;

            (this.bodies[i] as HTMLElement).style.left = x + 'px';
            (this.bodies[i] as HTMLElement).style.top = y + 'px';
        }
    }

this.bodies 就是蛇的身體長度，那我們蛇怎麼前進呢，就是後邊 div 的位置等於前邊 div 的位置

這樣我們的蛇身子就動起來了，接下來我們寫蛇頭撞身子游戲結束

    checkHeadBody(){
        // 獲取所有的身體，檢查是否和我們的蛇頭的坐標發生重疊
        for(let i=1;i<this.bodies.length;i++){
            let bd = this.bodies[i] as HTMLElement
            if(this.x === bd.offsetLeft && this.y === bd.offsetTop){
                // 進入判斷說明撞了,游戲結束
                throw new Error("撞自己了")
            }
        }
    }

之後我們把這個方法寫到 set x、y裡面最後一段的位置調用

接下來我們固定一下左右，在 set 裡面寫

        // 修改 x 時候 是在修改水平坐標，蛇向左移動時候不能向右 反之同理
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
            console.log("水平掉頭了")
            if(value > this.y){
                // 新值 大於 x 舊值 掉頭 應該繼續走
                value = this.y - 10
            }else{
                value = this.y + 10 
            }
        }

y 軸是同理的

這樣下來我們整個一個貪吃蛇就完成了

 以下貼出所有代碼

Food.ts

// 食物 Food 類
class Food{
    element:HTMLElement;
    constructor(){
        // 拿到元素 id 直接賦值
        this.element = document.getElementById('food')!;
    }
    // 獲取食物 x 軸坐標的方法
    get x(){
        return this.element.offsetLeft
    }
    // 獲取食物 y 軸坐標的方法
    get y(){
        return this.element.offsetTop
    }
    // 修改食物位置
    change(){
        // 生成一個隨機的位置  食物的位置 最小是 0 最大是 290
        // 蛇移動一次是一格，一格大小是 10 所以要求食物的坐標必須是整 10
        let top = Math.round(Math.random() * 29) * 10        
        let left = Math.round(Math.random() * 29) * 10        
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }
}
export default Food;

ScorePanel.ts

// 計分板 定義一個 ScorePanel 類
class ScorePanel{
    // 用來記錄我們的分數和等級
    score = 0
    lecel = 1
    // 記住我們分數和等級 元素，再構造函數中初始化
    scoreSpan:HTMLElement
    lecelSpan:HTMLElement
    // 設置我們的等級最大值
    maxLevel:number
    // 設置多少積分升一級
    upScore:number
    constructor(maxLevel:number = 10,upScore:number = 10){
        this.scoreSpan = document.getElementById('score')!;
        this.lecelSpan = document.getElementById('lecel')!;
        this.maxLevel = maxLevel;
        this.upScore = upScore;
    }
    // 設置一個加分的方法
    addScore(){
        this.score++
        this.scoreSpan.innerHTML = this.score + '';
        // 判斷我們多少積分升一級
        if(this.score % this.upScore === 0){
            this.lecelup();
        }
    }
    // 等級提升
    lecelup(){
        // 判斷是否到達最大等級
        if(this.lecel < this.maxLevel){
            this.lecel++
            this.lecelSpan.innerHTML = this.lecel + '';
        }
    }
}
export default ScorePanel;

 

Snake.ts

// 設置我們的蛇類
class Snake{
    // 蛇的容器
    element:HTMLElement
    // 蛇的頭部
    head:HTMLElement
    // 蛇的身體(包括蛇頭的) HTMLCollection 是一個集合，特點：它是會實時的刷新的
    bodies:HTMLCollection
    constructor(){
        // 容器元素
        this.element = document.getElementById('snake')!;
        // 獲取蛇頭的元素也就是我們元素裡面的第一個 div
        this.head = document.querySelector('#snake > div')! as HTMLElement;
        // 獲取容器裡面的所有 div
        this.bodies = this.element.getElementsByTagName('div')!;
    }
    // 獲取我們的蛇的坐標（蛇頭）
    get x(){
       return this.head.offsetLeft
    }
    get y(){
        return this.head.offsetTop
    }
    // 設置我們蛇頭的坐標
    set X(value:number){
        // 新值和舊值相同，不會去改
        if(this.x === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        // 修改 x 時候 是在修改水平坐標，蛇向左移動時候不能向右 反之同理
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value){
            console.log("水平掉頭了")
            if(value > this.x){
                // 新值 大於 x 舊值 掉頭 應該繼續走
                value = this.x - 10
            }else{
                value = this.x + 10 
            }
        }
        this.moveBody();
        this.head.style.left =  value + "px" ;
        this.checkHeadBody()
    }
    set Y(value:number){
        if(this.y === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        // 修改 x 時候 是在修改水平坐標，蛇向左移動時候不能向右 反之同理
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
            console.log("水平掉頭了")
            if(value > this.y){
                // 新值 大於 x 舊值 掉頭 應該繼續走
                value = this.y - 10
            }else{
                value = this.y + 10 
            }
        }
        this.moveBody();
        this.head.style.top = value + 'px';
        this.checkHeadBody()
    }
    // 蛇增加身體的一個方法
    addBody(){
        // 向 element 中添加 div
        this.element.insertAdjacentHTML('beforeend','<div></div>')
    }
    // 添加一個蛇身體移動的方法
    moveBody(){
        /**
         * 將我們後邊身體設置為前邊身體的位置，從後往前設置
         * 因為你要先設置前邊的，後邊的就找不到原來的值了
         */
        // 遍歷所有的身體
        for(let i=this.bodies.length-1;i>0;i--){
            // 獲取前邊身體的位置
            let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let y = (this.bodies[i-1] as HTMLElement).offsetTop;

            (this.bodies[i] as HTMLElement).style.left = x + 'px';
            (this.bodies[i] as HTMLElement).style.top = y + 'px';
        }
    }
    checkHeadBody(){
        // 獲取所有的身體，檢查是否和我們的蛇頭的坐標發生重疊
        for(let i=1;i<this.bodies.length;i++){
            let bd = this.bodies[i] as HTMLElement
            if(this.x === bd.offsetLeft && this.y === bd.offsetTop){
                // 進入判斷說明撞了,游戲結束
                throw new Error("撞自己了")
            }
        }
    }
}
export default Snake;

GameControl.ts

// 引入其他類
import Food from './Food' // 食物類 Food
import ScorePanel from './ScorePanel' // 記分類 ScorePanel 
import Snake from './Snake' // 蛇 Snake
// 游戲控制器，控制其他的所有類
class GameControl{
    // 定義三個屬性
    food:Food // 食物
    scorepanel:ScorePanel // 記分類
    snake:Snake // 蛇
    // 創建一個屬性來存儲我們的按鍵,蛇的移動方向
    direction:string = ''
    // 創建一個屬性來記錄我們游戲是否結束
    isLive = true
    constructor(){
        this.food = new Food();
        this.scorepanel = new ScorePanel();
        this.snake = new Snake();
        this.init();
    }
    // 游戲初始化方法，調用之後游戲開始
    init(){
        // 鍵盤摁下的事件
        console.log("執行")
        document.addEventListener('keydown',this.keydomnHandler.bind(this));
        this.run();
    }
    // ArrowUp
    // ArrowDown
    // ArrowLeft
    // ArrowRight
    // 創建一個鍵盤按下的響應
    keydomnHandler(event:KeyboardEvent){
        // 用戶是否合法，用了正確的摁鍵
        // 觸發按下 修改值
        console.log(event.key,1111)
        this.direction = event.key
    }
    // 創建蛇移動的方法
    run(){
        /**
         * 根據方向 this.direction 來讓我們的蛇改變
         * 向上 top 減少
         * 向下 top 增加
         * 向左 left 減少
         * 向右 left 增加
         */
        let x = this.snake.x
        let y = this.snake.y
        // 計算我們的 x y 值
        switch(this.direction){
            case "ArrowUp": 
            case "Up":
                y -= 10 
                break;
            case "ArrowDown": 
            case "Down":
                y += 10
                break;
            case "ArrowLeft": 
            case "Left":
                x -= 10
                break;
            case "ArrowRight": 
            case "Right":
                x += 10
                break;
        };
        // 檢查是否吃到了
        this.checkEat(x,y)
        // 修改蛇的 x y 值
        try{
            this.snake.X = x;
            this.snake.Y = y;
        }catch{
            // 捕獲異常，游戲結束
            alert('GAME OVER!')
            this.isLive = false
        }
        // isLive 開關 ture 的話重覆執行
        this.isLive && setTimeout(this.run.bind(this), 500 - (this.scorepanel.lecel -1) * 50); 
    }
    // 定義一個方法，用來檢查是否吃到食物
    checkEat(x:number,y:number){
        if(x === this.food.x && y === this.food.y){
            // 食物改變位置
            this.food.change()
            // 積分版
            this.scorepanel.addScore()
            // 蛇添加一節
            this.snake.addBody()
        }
    }
}
export default GameControl;

index.ts

import "./style/index.less"

import GameControl from './modules/GameControl'

new GameControl();

這裡是六扇有伊人，我們有緣再見

 


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

-Advertisement-
Play Games
更多相關文章
  • Android網路請求(終) 網路請求框架Retrofit
    Android網路請求(終) 網路請求框架Retrofit Retrofit底層是由OkHttp封裝的，Retrofit對於註解的使用十分頻繁，所以不瞭解註解的同學們可以去查查資料什麼的。 這裡有一個小細節，要使用Retrofit至少需要jdk1.8以上和Android API 21以上 Andro ...
  • Android網路請求(4) 網路請求框架Volley
    Android網路請求(4) 網路請求框架Volley Volley是Google在2013年5月15日到17日在舊金山Moscone中心舉辦網路開發者年會中推出的Android非同步網路載入框架和圖片載入框架，它特別適合數據體量小且通訊頻繁的網路操作場景，而Android開發中大多數場景都是這樣的， ...
  • AI賦能音樂創作，人人都是音視頻創作者
    華為HMS Core音頻編輯服務（Audio Editor Kit）依托自身AI技術的研發優勢，上線全新的歌聲合成音色及伴奏，給音視頻創作者提供更多的創作可能。在短視頻場景中，用戶自定義歌詞的歌聲結合視頻讓用戶感受到身臨其境，自由表達自己的情緒；在虛擬偶像場景中，歌聲合成功能賦予虛擬歌手們演唱風格各 ...
  • 我的Vue之旅 11 Vuex 實現購物車
    Vue CartView.vue script 數組的filter函數需要return顯式返回布爾值，該方法得到一個新數組。 使用Vuex store的modules方式，註意讀取狀態的方式 this.$store.state.cart.items 刷新頁面後state狀態還原，需要用session ...
  • vue 指令與過濾器
    vue 指令與過濾器 內容渲染指令 內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有3種。 v-text 示例 <div id="app"> <!-- 把 username 對應的值，渲染到第一個 p 標簽中 --> <p v-text="username"></p> ...
  • vue3和vue2 的區別，vue3和vu2到底哪個好呢？
    vue3 正式發佈有兩年多了，之前也做過一些學習和研究。vue3 發佈後給某培訓機構開發了一套vue3課程課件，自己也開源了一套基於vue3的後臺管理系統（因為個人懶的原因，半年後才上傳到gitHub，且到目前為止一直沒有更新過）。 附上網址：https://github.com/gegestst1 ...
  • vue 中使用 this 更新數據的一次大坑
    情景說明： 之前用 vue 做數據綁定更新時，發現一個莫名奇妙的問題。 我在 vue 實例中聲明瞭一個數組屬性如 books: []，在非同步請求的回調函數中使用 this.books = res.data.data; 進行數據更新，更新步驟後面緊跟著列印了 console.log(this.book ...
  • webpack調優技巧
    webpack優化主要有三個方面：1.提高構建速度，2.減少打包體積，3.優化用戶體驗 提高構建速度： 啟用多線程 thread-loader 使用thread-loader插件可以啟用多線程進行構建。 使用緩存 cache-loader 使用cache-loader插件可以對構建進行緩存，加快後續 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類