I am struggling in figuring out how to have a front-end that corresponds to my back-end in creating a user. I've successfully managed to create a user (can post to MongoDB using Insomnia) but don't know what's the structure for creating a user in the front end. Here's what my code looks like:
Router
const express = require('express');
const router = express.Router();
router.post('/', async (req, res) => {
// First Validate The Request
const { error } = validate(req.body);
if (error) {
return res.status(400).send(error.details[0].message);
}
// Check if this user already exisits
let user = await User.findOne({ email: req.body.email });
if (user) {
return res.status(400).send('That user already exisits!');
} else {
// Insert the new user if they do not exist yet
user = new User({
name: req.body.name,
email: req.body.email,
password: req.body.password
});
await user.save();
res.send(user);
}
});
module.exports = router;
server.js
app.use('/api/users', users);
Post request to this the API:
import axios from 'axios'
axios({
method: 'post',
url: '/api/users',
data: {
name: 'John',
email: 'john@example.com',
password: 'Something'
}
});
You can use axios for example, an popular library: https://github.com/axios/axios
axios.post("URL", { email: "myemail@mail.com" })
What you should do, is store information the user types in your frontend in a variable and pass this data to the fetch's function via the post method.
// User information
let username = 'boneless';
// Options for your request
let options = { method: 'POST', body: JSON.stringify({username: username});
let request = await fetch('url', { options });
let response = await request;
// Now you can apply logic to your response. Based on how your server replies.
I recommend reading up on fetch, as it's native in most browsers.