Node.js – die neusten Beiträge

Verwandte Themen
paypalapi
26.11.2024, 14:25
Mit Links

Paypal SDK von USD auf EUR umstellen funktioniert nicht?

Ich habe beide Stellen im Code geändert:

script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=EUR`;

und

currency_code: 'EUR',

Bekomme jedoch den folgenden Fehler https://pastebin.com/6eNUSdX9

Wichtigster Ausschnitt:

Error: Unexpected currency: EUR passed to order.create. Please ensure you are passing /sdk/js?currency=EUR in the paypal script tag.

Der Fehler tritt auf, wenn ich USD auf EUR ändere. Hier ist meine

/app/paypal/page.tsx

https://pastebin.com/9GM500eR die ganze datei

Wichtigster Ausschnitt: der mit USD funktioniert:

<PayPalScriptProvider options={{ clientId }}>
            <div className="flex justify-center">
              <PayPalButtons
                style={{
                  layout: 'vertical',
                  color: 'blue',
                  shape: 'rect',
                  label: 'paypal',
                }}
                createOrder={(data, actions) => {
                  if (!actions || !actions.order) {
                    console.error('Fehler: actions.order ist nicht definiert');
                    return Promise.reject('Fehler bei der Erstellung der Bestellung');
                  }
 
                  return actions.order.create({
                    purchase_units: [
                      {
                        amount: {
                          currency_code: 'USD',
                          value: '100.00',
                        },
                      },
                    ],
                    intent: 'CAPTURE'
                  });
                }}
                onApprove={(data, actions) => {
                  if (!actions || !actions.order) {
                    console.error('Fehler: actions.order ist nicht definiert');
                    return Promise.reject('Fehler bei der Genehmigung der Bestellung');
                  }
 
                  return actions.order.capture().then((details) => {
                    console.log('Zahlung erfolgreich abgeschlossen:', details);
                    setPaymentSuccess(true);  // Zeigt die Erfolgsmeldung an
                    setErrorMessage('');  // Setzt die Fehlermeldung zurück
                    return Promise.resolve();
                  });
                }}
                onError={(err) => {
                  console.error('Fehler bei der PayPal-Zahlung:', err);
                  setErrorMessage('Es gab ein Problem bei Ihrer Zahlung. Bitte versuchen Sie es erneut.'); // Zeigt die Fehlermeldung an
                  setPaymentSuccess(false); // Setzt den Zahlungserfolgsstatus zurück
                }}
              />
            </div>
          </PayPalScriptProvider>

Meine

env Datei ist folgendermaßen konfiguriert:
makefile
Code kopieren
NEXT_PUBLIC_PAYPAL_CLIENT_ID = "12345"
PAYPAL_CLIENT_ID = "12345"
PAYPAL_CLIENT_SECRET = "ABCDEF"
PAYPAL_WEBHOOK_SECRET="XYZ123"

Ich habe den currency_code von 'USD' auf 'EUR' geändert und auch die URL des PayPal-Skripts angepasst:

script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=EUR`;

Trotzdem bekomme ich den Fehler, dass EUR nicht als Währung erkannt wird.

Ich habe die Dokumentation auf PayPal Developer überprüft, und laut dieser ist

EUR

der richtige Währungscode.

  • Ich benutze Next.js 15 und habe auf React 18 downgraden müssen, da React 19 nicht mit
@paypal/react-paypal-js
  • kompatibel ist aber spielt eigentlich keiner olle und sowohl im sandbox oder live modus dasselbe das man nach dem klick auf dem button mit EUR einen fehler bekommt.

Kann mir jemand helfen, was hier das Problem ist?

PC, Computer, Internet, App, Technik, IT, Webseite, JavaScript, Code, Informatik, PayPal, Programmiersprache, sdk, Webentwicklung, node.js
2 Antworten
CoSci
07.10.2024, 23:11
Mit Bildern
Mit Links

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung, Frontend, node.js
2 Antworten
JanMarcel01
04.07.2024, 19:54
Mit Links

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
1 Antwort
melisax795
03.07.2024, 11:19
Mit Bildern

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag
HTML, Webseite, JavaScript, Webentwicklung, React, node.js
2 Antworten
arduinoinspace
25.05.2024, 14:11

