Pude cargar el CSS en la página inicial de la obtención, pero cuando utilizo un botón para enviar datos mediante POST, la publicación funciona, pero el CSS no se carga y la pantalla muestra simplemente la información de la publicación. aquí hay algo de información a continuación
app.use(express.static(__dirname + "/public")); app.get('/', (req,res)=>{ res.sendFile(__dirname + "/index.html") })el html
<form action="/" method="post"> <input type="text" name="n1" placeholder="First Number"> <input type="text" name="n2" placeholder="Second Number"> <button type="submit" name="submit">Calculate</button> </form>El cargo
app.post("/",function(req,res){ var num1 = Number(req.body.n1); var num2 = Number(req.body.n2); var result = num1 + num2; res.send("The result is " + result); })La página carga bien el color de fondo, pero cuando presiono el botón Calcular es cuando CSS no se carga. Solo me preguntaba qué más tendría que hacer para que CSS apareciera en todas partes.
En la solicitud GET inicial, además de la parte del formulario, probablemente esté respondiendo con un archivo html estático que a su vez hace referencia a archivos css.
Ese no es el caso cuando presionas el botón "Calcular". En esa solicitud POST , está respondiendo con texto sin formato ("El resultado es x"), no HTML, y eso no hace referencia a ningún estilo en absoluto.
Es posible que desee buscar algún motor de plantillas como Handlebars, EJS o algo más flexible como Vue, Svelte, React o Angular.
Si desea enviar un archivo html con estilo en su solicitud POST, debe usar res.sendFile()
Su solicitud de publicación solo devuelve el resultado con el número.
Debido a que necesita especificar rutas de archivo absolutas, debe escribirlo como se muestra a continuación.
app.post("/",function(req,res){ var num1 = Number(req.body.n1); var num2 = Number(req.body.n2); var result = num1 + num2; res.sendFile('public/index.html' , { root : __dirname}); })Esto le dará el html con estilo, pero deberá escribir algo de JavaScript para cambiar el html en función de la salida.
en jQuery, podría verse como
$("h1").text(`The result is ${result}`);Su jQuery deberá estar en un archivo JS del lado del cliente.
Reconozco eso del curso de Angela Yu: es posible que desee esperar hasta completar el módulo EJS para hacer lo que está haciendo.