web模擬終端博客系統

来源:https://www.cnblogs.com/qcloud1001/archive/2018/12/04/10065657.html
-Advertisement-
Play Games

本文由QQ音樂前端團隊發表 前段時間做了一個非常有意思的模擬終端的展示頁：http://ursb.me/terminal/（沒有做移動端適配，請在PC端訪問），這個頁面非常有意思，它可以作為個人博客系統或者給 Linux 初學者學習終端命令，現分享給大家~ 開源地址：airingursb/termi ...


本文由QQ音樂前端團隊發表

前段時間做了一個非常有意思的模擬終端的展示頁：http://ursb.me/terminal/（沒有做移動端適配，請在PC端訪問），這個頁面非常有意思，它可以作為個人博客系統或者給 Linux 初學者學習終端命令，現分享給大家~

開源地址：airingursb/terminal

0x01 樣式

打開頁面效果如下圖所示：

img

其實這裡的樣式就直接 Copy 了自己 Mac 上 Terminal 的界面，當然界面上的參數都是自己寫的，表示窮人沒有錢買這麼高配的電腦…

註：截圖裡面的 logo 是通過archey列印出來的，mac直接輸入 brew install archey 即可安裝。

命令輸入其實只用了一個 input標簽實現的：

<span class="prefix">[<span id='usr'>usr</span>@<span class="host">ursb.me</span> <span id="pos">~</span>]% </span>
<input type="text" class="input-text">

當然，原始的樣式太醜了，肯定要對 input標簽做美化：

.input-text {
    display: inline-block;
    background-color: transparent;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: 0;
    box-sizing: border-box;
    font-size: 17px;
    font-family: Monaco, Cutive Mono, Courier New, Consolas, monospace;
    font-weight: 700;
    color: #fff;
    width: 300px;
    padding-block-end: 0
}

雖然是在瀏覽器訪問，但畢竟我們要模擬終端的效果，因此對滑鼠的樣式最好也修改一下：

* {
    cursor: text;
}

0x02 渲染邏輯

每次列印新的內容其實是一個在之前 html 的基礎上拼接新的內容再重新繪製的過程。渲染時機是用戶按下回車鍵，因此需要監聽keydown事件；渲染函數是mainFunc，傳入用戶輸入的內容和用戶當前的目錄，後者是全局變數，在很多命令中都需要判斷用戶當前的位置。

e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>Nice to Meet U : )<br/>')
e_html.animate({ scrollTop: $(document).height() }, 0)

每次渲染之後記得加個滾動動畫，讓瀏覽器儘可能真實地模擬終端的行為。

$(document).bind('keydown', function (b) {
  e_input.focus()
  if (b.keyCode === 13) {
    e_main.html($('#main').html())
    e_html.animate({ scrollTop: $(document).height() }, 0)
    mainFunc(e_input.val(), nowPosition)
    hisCommand.push(e_input.val())
    isInHis = 0
    e_input.val('')
  }

  // Ctrl + U 清空輸入快捷鍵
  if (b.keyCode === 85 && b.ctrlKey === true) {
    e_input.val('')
    e_input.focus()
  }
})

同時，還實現了一個快捷鍵 Ctrl + U 清空當前輸入，有其他的快捷鍵讀者也可以這樣類似去實現。

0x03 help

我們知道，Linix 命令的規範是 command[Options...]，以防有用戶不瞭解，首先，我實現了一個最簡單的 help命令字。效果如下：

img

直接看代碼，這是直接列印的內容，實現起來非常簡單。

switch (command) {
    case 'help':
      e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>' + '[sudo ]command[ Options...]<br/>You can use following commands:<br/><br/>cd<br/>ls<br/>cat<br/>clear<br/>help<br/>exit<br/><br/>Besides, there are some hidden commands, try to find them!<br/>')
      e_html.animate({ scrollTop: $(document).height() }, 0)
      break
}

其中 command取 input 標簽第一個空格前的元素即可：

command = input.split(' ')[0]

既然知道了怎麼取命令字，那各種列印類型的命令字都是可以自己作為小彩蛋實現~ 這裡就不一一舉例了，讀者可以閱讀源碼自行瞭解。

0x04 clear

clear是清空控制台，實現起來非常簡單，根據我們的渲染邏輯，直接清空外層div中的內容即可。

case 'clear':
  e_main.html('')
  e_html.animate({ scrollTop: $(document).height() }, 0)
  break