Programm auslesen eines Arduinos?

hey, ich versuche gerade (immer noch) Daten von meinem Arduino zu einer Datenbank in mysql zu senden. Jedoch kommt nichts an und beim Arduino blinkt die ganze Zeit TX (was doch fürs Daten senden steht, oder?).

Hier das Programm von VSC:

var mysql = require('mysql');


var SerialPort = require("serialport");


var column_name = 'Wert'
var table_name = 'Wertetabelle'


const parsers = SerialPort.parsers;
const parser = new parsers.Readline({
    delimiter: '\r\n'
});


var port = new SerialPort('COM4', {
    baudRate: 9600,
    dataBits: 8,
    parity: 'none',
    stopBits: 1,
    flowControl: false
});


port.pipe(parser);


//Determine the connection to MySQL
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "werte_datenbank"
});


//Connect with Database
con.connect(function(err) {
    // Build the connection
    if (err) throw err;
    console.log("Connected!");
});


parser.on('data', function(data){
    console.log(data);


    // Deklariert was genau wo gespeichert werden soll
    var sql = "INSERT INTO `werte_tabelle` (`Wert`) VALUES ('" + data + "');"


    // Speichert bei Änderungen die neuen Daten in der Datenbank
    con.query(sql, function (err, result) {
      if (err) throw err;
      console.log("1 record inserted");
    });
});


//DELETE FROM `werte_tabelle` WHERE 1
var sql = "DELETE FROM `werte_tabelle` WHERE 1"
// Löscht die Datenbank
con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("Every Entry deleted");

});

Hier das Programm vom Arduino Editor:

int pinPx = 3;
int x = 1;
const long intervall = 20000;
bool zeitspanne = true;
float zeit_now = millis();


void setup() {
  Serial.begin(9600);
  pinMode(pinPx, INPUT);


}


void loop() {
  zeit_now = millis();


  while (zeitspanne == true) {
    if (digitalRead(pinPx) == true) {
      Serial.write(x);
    }
    if (millis() > (zeit_now + intervall)) {
      zeitspanne = false;


    }
  }


  pinPx = pinPx + 1;
  x = x + 1;
  zeitspanne = true;
}

Vielen Dank!!

Arduino, Code, Datenbank, MySQL, Programmiersprache, phpMyAdmin, node.js
1 Antwort
arduinoinspace
02.05.2024, 15:29
Mit Links

Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>
Computer, HTML, IT, JavaScript, Anwendungsentwicklung, Arduino, Code, Programmiersprache, Webentwicklung, node.js, Visual Studio Code
1 Antwort
Bxrchiii
27.04.2024, 20:22
Mit Links

TypeError: Cannot read properties of undefined (reading 'checkHealth')?

Hallo, ich habe einen error der mir sagt das checkHealth undefined ist wenn ich über npm devDeploy ausführe. Dort soll eigentlich meine Datei deployCommands.ts ausgeführt werden er geht aber erst in meine main.ts rein und dort tritt der fehler auf. Wenn ich aber nur dev ausführe was die main aufrufen soll und den Bot startet kommt kein fehler.

DeployCommands.ts: https://pastebin.com/5YAUhLfb

main.ts: https://pastebin.com/nWjvk3UD

package.json: https://pastebin.com/qV7ThnVW

Git Repo: https://github.com/luka-lta/byteBuddy_bot

