web模擬終端博客系統

番茄西紅柿發布于2019-04-23 13:08 / 3442人閱讀

摘要：每次渲染之后記得加個滾動動畫，讓瀏覽器盡可能真實地模擬終端的行為。我們的模擬終端暫時只是文件和目錄的讀取操作，所以自動補全的前提是，系統存儲有完整的目錄和文件。

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

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

開源地址：airingursb/terminal

0x01 樣式

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

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

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

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

[usr@ursb.me ~]%

當然，原始的樣式太丑了，肯定要對 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() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
Nice to Meet U : )
')
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命令字。效果如下：

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

switch (command) {
    case 'help':
      e_main.html($('#main').html() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
' + '[sudo ]command[ Options...]
You can use following commands:

cd
ls
cat
clear
help
exit

Besides, there are some hidden commands, try to find them!
')
      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 文件的代碼，這顯然是不現實的。

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

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

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

0x05 ls

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

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

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

對于第一點，在 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 = `${i}`
          }
          return i
        })
        e_main.html($('#main').html() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
' + data.join('  ') + '
')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      }
    }
  })
  break

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

實現效果如下：

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 })
    }
  })
})

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

回退到主目錄：cd || cd ~ || cd ~/
切換到其他目錄
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() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
')
    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() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
')
        e_html.animate({ scrollTop: $(document).height() }, 0)
        e_pos.html(nowPosition)
      } else if (res.code === 404) {
        e_main.html($('#main').html() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
' + res.message + '
')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      }
    }
})

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

效果如下：

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() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
' + res.data.replace(/n/g, '
') + '
')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      } else if (res.code === 404) {
        e_main.html($('#main').html() + '[' + usrName + '@ursb.me ' + position + ']% ' + input + '
' + res.message + '
')
        e_html.animate({ scrollTop: $(document).height() }, 0)
      }
    }
  })
  break

實現效果如下：

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 }})
  })
})

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

需要注意的是，對于目錄而言，我們用的是默認的字符表的順序排序的，因為 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）：

補全命令
補全 cat 命令后的參數
補全 cd 命令后的參數

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

command = input.split(' ')[0]
if (command === 'l') e_input.val('ls')
if (command === 'c') {
  e_main.html($('#main').html() + '[' + usrName + '@ursb.me ' + nowPosition + ']% ' + input + '
cat  cd  claer
')
}

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 送你一份技術課程大禮包！

云服務器 GPU云服務器終端模擬器 web前端博客 web音視頻會議終端博客系統

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1473.html

發表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

閱讀 713·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3784·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

閱讀 3852·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

閱讀 3869·2021-11-29 11:00
301重定向怎么做?301重定向設置方法有幾種

閱讀 3557·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

閱讀 6105·2021-11-29 11:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

web模擬終端博客系統

0x01 樣式

0x02 渲染邏輯

0x03 help

0x04 clear

0x05 ls

0x06 cd

0x07 cat

0x08 自動補全

0x09 歷史命令

相關文章

發表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

Linux系統和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設置方法有幾種

wordpress網站重定向次數過多的解決方法

最新活動