Question

我刚开始学习nodeJS，现在我无法理解如何在html / css中为child_process的输出设置样式。

到目前为止，我有以下代码：

#!/usr/local/bin/node

var express = require('express');
var app = express();
var fs = require('fs');
var govSh = './../sh/govc.sh';
var util = require('util');
var spawn = require('child_process').spawn;
var PORT = 3333;

if (!fs.existsSync(govSh)) {
    console.log("can't find govc script");
    process.exit(1);
};
app.get('/vmlist', function(req, res) {
    var invPath = spawn(govSh, ['vmlist']);
    invPath.stdout.pipe(res);
});

app.listen(PORT, function() {
    console.log("app will listen on port 3333");
});

当我对http://127.0.0.1:3333/vmlist做出回应时，我会在浏览器中看到这个：

{"name":"centos1", "state":"poweredOff", "ram":"1", "vcpu":"1", "ip4":""}
{"name":"centos2", "state":"poweredOff", "ram":"8", "vcpu":"2", "ip4":""}

我怎么可能在html中使用它并用css设置它？或者我如何将它发送到客户端jQuery / Ajax？

编辑：

现在看来，govc.sh脚本将如上输出。但这对我来说不是一个要求，我只想在html中使用输出并设计它。在govc.sh脚本中，使用printf i输出带有for循环的信息：

printf '{"name":"%s", "state":"%s", "ram":"%s", "vcpu":"%s", "ip4":"%s"}\n' ${name} ${vmState} ${vmRam} ${vmCpu} ${vmIp4}

如果在nodejs / javasript中使事情变得更容易，我可以改变它。

Answer 1

要渲染为普通页面您必须使用ejs，jade模板或输出html文件（如本例所示），然后使用jquery等从输出的html调用api。

服务器端代码示例

var express = require('express');
var app = express();
var fs = require('fs');
var path = require('path');
var util = require('util');
var execFile = require('child_process').execFile;
var PORT = 3333;

app.use('/assets', express.static('assets')); // create folder "static" relative to this app file and put Your css, js files inside assets

// put index.html file to relative to this file
app.route('/')
  .all(function(req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
  });

app.route('/vmlist') 
    .get(function(req, res) {
      execFile('./../sh/govc.sh', ['vmlist'], function(err, output) {
          if (err) {
            return res.status(500).send(err);
          }

          // I saw in Your question that application returns 2 json objects 
          // that are an object per line without object delimiter 
          // and array [] chars that will not well handled, 
          // so I'm recreating proper json objects array 
          output = output.split("\n");
          var response = [];
          for(var o in output) {
            var line = output[0].replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); // trimming
            if(line != '') {
              response.push(JSON.parse(line));
            }
          }

          res.json(response); // responding with application/json headers and json objects in it
      });
    });

app.listen(PORT, function() {
    console.log("app will listen on port 3333");
});

客户端（index.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/assets/css/common.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
      $(function() {
        function getVMS() {
          $.get('http://127.0.0.1:3333/vmlist',  {},  function(vms) {
            var html = '';
            for(var v in vms) {
              var vm = vms[v];
              html+= '<div class="cpu">';
              html+= 'Name: '+vm.name+'<br/>';
              html+= 'State: '+vm.state+'<br/>';
              html+= 'RAM: '+vm.ram+'<br/>';
              html+= 'IPv4: '+vm.ip4+'<br/>';
              html+= '</div>';
            }

            $('#vmlist').html(html);
          });
        }

        getVMS(); // initially getting VMS
        setInterval(getVMS, 10000); // getting VMS continuously every 10 second 
      });
    </script>
</head>
<body>

  <div id="vmlist"></div>

</body>
</html>

文件结构：

附：从vmlist正确响应可能存在问题（因为输出格式化）。如果它不起作用请从控制台执行“govc.sh”并在评论中给我输出。

从html中的nodeJS child_process输出样式

1 个答案: