nodejsはフロントエンドからパラメータを受け取り、データを返します
1. 要件分析
フロントエンドはパラメータを送信し、バックエンドとしてnodejsを使用してそれを受信し、データをフロントエンドに返します
2. 実装手順
バックエンドはnodejsで実装し、インターフェースを設定してデータを処理する
データ送信にはクロスドメインの問題が発生する必要がある ここでは、クロスドメインの問題はcorsで処理する
フロントエンドはパラメータをAjaxを介したインターフェース
新しいshell_send.jsを作成する
var express = require('express');
var app = express();
var process = require('child_process');
app.all("*", function (req, res, next) {
//设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//允许的header类型
res.header("Access-Contro1-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options ')
res.send(200);//让options尝试请求快速结束else
next();
})
app.get('/api', function (req, res) {
res.send('OK');
console.log(req.query.a);
process.exec(`/bin/sh send.sh true "@${req.query.a}"`,function (error, stdout, stderr) {
if (error !== null) {
console.log('exec error: ' + error);
}
});
})
var server = app.listen(8083, function () {
var host = server.address().address
var port = server.address().port
})send.html ファイルを作成する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通知</title>
</head>
<body>
<textarea name="aaa" id="aa" cols="30" rows="10"></textarea>
<button>点击发送</button>
</body>
</html>
<script>
let a = document.getElementById("aa");
let btn = document.querySelector("button");
//点击按钮发起Ajax请求,并将textarea中的内容作为参数传递
btn.onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("get","http://10.0.0.203:8083/api?a="+a.value);
xhr.send();
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
五、走る
- ノードでshell_send.jsファイルを実行し、次のようにコマンドを実行します。
node shell_send.js - send.html ファイルを開き、コンテンツ test123 を記述し、送信ボタンをクリックします。
- コンソールで確認でき、送信された情報はノードで受信されます
