HTML中的nodeJS child_process的样式输出

Question

I have just starting learning nodeJS and now I have some trouble understanding how I can style the output from a child_process in html/css. 我刚刚开始学习nodeJS，现在在理解如何设置html / css中child_process的输出样式时遇到了一些麻烦。

This far I have the following code: 到目前为止，我有以下代码：

#!/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");
});

And when I do a reuest to http://127.0.0.1:3333/vmlist I get presented with this in the browser: 当我对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":""}

How is it possible for me to use this in html and style it with css? 我如何在html中使用它并用CSS设置样式？ Or how can I send it to a client side jQuery / Ajax? 或者如何将其发送到客户端jQuery / Ajax？

EDIT: 编辑：

As it looks now, the govc.sh script will output like above. 现在看来，govc.sh脚本将像上面一样输出。 But this is not a requirement for me, i just want to use the output in html and style it. 但这不是我的要求，我只想使用html中的输出并设置其样式。 In the govc.sh script it's with printf i output the info with a for loop: 在govc.sh脚本中，它与printf一起使用for循环输出信息：

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

I can change this if it makes things easier in nodejs/javasript. 如果可以简化nodejs / javasript中的操作，则可以更改此设置。

Answer 1

To render as normal page You've to use ejs, jade templating or output html file (like in this example) and then call api from outputted html using jquery or etc. 渲染为普通页面您必须使用ejs，玉器模板或输出html文件（如本示例中所示），然后使用jquery或类似方法从输出的html中调用api。

Server-side code example 服务器端代码示例

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

Client-side (index.html): 客户端（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>

File structure: 文件结构：

PS There may be issue with properly responding from vmlist (because output formatting). PS从vmlist正确响应可能存在问题（因为输出格式）。 if it will not work please execute "govc.sh" from console and give me output of it in comment. 如果它不起作用，请从控制台执行“ govc.sh”，并在注释中给我输出。

HTML中的nodeJS child_process的样式输出

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-07-10 09:00:57

HTML中的nodeJS child_process的样式输出

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-07-10 09:00:57

解决方案1
1 已采纳 2016-07-10 09:00:57