gpt4 book ai didi

javascript - html 中 nodeJS child_process 的样式输出

转载 作者:太空宇宙 更新时间:2023-11-04 10:01:46 24 4
gpt4 key购买 nike

我刚刚开始学习 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 一起使用 for 循环输出信息:

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

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

最佳答案

要呈现为普通页面,您必须使用 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>



文件结构:
enter image description here

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

关于javascript - html 中 nodeJS child_process 的样式输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38289638/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com