如何使用jQuery Terminal向shell发送命令并打印返回结果？

前置说明 #

前端无法直接调用本地系统的Shell接口，所有命令都需要转发到后端服务执行，再把执行结果返回给前端渲染，你需要提前准备好对应的后端命令执行接口。

1. 资源引入与容器准备 #

<!-- 引入依赖资源 -->
<link rel="stylesheet" href="jquery.terminal.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.terminal.min.js"></script>
<!-- 终端挂载容器 -->
<div id="web-terminal"></div>

2. 终端初始化与命令收发逻辑 #

jQuery Terminal 初始化时传入的interpreter回调会在每次用户输入命令回车时触发，你可以在回调内完成命令发送、结果接收和打印的逻辑：

$('#web-terminal').terminal(function (command, termInstance) {
    // 过滤空命令
    const trimCmd = command.trim();
    if (!trimCmd) return;

    // 向后端发送命令执行请求
    $.post('/api/exec-shell', { command: trimCmd })
        .done(function (resp) {
            // 打印后端返回的执行结果
            termInstance.echo(resp.result);
        })
        .fail(function (error) {
            // 打印错误信息，*包裹的内容会在终端内斜体高亮
            termInstance.echo(`*执行失败：${error.responseText || '未知异常'}*`);
        });
}, {
    // 终端基础配置
    greetings: 'Web Shell 终端已启动\n',
    prompt: 'user@web-shell $ ',
    height: 600,
    enableCompletion: true
});

3. 代码自动触发命令执行 #

如果需要在非用户输入的场景下主动发送命令，可以调用终端实例的exec方法：

// 获取已初始化的终端实例
const terminal = $('#web-terminal').terminal();
// 自动执行pwd命令
terminal.exec('pwd');

安全提示 #

• 后端必须做严格的命令过滤和权限校验，禁止执行rm、mkfs等高风险命令，避免服务器被攻击
• 命令执行需要增加超时控制，避免进程长期阻塞占用资源
• 返回给前端的结果需要做特殊字符转义，避免破坏终端显示格式

内容的提问来源于stack exchange，提问作者jcubic