Build app using Vue JS, Node Express JS and Mongo DB (MEVN Stack)

hello everyone in this tutorial we will learn how to build a simple to do application from scratch using vue.js as front end node and express.js as backend and mongodb as the database here is a demo of the web application we will first install all the prerequisites then we will create the database and objects required for our app next we will create the backend project using node in Express Js and finally we will start creating the view JS project let's install Visual Studio code I have a Windows 64-bit system so we'll download accordingly let's install it Visual Studio code is now installed successfully let us now install node.js first let us download the installer file let's install let's verify the installation by checking the node and npm version we have successfully installed node.js let us now set up the mongodb cluster required for our app let me log into the portal first we need to choose the free version for learning purposes I will keep the cluster name as default let me create a user account for this cluster let me now create a database and also a collection for our to-do app let me also add a couple of notes into my collection we can get the connection strings to connect to our back end here we have now set up our mongodb cluster let us now create the express JS backend project open command prompt and type the command npm init hyphen y this will basically create a package.json file which will be needed to add the other required npm packages for our express.js app let us now install Express framework to create our backend rest apis by default the express app comes with a security to disable requests coming from different domains or ports to override this we need to install another package called course it is not recommended in production please only whitelist your familiar servers to access the backend apis next let us install the mongodb client I had some issue with the latest version so I am using the specific version of 4.1.0 next we need a package called multer to read the request form data now let us open the project with Visual Studio code we can see an entry of all the downloaded npm packages here let me now create a file index.js here we will be adding our API methods let me import all the npm packages which we just downloaded let us create an instance of the express app and make it use the cores module now let us add the connection string of mongodb let us add the database name for making the mongodb connection and also instantiate the mongodb client app.listen will start the express app and will listen to the requests coming from the mentioned port number let us instantiate our mongodb client here using the connection string and the created database name once connection is successful let us display a success message let us check if we are able to make the connection just type nodespace index.js to start the backend server let us now add the API method to get all notes data from mongodb collection let's check if this works we can see that it works and we can see the data from our notes collection let us now add the method to add and delete the notes in our collection we will have a simple logic to Auto calculate the ID field based on the number of documents in the collection once added we shall send a success response let us now add the method to delete the give document from the collection we will be deleting the document based on the ID which we will be sending via the query string once deleted we shall send the success message as response our backend project is now complete let us now create the view JS project let's create a folder for our project open Visual Studio code create a new file index.html now we need to add reference to view JS here we are going to use the CDN version of it let us make few changes to it let's create add a variable title and display it as a header tag let's check this out by simply opening the HTML file we see that everything works as expected now we also need to add reference to axio's JavaScript library which we will be using to call our API endpoints now let us add a method to get notes data from our API we need to declare an array variable to store the notes data let us create a variable to store our API URL now let's make use of axios to call our get notes API method once we get the response we will update the array variable now let's add the HTML to display it there is a lifecycle method called mounted which will get executed on page load we will call the refresh data method here let's check if this work it works as expected and we see the data let us now add the methods to add and delete notes let's add a text box to accept the new notes input and a button to call the add new notes method let's also add a button to delete a given notes we need to pass the ID of the notes to be deleted now let's complete the ADD and delete methods we need to capture the new notes entered in the text box and attach this to form data before posting to API method once posted we will display the message in alert box and also call the refresh data method next let us implement the delete notes method we will pass the ID of the notes to be deleted in the query string now let's verify everything let's add a new notes this works now let's try to delete the notes delete also works as expected our to-do app is now completed

Channel: Art of Engineer

Views: 15,440

Keywords: vue, vue js, node, node js, mongo, mongo db, front end, backend, full stack, web development, full stack web development, tutorial, express, express js

Id: HkIGAqAP1GY

Length: 20min 21sec (1221 seconds)

Published: Mon Jun 26 2023