Мне нужно сохранить информацию о пользователях в БД, используя 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()
});
}
};
Надеюсь, это понятно. Спасибо за вашу помощь