0
votes

En HTML, name = "object [prop]" ne semble pas fonctionner

Quand je console.log le req.body cela me donne:

//Create
router.post('/', (req, res) => {
    console.log(req.body.shoe);
    Shoe.create(req.body.shoe, (err, shoe) => {
        if (err) {
            console.log(err);
        } else {
            return res.redirect('/');
        }
    });
});

Mais quand je console.log req.body.shoe Il imprime undefined , me casse la tête depuis quelques jours maintenant

La forme:

const mongoose = require('mongoose');

const shoeSchema = new mongoose.Schema({
    name: { type: String, unique: true },
    description: String,
    displayPicture: mongoose.Schema.Types.ObjectId,
    pictures: [ { type: mongoose.Schema.Types.ObjectId } ],
    collections: [ { type: mongoose.Schema.Types.ObjectId, unique: true } ],
    dateOfPublish: { type: Date, default: Date.now },
    comments: [
        {
            userId: { type: mongoose.Schema.Types.ObjectId, unique: true, ref: 'Comment' }
        }
    ]
});

module.exports = mongoose.model('Shoe', shoeSchema);

Modèle de chaussure:

<form action="/shoes/" method="post">
  <input type="text" name="shoe[name]" placeholder="Name of the shoe">
  <textarea name="shoe[description]" cols="30" rows="10"></textarea>
  <input type="file" name="shoe[pictures]">
  <input type="text" name="shoe[collections]">
  <input type="submit" value="Post the Shoe">
</form>

Node.js + route de création express:

[Object: null prototype] {
  'shoe[name]': 'Shoe Name',
  'shoe[description]': '',
  'shoe[pictures]': '',
  'shoe[collections]': 'Shoe Collection'
}

javascript mongodb node.js express forms

0 commentaires

3 Réponses :

0
votes

Vous ne pouvez pas implémenter de la manière ci-dessous la partie html Vous voyez vous-même que

        <form action="/shoes/" method="post">
            <input type="text" name="name" placeholder="Name of the shoe">
            <textarea name="description" cols="30" rows="10"></textarea>
            <input type="file" name="pictures">
            <input type="text" name="collections">
            <input type="submit" value="Post the Shoe">
        </form>

'shoe [pictures]' est la clé entière et que vous n'accédez qu'à req.body.shoe

Tout d'abord, tout votre code HTML doit être modifié.

 [Object: null prototype] {
  'shoe[name]': 'Shoe Name',
  'shoe[description]': '',
  'shoe[pictures]': '',
  'shoe[collections]': 'Shoe Collection'
}

Et ensuite dans le backend de l'objet req.body vous recevrez toutes les propriétés name,description,pictures,collections

Après cela, vous pouvez accéder req.body.name req.body.description etc

Ensuite, dans le backend, vous devez définir var shoe = {... req.body} puis vous pouvez utiliser l'objet shoe

7 commentaires

C'est possible et c'est exactement ce qui me trouble, reportez-vous à ce post: stackoverflow.com/questions/40162911/...

Cela ne fonctionnera pas pour le nœud js. Il pourrait avoir ces formules pour une autre langue. Veuillez ne pas suivre ça

Le fait est que cela a fonctionné sur mon précédent projet Udemy que j'ai terminé récemment (en utilisant le nœud, la même version), il n'y a donc aucune raison de ne pas le faire car cela raccourcit le code. voir dans create route Ma structure ici est très similaire mais il ne veut pas fonctionner pour une raison quelconque

Tout d'abord, cela fonctionne car il utilise du code ejs pour rendre le HTML. Le même référentiel que vous avez montré dans le code https://github.com/lucasweng/yelp-camp/blob/master/routes/co‌ mments.js précédent, accédez simplement à show.ejs file vous comprendrez comment il a été implémenté. Il raccourcit le code mais il est également rendu à partir du serveur. Donc, peu importe ce que vous faites, cela ne fonctionnera pas sauf si vous utilisez le rendu côté serveur

Ce projet utilise également côté serveur, le même que celui avec les mêmes dépendances

Peu importe que le projet utilise le code serveur ou non. il importe que le code du formulaire HTML que vous utilisez soit rendu par le code côté serveur ou non. Dans l'exemple ci-dessus, vous avez utilisé du code HTML et javascript. Mais le code auquel vous avez demandé de prendre référence à partir du lien utilise lui-même le rendu côté serveur ejs de la balise HTML Form avec tout le format que vous souhaitez utiliser. J'espère que maintenant vous l'avez.

Oh oui, le type de fichier du formulaire est ejs, le rendu se fait avec res.render ('shoes / new.ejs') . Comme je l'ai dit, même structure et dépendances pour ces deux projets. Voici un lien vers le projet, je serais heureux si vous pouviez y repérer le problème

0
votes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Shoe</title>
</head>
<body>
    <form action="/shoes/" method="post">
        <input type="text" name="shoe[name]" placeholder="Name of the shoe">
        <textarea name="shoe[description]" cols="30" rows="10"></textarea>
        <input type="file" name="shoe[pictures]" value="Shoe Pictures">
        <!-- tick the display pic -->
        <input type="text" name="shoe[collections]">
        <input type="submit" value="Post the Shoe">
    </form>
</body>
</html>

0 commentaires

0
votes

Le problème venait de l'analyseur de corps, nécessaire pour utiliser la bibliothèque qs ( true ) au lieu de querystring ( false ) dans la ligne suivante:

app.use (require ('body-parser'). urlencoded ({extended: true}));

À l'origine, extended était défini sur false. pour plus d'informations, reportez-vous à ce lien

0 commentaires