既然是博客系統，總不能全部的內容都放在前端頁面的代碼上進行渲染，固定的 help命令或者簡單的列印命令是這樣做是可以的。但如果我們的目錄結構變動了，或者想寫一篇新文章，或者修改文件的內容，那則需要我們大幅度去修改靜態 html 文件的代碼，這顯然是不現實的。

本系統還配套實現了相應的後臺，服務端的作用是用來讀取存放在服務端的目錄和文件內容，並提供對應的介面以便將數據返回給前端。

伺服器存儲的文件層級如下：

img

接下來，來看幾個稍有難度的功能吧。

0x05 ls

ls命令用來顯示目標列表，在 Linux 中是使用率較高的命令。 ls命令的輸出信息可以進行彩色加亮顯示，以分區不同類型的文件。

因此，我們的實現該功能的三個重點是：

  1. 獲取用戶當前的位置
  2. 獲取當前位置下的所有文件和目錄
  3. 需要區分出文件和目錄，以便區分樣式

對於第一點，在 mainFunc中的第二參數是必傳的，它是我們精心維護的一個全局變數（在 cd命令中進行維護）。

對於第二點，我們在後端提供了一個介面：

router.get('/ls', (req, res) => {
  let { dir } = req.query
  glob(`src/file${dir}**`, {}, (err, files) => {
    if (dir === '/') {
      files = files.map(i => i.replace('src/file/', ''))
      files = files.filter(i => !i.includes('/')) // 過濾掉二級目錄
    } else {
      // 如果不在根目錄，則替換掉當前目錄
      dir = dir.substring(1)
      files = files.map(i => i.replace('src/file/', '').replace(dir, ''))
      files = files.filter(i => !i.includes('/') && !i.includes(dir.substring(0, dir.length - 1))) // 過濾掉二級目錄和當前目錄
    }
    return res.jsonp({ code: 0, data: files.map(i => i.replace('src/file/', '').replace(dir, '')) })
  })
})

文件遍歷這裡我們用到了第三方的開源庫glob。如果用戶在主目錄，我們需要過濾掉二級目錄下的文件，因為ls只能看到本目錄下的內容；如果用戶在其他目錄，我們還需要過濾掉當前目錄，因為glob返回的數據包含有當前目錄的名字。

之後，前端直接調用就好：

