Building the Real Application Chapter 5.catch(() => {
});
}
return true;
},
clear() {
this.$refs.form.reset();
},
},
};
</script>This should suffice. Now, let's go ahead and add a movie from the UI itself from
the http://localhost:8080/movies/add endpoint. We should be able to save a movie's
record in the MongoDB. Let me explain what we did here a little bit.
When we hit the Submit button, we made an AJAX request via axios to hit the post
endpoint in the movies controller. The post method in movies controller, in turn, saves the
record with the parameters that we gave according to the model schema we designed for
the movies. And, when the process is complete, redirect the page back to the homepage.
To check whether the record was actually created or not, let's look into MongoDB:
$ mongo
$ use movie_rating_app
$ db.movies.find()We can see the record being created with the parameters we provided in the form:
Adding form validations
We covered how to add the validations in the previous section as well. Let's go ahead and
add a few validations to our movie add form. We will add the following validations:
Movie Name cannot be empty
Movie Description is optional
Movie Release Year cannot be blank
The genre of the movie will be required and will be maxed to 80 characters