/home/luka-lta/projects/PhpStorm/byteBuddy_bot/main.ts:6
ApiUtil.checkHealth().then((healthy) => {
        ^
TypeError: Cannot read properties of undefined (reading 'checkHealth')
    at Object.<anonymous> (/home/luka-lta/projects/PhpStorm/byteBuddy_bot/main.ts:6:9)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module.m._compile (/home/luka-lta/.nvm/versions/node/v21.6.2/lib/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Object.require.extensions.<computed> [as .ts] (/home/luka-lta/.nvm/versions/node/v21.6.2/lib/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/luka-lta/projects/PhpStorm/byteBuddy_bot/src/value/ByteBuddyChannel.ts:2:1)
Programmiersprache, node.js, TypeScript
1 Antwort
timo343245
14.03.2024, 14:47

Wie kann ich den Fehler beheben?

const http = require('http');
const fs = require('fs');
const mysql = require("mysql2");

var db  = mysql.createConnection({
    host : "localhost",
    user : "root",
    password : "passwort",
    database : "test-datenbank"
});


db.connect(function (error){
    if (error) throw error;
    console.log("Connected!")
    var sql = "INSERT INTO benutzer (username) VALUES ('Beispiel')";
    db.query(sql, function (error,result){
        if(error) throw error;
        console.log("1 record inserted");
    });
    sql="SELECT * FROM benutzer"
    
    db.query(sql,function(error,result){
        if (error) throw error;
        console.log(result);

    });
});

const server = http.createServer((req,res) => {
    const url = req.url;
    const method = req.method;
    

    if ( url === "/"){
    res.setHeader("key","value");
    res.setHeader("Content-Type","text/html");
    res.write('</html><body>');
    res.write('<h1>Main</h1>');
    res.write('<h1><form action="/register" method="post"> <input type="text" name="Username"><br><button type="submit">Click</button></form></h1>');
    res.write("</body></html>");
    res.end()
    return;
    }

    if (url === "/register"){
         
        const reqBody = []
         req.on('data', (chunk)=>{
            console.log(chunk);
            reqBody.push(chunk);
     });
        
     req.on('end', () => {
        console.log(reqBody);
        const parsed = Buffer.concat(reqBody).toString();
        console.log(parsed);
        const user = parsed.split('=')[1];
        console.log(user)
        
        // funktioniert nicht 
        sql = 'INSERT INTO benutzer (username) VALUES ?, user;
        db.query(sql,function(error,result){
            if (error) throw error;
            console.log(result);
        });



});
        
        
        res.setHeader("key","value");
        res.setHeader("Content-Type","text/html");
        res.write('</html>');
        res.write('<body><h1>Registriert</h1></body>');
        res.write("</html>");
        res.end()
        return;

    }
    
}) 



server.listen(1337);

Der Fehler lautet wie folgt:

code: 'ER_PARSE_ERROR',

 errno: 1064,

 sqlState: '42000',

 sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1",

 sql: 'INSERT INTO benutzer (username) VALUES',

 fatal: true

SQL, Webentwicklung, node.js
1 Antwort
Mensch4
10.11.2023, 02:51

Nodejs mariadb Column count doesn't match value count at row 1?

meine datenbank hat 4 spalten aber ich setze nur 3 ein weil die letzte eine auto_increment spalte ist,

ich nutze nodejs mit mariadb und habe folgende fehlermeldung beim daten einsetzen:

/home/j44/Downloads/themer/tut/node_modules/mariadb/lib/misc/errors.js:64
  return new SqlError(msg, sql, fatal, info, sqlState, errno, additionalStack, addHeader);
         ^

SqlError: (conn=2420, no: 1136, SQLState: 21S01) Column count doesn't match value count at row 1
sql: INSERT INTO thread value (no, head, ts) - parameters:['1171187570193989762','rrrrrrrrrrrrrrrr',1699303276347]
    at module.exports.createError (/home/j44/Downloads/themer/tut/node_modules/mariadb/lib/misc/errors.js:64:10)
    at PacketNodeEncoded.readError (/home/j44/Downloads/themer/tut/node_modules/mariadb/lib/io/packet.js:582:19)
    at Query.readResponsePacket (/home/j44/Downloads/themer/tut/node_modules/mariadb/lib/cmd/parser.js:58:28)
    at PacketInputStream.receivePacketBasic (/home/j44/Downloads/themer/tut/node_modules/mariadb/lib/io/packet-input-stream.js:85:9)
    at PacketInputStream.onData (/home/j44/Downloads/themer/tut/node_modules/mariadb/lib/io/packet-input-stream.js:135:20)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TCP.onStreamRead (node:internal/stream_base_commons:190:23) {
  sqlMessage: "Column count doesn't match value count at row 1",
  sql: "INSERT INTO thread value (no, head, ts) - parameters:['1171187570193989762','rrrrrrrrrrrrrrrr',1699303276347]",
  fatal: false,
  errno: 1136,
  sqlState: '21S01',
  code: 'ER_WRONG_VALUE_COUNT_ON_ROW'
}
SQL, programmieren, JavaScript, Datenbank, MySQL, node.js, Discord, Discord Bot
2 Antworten
ErstelleProfil1
21.10.2023, 05:19
Beitrag wurde 1 Mal erneut eingestellt
Mit Links

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>
Browser, Linux, HTML, IT, Webseite, JavaScript, Ubuntu, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node.js, React Native
1 Antwort
Kugelfisch647
08.04.2023, 20:08

Electron Datei Öffnen und Inhalt in Script übergeben?

Ich möchte in meinem Electron Programm im Menü die Möglichkeit bieten eine Datei zu öffnen. Die Datei enthält JSON. Ich möchte den Inhalt dann in meinem Script weiterverarbeiten um ihn anzuzeigen. Das ist mein Code bis jetzt:

main.js

const { app, BrowserWindow, Menu } = require('electron');
const { mainMenu } = require('./menu');
const path = require('path');


const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });


    Menu.setApplicationMenu(mainMenu);


    mainWindow.loadFile(path.join(__dirname, "src/index.html"));
};


