No tengo ningún problema con la ejecución del programa. Tengo una pregunta sobre dos parámetros que se encuentran en diferentes lugares del archivo y sobre su relación. Tengo un archivo 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>Registration</h1> <form id="reg-form"> <input type="text" id="username" autocomplete="off" placeholder="Username"> <input type="password" id="password" autocomplete="off" placeholder="Password"> <input type="submit" value="Submit Form"> </form> <script> const form = document.getElementById('reg-form') form.addEventListener('submit', registerUser) async function registerUser(event){ event.preventDefault() const username = document.getElementById('username').value const password = document.getElementById('password').value const result = await fetch('/api/register',{ method:'POST', headers:{ 'Content-Type':'application/json' }, body:JSON.stringify({ username, password }) }).then((res)=>res.json()) console.log(result) } </script> </body> </html>y tengo un archivo js:
const express = require('express') const path = require('path') const mongoose = require('mongoose') const User = require('./model/user') const bcrypt = require('bcrypt') mongoose.connect('mongodb://localhost:27017/login-app-db',{ useNewUrlParser:true, useUnifiedTopology:true }) const app = express() app.use('/', express.static(path.join(__dirname, 'static'))) app.use(express.json()) app.post('/api/register', async(req,res)=>{ console.log(req.body) res.json({status:'ok'}) }) app.listen(9999,()=>{ console.log('Server up at 9999') })Tengo un botón cuando hago clic que me muestra los valores en la entrada de nombre de usuario y contraseña en una terminal con console.log.
Pero el lugar que no entendí es
const result = await fetch('/api/register')y
app.post('/api/register', async(req,res)=>cuál está procesando primero y qué es eso "/api/register". ¿Es una ruta inventada para proporcionar comunicación entre Html y js cuando hago clic en el botón si es así, cómo funciona exactamente detrás?
En su código Node.js, crea un servidor Express y configura controladores de solicitudes, app.post('/api/register' ...) uno de ellos.
En su código de cliente, cuando llama a fetch('/api/register', ... , el navegador realiza una solicitud a http://<your-domain>/api/register y procesa la respuesta (si corresponde) .
Express es un marco de servidor web que se basa en el módulo http de Node.js y proporciona una buena cantidad de utilidad en términos de enrutamiento. Cada vez que el servidor recibe una solicitud entrante en el puerto correcto, se filtra y se compara con todos los controladores que tiene al comparar su método y ruta con los de los controladores. Si se encuentra un controlador coincidente, se ejecuta con el objeto de solicitud pasado como argumento. En su caso, cualquier solicitud POST realizada a http://<your-domain>/api/register será procesada por ese controlador. (puede leer más sobre el enrutamiento Express aquí )
/api/register es, de hecho, solo una ruta inventada que proporciona una estructura a la API de su aplicación web y aplica una convención de interfaz: podría haberse llamado /signup o /api/user/registration . Sin embargo, las personas generalmente seguirían el estilo de arquitectura REST al crearlos, donde la ruta definiría un recurso en el sistema y el método definiría el tipo de operación aplicada al recurso. Dicho esto, usted es libre de diseñar sus API de la forma que tenga más sentido para usted, siempre que la convención se aplique en todas las partes del sistema (es decir, el código del cliente y el código del servidor).