case 'ls':
  // dir: /dir/
  $.ajax({
    url: host + '/ls',
    data: { dir: position.replace('~', '') + '/' },
    dataType: 'jsonp',
    success: (res) => {
      if (res.code === 0) {
        let data = res.data.map(i => {
          if (!i.includes('.')) {
            // 目錄
            i = `<span class="ls-dir">${i}</span>`
          }
          return i
        })
        e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>' + data.join('&nbsp;&nbsp;') + '<br/>')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      }
    }
  })
  break

前端這裡我們根據是否文件名中是否具有'.'來區分是目錄和文件的，給目錄加上新的樣式。但我們這樣區分其實並不嚴謹，因為目錄名其實也可以具備'.'，目錄本質上也是一個文件。嚴謹的方法應該根據系統的 ls-l命令判斷，我們要實現的博客系統沒有這麼複雜，因此就簡單根據'.'判斷也是適用的。

實現效果如下：

img

0x06 cd

服務端提供介面，pos為用戶當前的位置，dir是用戶想要切換的相對路徑。需要註意的是，這裡過濾了文件，因為cd命令後面的參數只能接目錄；同時這裡並沒有過濾掉二級目錄，因為cd命令後續接的是目錄的路徑，有可能是深層級的。對於目錄不存在的情況，只需要返回一個錯誤碼和提示即可。

router.get('/cd', (req, res) => {
  let { pos, dir } = req.query

  glob(`src/file${pos}**`, {}, (err, files) => {
    pos = pos.substring(1)
    files = files.filter(i => !i.includes('.')) // 過濾掉文件
    files = files.map(i => i.replace('src/file/', '').replace(pos, ''))
    dir = dir.substring(0, dir.length - 1)
    if (files.indexOf(dir) === -1) {
      // 目錄不存在
      return res.jsonp({ code: 404, message: 'cd: no such file or directory: ' + dir })
    } else {
      return res.jsonp({ code: 0 })
    }
  })
})

前端直接調用就好，但是這裡要區分幾種情況：

  1. 回退到主目錄：cd || cd ~ || cd ~/
  2. 切換到其他目錄
    1. 切換到絕對路徑的其他層級：cd ~/dir
    2. 切換為相對路徑的更深層級：cd dir || cd ./dir || cd ../dir || cd .. || cd ../ || cd ../../
    3. 用戶在主目錄：cd ~/dir || cd ./dir || cd dir
    4. 用戶在其他目錄：cd .. || cd ../ || cd ../dir || cd dir || cd ./dir

對於情境1，實現比較簡單，直接將當前目錄切回'~'即可。

if (!input.split(' ')[1] || input.split(' ')[1] === '~' || input.split(' ')[1] === '~/') {
    // 回退到主目錄：cd || cd ~ || cd ~/
    nowPosition = '~'
    e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>')
    e_html.animate({ scrollTop: $(document).height() }, 0)
    e_pos.html(nowPosition)
}

對於情境2之所以還判斷是否在主目錄，是因為解析規則不一樣。其實也可以做個相容合併成一種情況。由於代碼比較長，這裡只列出最複雜的情境2.2.2的代碼：

let pos = '/' + nowPosition.replace('~/', '') + '/'
let backCount = input.split(' ')[1].match(/\.\.\//g) && input.split(' ')[1].match(/\.\.\//g).length || 0

pos = nowPosition.split('/') // [~, blog, img]
nowPosition = pos.slice(0, pos.length - backCount) // [~, blog]
nowPosition = nowPosition.join('/') // ~/blog

pos = '/' + nowPosition.replace('~', '').replace('/', '')  + '/'
dir = dir + '/'
dir = dir.startsWith('./') && dir.substring(1) || dir // 適配：cd ./dir
$.ajax({
    url: host + '/cd',
    data: { dir, pos },
    dataType: 'jsonp',
    success: (res) => {
      if (res.code === 0) {
        nowPosition = '~' + pos.substring(1) + dir.substring(0, dir.length - 1) // ~/blog/img
        e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>')
        e_html.animate({ scrollTop: $(document).height() }, 0)
        e_pos.html(nowPosition)
      } else if (res.code === 404) {
        e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>' + res.message + '<br/>')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      }
    }
})

核心環節是計算回退層數，並根據回退層數判斷出回退後的路徑應該是什麼。回退層數用正則匹配出路徑中'../'的數量即可，而路徑計算則通過數組和字元串的相互轉換可以輕易實現。

效果如下：

img

0x07 cat

cat 命令的實現和 cd 基本一致，只需要將目錄處理換成文件處理即可。

服務端提供介面：

router.get('/cat', (req, res) => {
  let { filename, dir } = req.query

  // 多級目錄拼接： 位於 ~/blog/img, cat banner/menu.md
  dir = (dir + filename).split('/')
  filename = dir.pop() // 丟棄最後一級，其肯定是文件
  dir = dir.join('/') + '/'

  glob(`src/file${dir}*.md`, {}, (err, files) => {
    dir = dir.substring(1)
    files = files.map(i => i.replace('src/file/', '').replace(dir, ''))
    filename = filename.replace('./', '')

    if (files.indexOf(filename) === -1) {
      return res.jsonp({ code: 404, message: 'cat: no such file or directory: ' + filename })
    } else {
      fs.readFile(`src/file/${dir}/${filename}`, 'utf-8', (err, data) => {
        return res.jsonp({ code: 0, data })
      })
    }
  })
})

這裡的目錄拼接計算放在了服務端完成，和之前的拼接方法基本一樣，因為與 cd 命令不同，這裡 nowPosition 不會發生改變，所以可放在服務端計算。

若文件存在，讀取文件內容返回即可；文件不存在，則返回一個錯誤碼和提示。

與 cd 不同的是， cat 更加簡單，前端不需要區分那麼多種情況了，直接調用就好。因為我們不需要再維護 nowPosition 去計算當前路徑，glob 支持相對路徑。

case 'cat':
  file = input.split(' ')[1]
  $.ajax({
    url: host + '/cat',
    data: { filename: file, dir: position.replace('~', '') + '/' },
    dataType: 'jsonp',
    success: (res) => {
      if (res.code === 0) {
        e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>' + res.data.replace(/\n/g, '<br/>') + '<br/>')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      } else if (res.code === 404) {
        e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + position + ']% ' + input + '<br/>' + res.message + '<br/>')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      }
    }
  })
  break

實現效果如下：

img

0x08 自動補全

熟悉命令行的童鞋應該都知道命令行的效率其實大部分情況都比圖形界面快得多，最主要的一點是因為命令行工具支持 Tab 自動補全命令，這使得用戶只需短短幾個字元就可以敲出一大串命令。如此使用且基礎的功能，我們當然也是需要實現的。

所謂自動補全，前提必然是系統知道補全之後的完整內容是啥。我們的模擬終端暫時只是文件和目錄的讀取操作，所以自動補全的前提是，系統存儲有完整的目錄和文件。

這裡用兩個全局變數來分別存儲目錄和文件的數據就好，在頁面一打開時調用：

$(document).ready(() => {
  // 初始化目錄和文件
  $.ajax({
    url: host + '/list',
    data: { dir: '/' },
    dataType: 'jsonp',
    success: (res) => {
      if (res.code === 0) {
        directory = res.data.directory
        directory.shift(); // 去掉第一個 ~
        files = res.data.files
      }
    }
  })
})

服務端介面實現如下：

router.get('/list', (req, res) => {
  // 用於獲取所有目錄和所有文件
  let { dir } = req.query
  glob(`src/file${dir}**`, {}, (err, files) => {
    if (dir === '/') {
      files = files.map(i => i.replace('src/file/', ''))
    }
    files[0] = '~' // 初始化主目錄
    let directory = files.filter(i => !i.includes('.')) // 過濾掉文件
    files = files.filter(i => i.includes('.')) // 只保留文件

    // 文件根據層級排序（預設為首字母排序），以便前端實現最短層級優先匹配
    files = files.sort((a, b) => {
      let deapA = a.match(/\//g) && a.match(/\//g).length || 0
      let deapB = b.match(/\//g) && b.match(/\//g).length || 0

      return deapA - deapB
    })

    return res.jsonp({ code: 0, data: {directory, files }})
  })
})

額，註釋寫的比較詳盡，看註釋就好了…最後得到的兩個數組結構如下：

img

img

需要註意的是，對於目錄而言，我們用的是預設的字元表的順序排序的，因為 cd 到某目錄的自動補全，應該遵循最短路徑匹配；而對於文件而言，我們根據層級深度拍排序的，因為 cat 某文件，是根據最淺路徑匹配的，即應優先匹配當前目錄下的文件。

前端需要監聽 Tab 鍵的 keydown 事件：

if (b.keyCode === 9) {
    pressTab(e_input.val())
    b.preventDefault()
    e_html.animate({ scrollTop: $(document).height() }, 0)
    e_input.focus()
  }

對於pressTab函數，分成了三類情況（因為我們實現的帶參數的命令只有cat和cd）：

  1. 補全命令
  2. 補全 cat 命令後的參數
  3. 補全 cd 命令後的參數

情況1的實現有點蠢萌蠢萌的：

command = input.split(' ')[0]
if (command === 'l') e_input.val('ls')
if (command === 'c') {
  e_main.html($('#main').html() + '[<span id="usr">' + usrName + '</span>@<span class="host">ursb.me</span> ' + nowPosition + ']% ' + input + '<br/>cat&nbsp;&nbsp;cd&nbsp;&nbsp;claer<br/>')
}

if (command === 'ca') e_input.val('cat')
if (command === 'cl' || command === 'cle' || command === 'clea') e_input.val('clea')

對於情況2，cat 命令自動補全只適配文件，即適配我們全局變數files裡面的元素，需要註意的是處理好首碼'./'的情況。直接貼代碼了：

if (input.split(' ')[1] && command === 'cat') {
    file = input.split(' ')[1]
    let pos = nowPosition.replace('~', '').replace('/', '') // 去除主目錄的 ~ 和其他目錄的 ~/ 首碼
    let prefix = ''

    if (file.startsWith('./')) {
        prefix = './'
        file = file.replace('./', '')
    }

    if (nowPosition === '~') {
        files.every(i => {
          if (i.startsWith(pos + file)) {
            e_input.val('cat ' + prefix + i)
            return false
          }
          return true
        })
    } else {
        pos = pos + '/'
        files.every(i => {
          if (i.startsWith(pos + file)) {
            e_input.val('cat ' + prefix + i.replace(pos, ''))
            return false
          }
          return true
        })
    }
}

對於情況3，實現和情況2基本一致，但是 cd 命令自動補全只適配目錄，即配我們全局變數directory 裡面的元素。由於篇幅問題，且此處實現和以上代碼基本重覆，就不貼了。

0x09 歷史命令

Linux 的終端按上下方向鍵可以翻閱用戶歷史輸入的命令，這也是一個很重要很基礎的功能，所以我們來實現一下。

先來幾個全局變數，以便存儲用戶輸入的歷史命令。

let hisCommand = [] // 歷史命令
let cour = 0 // 指針
let isInHis = 0 // 是否為當前輸入的命令，0是，1否

isInHis 變數用於判斷輸入內容是否在歷史記錄里，即用戶輸入了內容哪怕沒有按回車，按了上鍵之後再按下鍵也依然可以復現剛纔自己輸入的內容，不至於清空。（在按回車之後，isInHis = 0）

在監聽keydown事件綁定的時候新增上下方向鍵的監聽：

if (b.keyCode === 38) historyCmd('up')
if (b.keyCode === 40) historyCmd('down')

historyCmd 函數接受的參數則表明用戶的翻閱順序，是前一條還是後一條。

let historyCmd = (k) => {
  $('body,html').animate({ scrollTop: $(document).height() }, 0)

  if (k !== 'up' || isInHis) {
    if (k === 'up' && isInHis) {
      if (cour >= 1) {
        cour--
        e_input.val(hisCommand[cour])
      }
    }
    if (k === 'down' && isInHis) {
      if (cour + 1 <= hisCommand.length - 1) {
        cour++
        $(".input-text").val(hisCommand[cour])
      } else if (cour + 1 === hisCommand.length) {
        $(".input-text").val(inputCache)
      }
    }
  } else {
    inputCache = e_input.val()
    e_input.val(hisCommand[hisCommand.length - 1])
    cour = hisCommand.length - 1
    isInHis = 1
  }
}

代碼實現比較簡單，根據上下鍵移動數組的指針即可。

本代碼已開源（airingursb/terminal），有興趣的小伙伴可以提交 PR，讓我們一起把模擬終端做的更好~

此文已由作者授權騰訊雲+社區發佈，更多原文請點擊

搜索關註公眾號「雲加社區」，第一時間獲取技術乾貨，關註後回覆1024 送你一份技術課程大禮包！


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

-Advertisement-
Play Games
更多相關文章
  • js報錯：Uncaught SyntaxError: Unexpected string
    一、問題 今天在寫jsp頁面時，發現加上某段代碼後，頁面的其它js就失效了，死活出不來，然後打開谷歌瀏覽器發現，頁面js報如下錯誤： Uncaught SyntaxError: Unexpected string 二、解決 1. jQuery有問題？引用的jQuery有衝突？ 然後就去首頁和分頁面檢 ...
  • 創建Aurelia項目
    什麼是Aurelia？ Aurelia 是一個新的開源的，基於web標準的mvvm框架，是一個現代化的js模塊的集合。 Aurelia提供了豐富的plugin，例如國際化，驗證，模態框，UI可視化等。 其強大的binding模塊和template模塊，能夠幫助你更專註於你的業務邏輯，寫出清晰高效的代 ...
  • 微信小程式微信支付的一些坑
    使用的是Node.js作為後端 統一下單： appid：這裡的appid是調起微信支付的appid mch_id：商戶號，需要註意的是商戶號要與appid對應 nonce_str：Math.random().toString(36).substr(2)這是我的隨機字元串的生成演算法 sign：這裡的簽 ...
  • 關於JavaScript原型對象那些事兒
    ①為什麼要使用原型：為了實現繼承。 ②利用constructor屬性可以讓實例化對象輕鬆訪問原型，實現實例化對象對原型對象的修改，但是原型對象是全局對象，一般不能隨意修改原型對象的成員。該屬性多用於調試。 ③原型是構造函數的屬性，原型是實例化對象的原型對象。 ④實例化對象如何訪問原型對象： func ...
  • html前端學習
    html ： 1、相當於沒有穿衣服的人，一套瀏覽器認識的規則， 2、開發者： 學習html規則 開發後臺程式： -寫html文件(充當模板) -資料庫獲取數據，然後替換到html文件的指定位置（web框架） 3、本地測試 -找到文件路徑，直接用瀏覽器打開 -用pycharm打開測試 4、編寫html ...
  • JavaScript裡面的arguments到底是個啥？
    類數組對象：arguments總所周知，js是一門相當靈活的語言。當我們在js中在調用一個函數的時候，我們經常會給這個函數傳遞一些參數，js把傳入到這個函數的全部參數存儲在一個叫做arguments的東西裡面，那麼這到底是什麼東西？在js中萬物皆對象，甚至數組字元串函數都是對象。所以這個叫做argu ...
  • offsetTop 實現滾動條內內容定位
    js代碼： ...
  • Android開發 使用HBuilder的緩存方法
    /* * 中間就可以進行封裝操作 * mui就代表mui，owner就代表window的app屬性，就是一個傳值 */ (function(mui,owner) { /** * 獲取當前狀態 **/ owner.getState = function() { var stateText = plus ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類