Entonces, mi objetivo es, en este momento, usar NodeJS y expresar juntos para tomar los datos que obtengo de un formulario y escribirlos en un archivo local. El archivo local se encuentra en mi computadora, es decir, el servidor (ya que estoy usando localhost). Ahora, puedo representar el formulario, pero ¿cómo agrego funcionalidad a este formulario? Porque cada vez que creo un archivo index.js en la carpeta de vistas, el html no puede acceder a él hasta que, a menos que no lo mueva a una carpeta pública, que es la carpeta de archivos estáticos, el html no puede acceder al archivo js . Ahora, cuando lo transfiero a la carpeta estática, require deja de funcionar repentinamente.
servidor.js:
const path = require('path') const app = express() app.use(express.static(path.join(__dirname, 'public'))); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.get("/", (req, res) => { console.log("here") res.render("index") }) app.listen(3000)Creo que estás mezclando entre el cliente y el servidor.
El JS del cliente es para agregar funcionalidad a su interfaz, como realizar alguna acción cuando se hace clic en un botón. Para ello tienes algunas opciones:
<script> : <script> document.getElementById("id").innerHTML = "This is my Id"; </script><script> : <body id="test"> <button><a href="#" onClick="alert('Clicked!');">Click Me</a></button> </body>.JS que vinculará a su HTML usando: <script src="index.js"></script> La mejor práctica es colocar su etiqueta <script> al final de su etiqueta HTML <body> .
Ahora, si desea que un servidor reciba los datos del cliente y realice algunas acciones, deberá crear un servidor rápido que expondrá un punto final que lo hará.
por lo que su HTML se verá así:
<!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> <form action="http://localhost:3000/test" method="POST"> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /><br /> <button type="submit">Submit</button> </form> </body> </html>Y su archivo Express JS se verá así:
const express = require("express"); const app = express(); app.use(express.urlencoded({ extended: true })); app.post("/test", (req, res) => { console.log(req.body); res.status(200).send(`Info submitted, Full Name: ${req.body.firstname} Last Name: ${req.body.lastname}`); }); app.listen(3000, () => { console.log("Server started on port 3000"); });