专栏首页程序员成长指北整理几个超实用的前端提效 shell 命令

整理几个超实用的前端提效 shell 命令

curl

curl 是常用的命令行工具,用来请求 Web 服务器。它的名字就是客户端(client)的 URL 工具的意思。curl 功能非常强大,它的命令可以直接放到 postman 使用,postman 也是支持 curl 的请求方式。

常用的结果参数

curl 的参数包括很多,这里只说几个常用的,如果遇到复杂情况可以参考文档。

不知道是不是还有的小伙伴不知道 postman 直接支持 curl 命令,在 postman 中点击 code 就会出现对应请求的curl命令

  • -X 参数指定 HTTP 请求的方法。
  • -H 参数添加 HTTP 请求的标头。
  • -d 参数用于发送 POST 请求的数据体。使用 -d 参数以后,HTTP 请求会自动加上标头Content-Type : application/x-www-form-urlencoded。并且会自动将请求转为 POST 方法,因此可以省略-X POST
  • -b 参数用来向服务器发送 Cookie
  • 想了解更多参数可以去看下阮一峰老师文档 https://www.ruanyifeng.com/blog/2019/09/curl-reference.html

curl 项目中应用

如果对 curl 熟悉的小伙伴完全可以替代 postman 等工具,小伙伴可以直接模拟请求。(我认为curl能看到懂常用命令就够了)

因为在 BFF 项目中,好多时候前端也参与开发,我们也会直接调用后端的接口,有时候报错不知道是不是自己参数写错了,或者 cookie 有问题,找问题调试不方便,在 local 环境下,我们会直接打印出完整的 curl 请求,这时候可以直接看出错误,开发者只需要知道 curl 的一些参数就可以,还可以直接把 curl 命令复制到 postman 进行调试。看一下具体实现部分代码

 //只在本地环境输出
    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 打开文件后,还没有使用插入编辑,可以做哪些基本操作

  1. G 快速移动到文件底部(常用于查看日志)
  2. gg 快速移动到文件顶部
  3. 0 快速移动到行首
  4. $ 快速移动到行尾
  5. :13 快速移动到特定行
  6. ZZ 光标移动到本屏中间
  7. dd 剪切本行
  8. yy 复制本行
  9. u 撤销(undo缩写,撤销)
  10. p 粘贴 (p指paste,粘贴)
  11. mac 系统下可以 option+点击 快速移动到想要的位置(也就是光标)

insert 模式

前面说了多种移动方式,接下来结束几个常用的 insert 命令,我这里就结束一些常用简单的

  1. i 在当前光标的前面进行编辑
  2. o 快速进入 insert 模式,并定位到下一行编辑
  3. esc 退出 insert 模式,与 <crtl-[>

ping

在网络中 ping 是一个十分强大的 TCP/IP 工具。

  1. 用来检测网络的连通情况和分析网络速度
  2. 根据域名得到服务器IP
  3. 根据ping返回的TTL值来判断对方所使用的操作系统及数据包经过路由器数量。

bytes值:数据包大小,也就是字节。

time值:响应时间,这个时间越小,说明你连接这个地址速度越快。

TTL值:Time To Live,表示DNS记录在DNS服务器上存在的时间,它是 IP 协议包的一个值,告诉路由器该数据包何时需要被丢弃。可以通过 Ping 返回的 TTL 值大小,粗略地判断目标系统类型是 Windows 系列还是 UNIX/Linux 系列。

默认情况下,Linux 系统的TTL值为64或255,WindowsNT/2000/XP 系统的 TTL 值为 128,Windows98 系统的 TTL 值为32,UNIX 主机的 TTL 值为 255。

除了直接 ping ip ,还可以 ping 域名,会自动把域名解析为 ip

应用

最常用的方式是直接ping ip地址,测试网络连通性

学会看懂出错提示信息

(1)NoAnswer:这种故障表明本机有一条通向中心主机的路由,但没有收到发给该中心主机的任何信息。原因可能是:中心主机没有工作、本机或中心主机网络配置不正确、本地或中心的路由器没有工作、通信线路有故障、中心主机存在路由选择问题,等等。

(2)Request Timed Out:超时错误,被测试的机器不能正常连接,原因可能是该主机此时未连接(如已关机)、或到路由器的连接有问题、或路由器不能通过,或对方主机使用了防火墙软件禁止进行 Ping 测试等等。

(3)Unknown Host Name:无法解析主机名字,可能是DNS设置不对,或者对方主机不存在

telnet

telnet 经常可以确定远程服务的状态,比如确定远程服务器的某个端口是否能访问(端口连通性)。

telenetwindows标准服务,可以直接用;如果是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.

总结

优秀和常用的 shell 命令有好多,我这里只写了几个非常常用,并且前端开发者也会经常用到的命令,希望对小伙伴们有一丢丢帮助。

本文分享自微信公众号 - 程序员成长指北(coder_growth),作者:koala

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么HTTPS比HTTP更安全?

    近几年,互联网发生着翻天覆地的变化,尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代,在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进...

    coder_koala
  • 优雅简洁的异步Asnyc/Await

    async函数中,如果有多个await关键字时,如果有一个await的状态变成了rejected,那么后面的操作都不会继续执行,promise也是同理有这样一个...

    coder_koala
  • 前端安全编码规范

    随着互联网高速的发展,信息安全已经成为企业重点关注焦点之一,而前端又是引发安全问题的高危据点,所以,作为一个前端开发人员,需要了解前端的安全问题,以及如何去预防...

    coder_koala
  • Linux 命令(136)—— curl 命令

    curl 命令是一个利用 URL 规则在 Shell 终端命令行下工作的文件传输工具;它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称 curl 为...

    Dabelv
  • 国内首家云计算交易平台将于9月底正式上线

    28日,“2014云计算产业市场化论坛”在上海举行。中亚商品交易中心总经理何杰在会上宣布, 云计算的商品化交易于今年9月底正式上线。 工信部软件服务业司司长陈伟...

    静一
  • lodash源码分析之自减的两种形式

    这个世界需要一个特定的恶人,可以供人们指名道姓,千夫所指:“全都怪你”。 ——村上春树《当我谈跑步时我谈些什么》 本文为读 lodash 源码的第六篇,后续...

    对角另一面
  • lodash源码分析之自减的两种形式

    本文为读 lodash 源码的第六篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash

    对角另一面
  • 第七天、判断三角形的类型

        根据输入的三角形的三条边判断三角形的类型,并输出它的面积和类型。 C代码: /*第七天、判断三角形的类型*/ #include <stdio.h> ...

    Jack_Cui
  • 如何实现JS函数的重载

        本人主要学的是java,也习惯使用面向对象的思维来思考东西,但是我却发现,javascript不能支持函数的重载,如下:

    源哥
  • 生成ID模板:年月日时分秒+6位自增码

    由于生成订单ID、商品ID 或者什么什么ID的,不想用自增,又怕重复,于是就用 年与日时分秒 + 6位自增码 (共计20位长度)来当作ID

    执笔记忆的空白

扫码关注云+社区

领取腾讯云代金券