首先，我是整个Javascript和Node.js领域的新手。我正在开发一个项目，以便将GTIN数据库的信息与网页上的API一起使用。
最终目标是在输入公共地址后，通过公共地址获得一个表，其中包含有关产品的信息以及所有者历史记录，并保存在私有区块链中。
现在我正在建立没有任何区块链连接的网页。
对于后端，我使用Express，BodyParser和Socket.io。
我现在的代码存在的问题是，首先，没有将CSS和脚本文件加载到index.html中，其次，在提交UPC-Number之后，输出仅写在终端中。
以下是我正在使用的API的示例： https://www.upcitemdb.com/upc/884116064244
这是我编码的文件：
server.js
//Dependencies
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var bodyParser = require('body-parser')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
server.listen(3000, function(){
console.log("Listening on port 3000!")
});
var dir = __dirname;
var query;
//app.use('/client', express.static('client'))
//GET
app.get('/', function (req, res) {
res.sendfile(dir + '/index.html');
});
//DBAPI - Works in Console
function DBAPI(gtin){
console.log('Calling API')
//API-Modul - Funktioniert in Konsole
const https = require('https')
var opts = {
hostname: 'api.upcitemdb.com',
path: '/prod/trial/lookup',
method: 'POST',
headers: {
"Content-Type": "application/json",
}
}
var req = https.request(opts, function(res) {
console.log('statusCode: ', res.statusCode);
console.log('headers: ', res.headers);
res.on('data', function(d) {
console.log('BODY: ' + d);
})
})
req.on('error', function(e) {
console.log('problem with request: ' + e.message);
})
req.write('{ "upc": "' + gtin + '" }')
req.end()
}
//POST
app.post('/', function(req, res) {
var query=req.body.input1
console.log('Server: In post request.')
console.log(query);
res.send(200);
res.sendFile(dir + '/return.html');
DBAPI(query);
});
io.on('connection', function(socket) {
socket.on('ready', function() {
socket.emit('change_result', {result: query});
});
});
//Data-Log File - Works
var fs = require('fs');
var util = require('util');
var log_file = fs.createWriteStream(__dirname + '/gtin.log', {flags : 'w'});
var log_stdout = process.stdout;
console.log = function(d) { //
log_file.write(util.format(d) + '\n');
log_stdout.write(util.format(d) + '\n');
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Blockchain-Service für Endkunden</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/css/main.css"/>
<link rel="stylesheet" href="styles/css/normalize.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="scripts/web3.min.js"></script>
<script src="scripts/jsencrypt.min.js"></script>
<script src="scripts/blockchainscripts.js"></script>
<script src="scripts/scripts.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Blockchain-Service</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Angebotene Dienstleistungen <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="laptopservice.html">Laptop-Service</a></li>
<li><a href="containerservice.html">Isolations-Container-Service</a></li>
</ul>
</li>
<li><a href="aboutproject">Über das Projekt</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="jumbotron">
<h1>Laptop-Service</h1>
<p>
<form method="post" action="http://localhost:3000">
<input type="test" name="input1" id="input1" placeholder="Eingabe GTIN">
<input type="submit" id="button1" value="Submit">
</form>
</p>
<p><div id="root"></div></p>
<p onLoad="BuildHTMLTable('#excelDataTable')">
<table id="excelDataTable" border="1">
</table>
</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Mehr erfahren</a></p>
</div>
<footer>©2019 Blockchain-Projekt Gruppe 5</footer>
</body>
</html>
return.html
<!DOCTYPE html>
<html>
<head>
<title>Blockchain-Service für Endkunden</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/css/main.css"/>
<link rel="stylesheet" href="styles/css/normalize.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="scripts/web3.min.js"></script>
<script src="scripts/jsencrypt.min.js"></script>
<script src="scripts/blockchainscripts.js"></script>
<script src="scripts/scripts.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Blockchain-Service</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Angebotene Dienstleistungen <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="laptopservice.html">Laptop-Service</a></li>
<li><a href="containerservice.html">Isolations-Container-Service</a></li>
</ul>
</li>
<li><a href="aboutproject">Über das Projekt</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="jumbotron">
<h1>Laptop-Service</h1>
<p id="heading1">
Ergebnis:
<script>
document.addEventListener('DOMContentLoaded', function() {
var socket = io();
socket.emit('ready', function(data) {});
socket.on('change_result', function(data) {
document.getElementById('heading1').innerHTML = "Result: \""+data.result + "\"";
});
});
</script>
</p>
抱歉，代码有点混乱，但是atm我正在学习很多尝试和错误。
我从Google Chrome的开发人员工具中收到的错误消息如下： Screenshot1
在浏览器标签中输入UPC编号后，收到的唯一消息是“确定”，如屏幕截图2所示。Screenshot2
我的结构如下：
C:\Users\timto\OneDrive\Desktop\website
---client<br>
-------img<br>
-------scripts<br>
-----------blockchainscripts.js<br>
-----------jsencrypt.min.js<br>
-----------scripts.js<br>
-----------web3.min.js<br>
-------styles<br>
-------gtin.log<br>
---node_modules<br>
---gtin.log<br>
---index.html<br>
---package.json<br>
---package-lock.json<br>
---return.html<br>
---server.js<br>
谢谢！
答案 0 :(得分：0)
欢迎来到Node.js / Express的世界！
我认为您应该取消注释以下代码行：
app.use('/client', express.static('client'))
并删除以下代码块：
app.get('/', function (req, res) {
res.sendfile(dir + '/index.html');
});
您还应该将index.html和return.html放到./client目录中，以便它们由上面的express.static代码处理。
我们要在这里描述的故事是：“ ./client的目录结构确切地表示了我希望用户如何通过其浏览器访问我的静态文件。”通过将index.html和return.html放在./client目录中，您无需编写任何特殊代码即可提供这些html文件（因为您的express.static代码正在为您）。
答案 1 :(得分：0)
好的，谢谢您的帮助。我实际上是用Postman重建整个server.js的。
所以代码现在看起来像这样并且可以正常工作：
//Dependencies
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
app.use(express.static(__dirname + '/client'))
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.listen(3000, function(){
console.log("Listening on port 3000!")
});
app.post('/', function(req, res) {
var query=req.body.input1
APIforInformation(query);
console.log(query);
res.end('success!')
});
function APIforInformation(gtin) {
var request = require("request");
var options = { method: 'POST',
url: 'https://api.upcitemdb.com/prod/trial/lookup',
headers:
{ 'Postman-Token': 'ba74ee2a-0e16-4501-a668-34bc741bb576',
'cache-control': 'no-cache',
Authorization: 'Basic Og==',
'Content-Type': 'application/json' },
body: { upc: gtin },
json: true };
request(options, function (error, response, body) {
if (error) throw new Error(error);
console.log(body);
});
}
现在，我被困在使用json文件在return.html上发布信息的关键时刻。
我的index.html的scripts.js仍未加载，我也不知道为什么。