Создайте HTML-страницу с выводом после запроса GET и POST

Во-первых, я относительно новичок во всем мире Javascript и Node.js. Я работаю над проектом по использованию информации из базы данных GTIN с API на веб-странице.

Конечная цель — получить таблицу с информацией о продукте, смешанную с историей владельца, сохраненную в приватном блокчейне через публичный адрес после ввода публичного адреса.

Прямо сейчас я создаю веб-страницу без какой-либо связи с блокчейном.

Для бэкенда я использую Express, BodyParser и Socket.io.

Проблема с моим кодом сейчас заключается в том, что, во-первых, в index.html не загружаются никакие файлы css и скриптов, а во-вторых, после отправки UPC-номера вывод просто записывается в терминал.

Вот пример API, который я использую: https://www.upcitemdb.com/upc/884116064244

Вот мои файлы, которые я закодировал:

сервер.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.info("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.info('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.info('statusCode: ', res.statusCode);
    console.info('headers: ', res.headers);
    res.on('data', function(d) {
      console.info('BODY: ' + d);
    })
  })
  req.on('error', function(e) {
    console.info('problem with request: ' + e.message);
  })
  req.write('{ "upc": "' + gtin + '" }')
  req.end()
}


//POST
app.post('/', function(req, res) {
    var query=req.body.input1
    console.info('Server: In post request.')
    console.info(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.info = 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>

Извините, что код немного сбивает с толку, но я многому учусь методом проб и ошибок.

Сообщение об ошибке, которое я получаю в инструменте разработчика из Google Chrome, выглядит следующим образом: Скриншот1

После того, как я ввожу номер UPC на вкладке браузера, единственное сообщение, которое я получаю, это «ОК», как вы можете видеть на снимке экрана 2. Скриншот2

Моя структура выглядит следующим образом:

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>

Заранее спасибо!

javascript html node.js blockchain

14.03.2019 17:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

875

Ответы 2

Добро пожаловать в мир 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 делает это за вас).

Хорошо, спасибо за помощь. На самом деле я перестраиваю весь server.js с помощью Postman.

— 20.03.2019 15:17

14.03.2019 17:40

Хорошо, спасибо за помощь. На самом деле я перестраиваю весь server.js с помощью Postman.

Итак, код сейчас выглядит так и работает:

    //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.info("Listening on port 3000!")
  });

app.post('/', function(req, res) {
    var query=req.body.input1
    APIforInformation(query);
    console.info(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.info(body);
    });

}

Теперь я застрял на том, чтобы использовать файл json для публикации информации в моем файле return.html.

scripts.js для моего index.html все еще не загружается, и я не знаю, почему.

20.03.2019 15:31