John Au-YeungCheck out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
Subscribe to my email list now at http://jauyeung.net/subscribe/
Registrations forms are a part of many web apps.
We can create one easily.
In this article, we’ll look at how to create a registration form with Vue and Express.
Back End
We can create a simple login form that takes some data in the back end.
To do that, we create an Express app by installing some packages:
npm i express cors body-parser
Then we can use them by writing:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
const app = express();
app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/register', (req, res) => {
res.json(req.body);
});
app.listen(3000, () => console.log('server started'));
The cors package lets us do cross-domain communication.
We used it with app.use(cors()) .
bodyParser parses the JSON request body that we’ll submit from the front end.
bodyParser.json() lets us parse JSON.
We also have a register route to get the request data.
req.body has the parsed JSON data.
If we need logic for checking for data, we can add them.
Register Form Front End
After we added the back end for accepting the registration data, we can add the registration form with Vue.js.
To do that, we can write:
<template>
<div id="app">
<form @submit.prevent="login">
<div>
<label for="username">username</label>
<input name="username" v-model="username" placeholder="username">
</div>
<div>
<label for="password">password</label>
<input name="password" v-model="password" placeholder="password" type="password">
</div>
<div>
<label for="firstName">first name</label>
<input name="firstName" v-model="firstName" placeholder="first name">
</div>
<div>
<label for="lastName">last name</label>
<input name="lastName" v-model="lastName" placeholder="last name">
</div>
<div>
<label for="age">age</label>
<input name="age" v-model="age" placeholder="age" type="number">
</div>
<div>
<label for="address">address</label>
<input name="address" v-model="address" placeholder="address">
</div>
<input type="submit" value="register">
</form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
username: "",
password: "",
firstName: "",
lastName: "",
age: "",
address: ""
};
},
methods: {
async login() {
const { username, password, firstName, lastName, age, address } = this;
const res = await fetch(
"https://SomberHandsomePhysics--five-nine.repl.co/register",
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username,
password,
firstName,
lastName,
age,
address
})
}
);
const data = await res.json();
console.log(data);
}
}
};
</script>
We added a registration form with the form element.
The submit.prevent listen runs the login method on submit and runs preventDefault at the same time.
The form fields are created by the label and input tags.
for has the name attribute value of the input field.
v-model binds to the values that we submit.
We also set the type attribute of some inputs.
password is for password inputs.
number is for number inputs.
The login method calls fetch to make a POST request to the back end.
We get all the reactive properties we want to submit in the first line.
Then we put them all in the JSON string.
headers must have the Content-Type set to application/json to submit the JSON.
Then we get back the response from the register route once the request is made.
Conclusion
We can create a registration form with Vue.js with the v-model directive and the fetch function to make requests.
