Добавить пользователя в БД, используя API извлечения с реагированием - PullRequest
0 голосов
/ 27 октября 2019

Мне нужно сохранить информацию о пользователях в БД, используя fetch. Это моя функция отправки: Здесь я пу " / ajouter-un-account / ", но я не уверен, правильно ли это, я должен поставить " / create " вместо

 handleFormSubmit = event => {
    event.preventDefault();

    const validation = this.validator.validate(this.state);
    this.setState({ validation });
    this.submitted = true;

    if (validation.isValid) {
      // event.preventDefault();
      fetch(`http://localhost:3001/ajouter-un-account/`,{
          method: 'POST', // 'GET', 'PUT', 'DELETE', etc.

          body: JSON.stringify ({
              email: this.state.sub_mail,
              password: this.state.sub_pwd,
              nom: this.state.sub_nom,
              prenom: this.state.sub_prenom,
              tel: this.state.sub_tel,
            }),
          headers : { 
              'Content-Type': 'multipart/form-data',
              'Accept': 'application/json',
             }

          })
          .then(res => res.json())
          .then(json => {
            console.log(json);
          })
          .then(resultats => this.setState(resultats)).catch((error) => {
              reject(error);
          })
          // this.props.history.push('http://localhost:3000/gerercomptes');

    }
  }

Это моя форма:

        <form method="post" className="subscribe-form rs-box text-left">
            <h3 className="text-center">Inscription</h3>
            <div action="" className="subscribe-form_inputs">

                <div className={validation.sub_mail.isInvalid ?  'form-inputs_box has-error' : 'form-inputs_box'}>
                    <label htmlFor="sub_mail">Email address</label>
                    <input type="email" className="form-control fatb-input btn-cnxmail"
                        name="sub_mail"
                        placeholder="john@doe.com"
                        onChange={this.handleInputChange}
                    />
                    <span className="help-block">{validation.sub_mail.message}</span>
                </div>

                <div className={validation.sub_pwd.isInvalid ?  'form-inputs_box has-error' : 'form-inputs_box'}>
                    <label htmlFor="sub_pwd">Password</label>
                    <input type="password" className="form-control fatb-input"
                        name="sub_pwd"
                        onChange={this.handleInputChange}
                    />
                    <span className="help-block">{validation.sub_pwd.message}</span>
                </div>

                <div className={validation.subConfirm_pwd.isInvalid ?  'form-inputs_box has-error' : 'form-inputs_box'}>
                    <label htmlFor="subConfirm_pwd">Password Again</label>
                    <input type="password" className="form-control"
                        name="subConfirm_pwd"
                        onChange={this.handleInputChange}
                    />
                    <span className="help-block">{validation.subConfirm_pwd.message}</span>
                </div>


                <div className="{validation.sub_nom.isInvalid ?  'form-inputs_box has-error' : 'form-inputs_box'}">
                    <label htmlFor="sub_nom">Password Again</label>
                    <input type="text" className="form-control"
                        name="sub_nom"
                        onChange={this.handleInputChange}
                    />
                    {/* <span className="help-block">{validation.sub_nom.message}</span> */}
                </div>
                <div className="{validation.sub_prenom.isInvalid ?  'form-inputs_box has-error' : 'form-inputs_box'}">
                    <label htmlFor="sub_prenom">Password Again</label>
                    <input type="text" className="form-control"
                        name="sub_prenom"
                        onChange={this.handleInputChange}
                    />
                    {/* <span className="help-block">{validation.sub_prenom.message}</span> */}
                </div>
                <div className="{validation.sub_tel.isInvalid ?  'form-inputs_box has-error' : 'form-inputs_box'}">
                    <label htmlFor="sub_tel">Password Again</label>
                    <input type="text" className="form-control"
                        name="sub_tel"
                        onChange={this.handleInputChange}
                    />
                    {/* <span className="help-block">{validation.sub_tel.message}</span> */}
                </div>

            </div>
            {/* <FormErrors formErrors={this.state.formErrors} /> */}
            <div className="form-btn">
                {/* <button className="fatb-btn btn-anim3 w100p" type="button"> Valider </button> */}
                <button className="bubbly-button fatb-btn btn-anim3 w100p" onClick={this.handleFormSubmit}>
                    Valider
                </button>
            </div>
        </form>

И у меня есть эта ошибка в консоли узла:

    location: 'body' } ] }
[1] Result {
[1]   formatter: [Function: formatter],
[1]   errors: 
[1]    [ { value: '',
[1]        msg: 'Vous devez saisir le prénom.',
[1]        param: 'prenom',
[1]        location: 'body' },
[1]      { value: '',
[1]        msg: 'Vous devez saisir le nom.',
[1]        param: 'nom',
[1]        location: 'body' },
[1]      { value: '@',
[1]        msg: 'Le format de votre email est incorrect',
[1]        param: 'email',
[1]        location: 'body' },
[1]      { value: '',
[1]        msg: 'Vérifiez le format de votre numéro de téléphone.',
[1]        param: 'tel',
[1]        location: 'body' } ] }
[1] Result {
[1]   formatter: [Function: formatter],
[1]   errors: 
[1]    [ { value: '',
[1]        msg: 'Vous devez saisir le prénom.',
[1]        param: 'prenom',
[1]        location: 'body' },
[1]      { value: '',
[1]        msg: 'Vous devez saisir le nom.',
[1]        param: 'nom',
[1]        location: 'body' },
[1]      { value: '@',
[1]        msg: 'Le format de votre email est incorrect',
[1]        param: 'email',
[1]        location: 'body' },
[1]      { value: '',
[1]        msg: 'Vérifiez le format de votre numéro de téléphone.',
[1]        param: 'tel',
[1]        location: 'body' } ] }

И, наконец, мой бэкэнд: Маршрут:

router.post('/ajouter-un-account', [
    check('prenom').trim().not().isEmpty().withMessage('Vous devez saisir le prénom.'),
    check('nom').trim().not().isEmpty().withMessage('Vous devez saisir le nom.'),
    check('email').trim().normalizeEmail().not().isEmpty().withMessage('Vous devez saisir un email.').isEmail().withMessage('Le format de votre email est incorrect'),
    check('tel').blacklist(' ').isMobilePhone('fr-FR').withMessage('Vérifiez le format de votre numéro de téléphone.')
], account_controller.create);

А это функция создания пользователя:

/**
 * Traitement POST Form .
 * @param req
 * @param res
 */
exports.create = (req, res) => {

    const errors = validationResult(req);
    console.log(errors);

    if(errors.isEmpty()){
        //Créer dans la BDD
        //Creation d'un objet account
        const account = new Account({
            prenom : req.body.prenom,
            nom : req.body.nom,
            email : req.body.email,
            tel : req.body.tel,
        });
        //sauvegarde des données
        account.save((err => {
            if(err) console.log(err);
            //Redirection sur la fiche du account.
            //res.redirect('/account/'+ account._id);
            res.redirect('/accounts/');
        }));

    }else{
        res.render("new-account", {
            'title':'Ajouter un account',
            'errors': errors.array()
        });
    }    
};

Надеюсь, это понятно. Спасибо за вашу помощь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...