app.whenReady().then(() => {
    createWindow();


    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

menu.js

const { app, Menu, dialog } = require('electron');
const fs = require('fs');


const template = [
    {
        label: 'Datei',
        submenu: [
            {
                label: 'Öffnen',
                accelerator: 'CmdOrCtrl+O',
                click: async () => {
                    const files = await dialog.showOpenDialog({
                        properties: ['openFile'],
                        filters: [
                            { name: 'Json', extensions: ['json'] },
                            { name: 'Alle Dateien', extensions: ['*'] }
                        ]
                    });


                    if (!files || files.canceled || files.filePaths.length === 0) return


                    const file = files.filePaths[0];
                    const fileContent = fs.readFileSync(file, 'utf-8');
                    console.log(fileContent);
                }
            }
        ]
    }
]


module.exports.mainMenu = Menu.buildFromTemplate(template);

index.html (src/index.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>Document</title>
</head>
<body>
    <h1>Seite</h1>
    <script>
        console.log(data);
    </script>
</body>
</html>

Wie kann ich das umsetzten? Ich habe schon von IPC gelesen, es aber nicht wirklich verstanden.

Windows, Programm, HTML, JavaScript, Programmiersprache, node.js
1 Antwort
Hofyy
29.12.2022, 23:49
Mit Links

Daten senden mit fetch?

Hallo,

ich will mit der Fetch API Daten senden und abrufen. Aber wen ich dies tue, kommt ein Fehler:

POST http://127.0.0.1:5500/api net::ERR_ABORTED 405 (Method Not Allowed)

Ich weiß gar nicht, wie ich diesen Fehler beheben soll. Ich habe dazu auch nichts hilfreiches bis jetzt gefunden.

Mein Ziel ist es, Daten mit Javascript an einen Server (für den Anfang an localhost) zu senden und diese dann von einem weiteren localhost-Server abrufen.

Das ist meine Index.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>Document</title>
</head>
<body>
    <section id="control-center">
        <button id="get-btn">Get Data</button>
        <button id="post-btn" onclick="test()">Post Data</button>
        <script>
            function test(){
                const data = {"name": "somename"}
                const options = {
                    method: "POST",
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data)
                }
                fetch('/api', options)
            }
        </script>
    </section>
</body>
</html>

Und das ist meine app.js:

const express = require('express')
const app = express()
app.listen(3000, () => console.log('3000'))
app.use(express.static('public'))

app.post('/api', (req, res) => {
    console.log(req)
})

Wenn jemand eine bessere Methode hat, Daten an einen Server zu senden, dann würde ich diese auch mal gerne probieren.

Webseite, JavaScript, Programmiersprache, Webentwicklung, node.js
1 Antwort

Meistgelesene Beiträge zum Thema Node.js
Mehr meistgelesene Fragen zu Node.js