整理幾個超實用的前端提效shell命令
curl
curl 是常用的命令行工具，用來請求 Web 服務(wù)器。它的名字就是客戶端（client）的 URL 工具的意思。curl 功能非常強(qiáng)大，它的命令可以直接放到 postman 使用，postman 也是支持 curl 的請求方式。
常用的結(jié)果參數(shù)
curl 的參數(shù)包括很多，這里只說幾個常用的，如果遇到復(fù)雜情況可以參考文檔。
不知道是不是還有的小伙伴不知道 postman 直接支持 curl 命令,在 postman 中點擊 code 就會出現(xiàn)對應(yīng)請求的curl命令
- -X 參數(shù)指定 HTTP 請求的方法。
- -H 參數(shù)添加 HTTP 請求的標(biāo)頭。
- -d 參數(shù)用于發(fā)送 POST 請求的數(shù)據(jù)體。使用 -d 參數(shù)以后，HTTP 請求會自動加上標(biāo)頭Content-Type : application/x-www-form-urlencoded。并且會自動將請求轉(zhuǎn)為 POST 方法，因此可以省略-X POST
- -b 參數(shù)用來向服務(wù)器發(fā)送 Cookie。
- 想了解更多參數(shù)可以去看下阮一峰老師文檔 https://www.ruanyifeng.com/blog/2019/09/curl-reference.html
curl 項目中應(yīng)用
如果對 curl 熟悉的小伙伴完全可以替代 postman 等工具，小伙伴可以直接模擬請求。（我認(rèn)為curl能看到懂常用命令就夠了）
因為在 BFF 項目中，好多時候前端也參與開發(fā)，我們也會直接調(diào)用后端的接口，有時候報錯不知道是不是自己參數(shù)寫錯了，或者 cookie 有問題，找問題調(diào)試不方便，在 local 環(huán)境下，我們會直接打印出完整的 curl 請求，這時候可以直接看出錯誤，開發(fā)者只需要知道 curl 的一些參數(shù)就可以，還可以直接把 curl 命令復(fù)制到 postman 進(jìn)行調(diào)試。看一下具體實現(xiàn)部分代碼
- //只在本地環(huán)境輸出
- if (ctx.app.config.env === 'local') {
- const str =
- curlString(url, {
- method,
- headers,
- body,
- }) + '\n';
- console.log('\x1b[32m%s\x1b[0m', str);
- }
- /**
- * Builds a curl command and returns the string.
- * @param {String} url Endpoint
- * @param {Object} options Object with headers, etc. (fetch format)
- * @return {String} cURL command
- */
- function curlString(url, options) {
- const method = options && options.method && typeof options.method === 'string' ? options.method.toUpperCase() : 'GET';
- const hasHeaders = options && options.headers && typeof options.headers === 'object';
- const hasBody = options && options.body;
- let curl = `\ncurl --request ${method} \\\n--url '${url}'`;
- if (hasHeaders) {
- curl +=
- ' \\\n' +
- Object.entries(options.headers)
- .filter(([key, value]) => value !== undefined)
- .map(([key, value]) => `--header '${key}: ${value}'`)
- .join(' \\\n');
- }
- if (hasBody) {
- curl += ` \\\n--data '${bodyToDataString(options)}'`;
- }
- return curl;
- }
- /**
- * Constructs a body string for use inside --data
- * @param {Object} options Object with headers, etc. (fetch format)
- * @return {String} cURL command data string
- */
- function bodyToDataString(options) {
- let parsedData;
- try {
- parsedData = JSON.parse(options.body);
- } catch (e) {
- // fall back to original body if it could not be parsed as JSON
- parsedData = options.body;
- }
- // return an ampersand delimited string
- const headers = _.get(options, 'headers');
- const contentType = _.toLower(_.get(headers, 'content-type') || _.get(headers, 'Content-Type'));
- if (contentType === 'application/x-www-form-urlencoded') {
- if (typeof parsedData === 'string') {
- return parsedData;
- } else {
- return Object.entries(parsedData)
- .map(([key, val]) => `${key}=${val}`)
- .join('&');
- }
- } else {
- return JSON.stringify(parsedData);
- }
- }
vim 中的基本操作和配置
非 insert 模式
在 vim 打開文件后，還沒有使用插入編輯，可以做哪些基本操作
- G 快速移動到文件底部(常用于查看日志)
- gg 快速移動到文件頂部
- 0 快速移動到行首
- $ 快速移動到行尾
- :13 快速移動到特定行
- ZZ 光標(biāo)移動到本屏中間
- dd 剪切本行
- yy 復(fù)制本行
- u 撤銷（undo縮寫，撤銷）
- p 粘貼 （p指paste，粘貼）
- 在 mac 系統(tǒng)下可以 option+點擊 快速移動到想要的位置（也就是光標(biāo)）
insert 模式
前面說了多種移動方式，接下來結(jié)束幾個常用的 insert 命令，我這里就結(jié)束一些常用簡單的
- i 在當(dāng)前光標(biāo)的前面進(jìn)行編輯
- o 快速進(jìn)入 insert 模式，并定位到下一行編輯
- esc 退出 insert 模式，與 <crtl-[>
ping
在網(wǎng)絡(luò)中 ping 是一個十分強(qiáng)大的 TCP/IP 工具。
- 用來檢測網(wǎng)絡(luò)的連通情況和分析網(wǎng)絡(luò)速度
- 根據(jù)域名得到服務(wù)器IP
- 根據(jù)ping返回的TTL值來判斷對方所使用的操作系統(tǒng)及數(shù)據(jù)包經(jīng)過路由器數(shù)量。
bytes值：數(shù)據(jù)包大小，也就是字節(jié)。
time值：響應(yīng)時間，這個時間越小，說明你連接這個地址速度越快。
TTL值：Time To Live,表示DNS記錄在DNS服務(wù)器上存在的時間，它是 IP 協(xié)議包的一個值，告訴路由器該數(shù)據(jù)包何時需要被丟棄?？梢酝ㄟ^ Ping 返回的 TTL 值大小，粗略地判斷目標(biāo)系統(tǒng)類型是 Windows 系列還是 UNIX/Linux 系列。
默認(rèn)情況下，Linux 系統(tǒng)的TTL值為64或255，WindowsNT/2000/XP 系統(tǒng)的 TTL 值為 128，Windows98 系統(tǒng)的 TTL 值為32，UNIX 主機(jī)的 TTL 值為 255。
除了直接 ping ip ，還可以 ping 域名，會自動把域名解析為 ip。
應(yīng)用
最常用的方式是直接ping ip地址，測試網(wǎng)絡(luò)連通性
學(xué)會看懂出錯提示信息
（1）NoAnswer：這種故障表明本機(jī)有一條通向中心主機(jī)的路由，但沒有收到發(fā)給該中心主機(jī)的任何信息。原因可能是：中心主機(jī)沒有工作、本機(jī)或中心主機(jī)網(wǎng)絡(luò)配置不正確、本地或中心的路由器沒有工作、通信線路有故障、中心主機(jī)存在路由選擇問題，等等。
（2）Request Timed Out：超時錯誤，被測試的機(jī)器不能正常連接，原因可能是該主機(jī)此時未連接（如已關(guān)機(jī)）、或到路由器的連接有問題、或路由器不能通過，或?qū)Ψ街鳈C(jī)使用了防火墻軟件禁止進(jìn)行 Ping 測試等等。
（3）Unknown Host Name：無法解析主機(jī)名字，可能是DNS設(shè)置不對，或者對方主機(jī)不存在
telnet
telnet 經(jīng)?？梢源_定遠(yuǎn)程服務(wù)的狀態(tài)，比如確定遠(yuǎn)程服務(wù)器的某個端口是否能訪問（端口連通性）。
telenet是windows標(biāo)準(zhǔn)服務(wù)，可以直接用;如果是linux或者mac，需要自己安裝telnet
使用 telnet ip port
1）先用telnet連接不存在的端口
- [root@localhost ~]# telnet 10.0.250.3 80
- Trying 10.0.250.3...
telnet: connect to address 10.0.250.3: Connection refused #直接提示連接被拒絕
2）再連接存在的端口
- [root@localhost ~]# telnet localhost 22
- Trying ::1...
- Connected to localhost. #看到Connected就連接成功了
- Escape character is '^]'.
- SSH-2.0-OpenSSH_5.3
- a
- Protocol mismatch.
- Connection closed by foreign host.
總結(jié)
優(yōu)秀和常用的 shell 命令有好多，我這里只寫了幾個非常常用，并且前端開發(fā)者也會經(jīng)常用到的命令，希望對小伙伴們有一丟丟幫助。
