Vue Js Form post issues to server - node.js

Question

I am building a website and I cannot find a way to send my SignUp form data to my server using post. I tried with axios but it didn't work.
This is basically how my signup page looks like
<template>
<div id = "app">
<!-- <router-view /> -->
<h1>{{ $t('signup') }}</h1>
<p>{{ $t('signupMsg') }}</p>
<b-form #submit="onSubmit" #reset="onReset" method="post" >
<b-form-group
id="input-group-1"
label-for="input-1"
>
<p1> Name: </p1>
<b-form-input
id="input-1"
v-model="form.name"
required
placeholder="Enter Name and Vorname"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label-for="input-2" >
<p1>{{ $t('tech') }}</p1>
<b-form-input
id="input-2"
v-model="form.technicianID"
required
placeholder="Enter assigned Technician ID"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-3" label-for="input-3">
<p1> Email ID: </p1>
<b-form-input
id="input-3"
v-model="form.email"
required
placeholder="Enter assigned Email ID"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-4" label-for="input-4">
<p1> {{ $t('branch') }} </p1>
<b-form-input
id="input-4"
v-model="form.branch"
required
placeholder="Enter your branch"
></b-form-input>
</b-form-group>
<!-- <b-button type="submit" > <router-link to="/requestsuccess">{{ $t('signup') }}</router-link> </b-button> -->
<b-button type="submit" >{{ $t('signup') }} </b-button>
<b-button type="reset" variant="danger">{{ $t('reset') }}</b-button>
<router-link to="/" class="btn btn-link">{{ $t('back') }}</router-link>
</b-form>
</div>
</template>
<script>
import axios from 'vue-axios'
export default {
name: 'signup',
data() {
return {
form: {
name: '',
technicianID: '',
email:'',
branch: ''
}
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
axios({
method: 'post',
url: '/insert',
data: this.form
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.name = ''
this.form.technicianID = ''
this.form.email = ''
this.form.branch = ''
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
This is how my index.js looks like for post
router.post('/insert', function(req, res, next) {
var item = {
name: req.body.name,
technicianID: req.body.technicianID,
email: req.body.email,
branch: req.body.branch
};
mongo.connect(url, function(err, db) {
assert.equal(null, err);
db.collection('users').insertOne(item, function(err, result) {
assert.equal(null, err);
console.log('Item inserted');
db.close();
});
});
res.redirect('../components/requestsuccess');
});
I am fairly new to this but I can't find a way to send my data to the server.

Answer 1

You can try this code below:
Backend: You can change your backend with this code below
router.post('/insert', function(req, res, next) {
console.log(req.body);
mongo.connect(url, function(err, db) {
db.collection('users').insertOne(req.body, function(err, result) {
if(err) return res.status(500).send(err);
return res.status(200).send(result.ops[0]);
db.close();
});
});
});
The code above only an example for simple case. If you want to add assert, then you can make sure it's working fine. If the simple code above it's working, then you can add assert.
Make sure you've been install cors on your server and add it in your app.js or server.js this code below:
app.use(cord({origin: "*"});
And then, make sure you call your endpoint use: http://. Not only localhost but http://localhost.
FrontEnd
onSubmit(evt) {
evt.preventDefault()
axios({
method: 'post',
url: '/insert', // make sure your endpoint is correct
data: this.form
})
.then(response => {
//handle success
console.log(response.data);
// do some stuff here: redirect or something you want
})
.catch(error => {
//handle error
console.log(error.data);
});
},
Make sure your endpoint is correct.
I hope it can help you.