Node Express.js, Vue.js & Mongoose|MongoDB Tutorial

Node Express.js, Vue.js & Mongoose|MongoDB Tutorial — CRUD By Example

In this post we will give you information about Node Express.js, Vue.js & Mongoose|MongoDB Tutorial — CRUD By Example. Hear we will give you detail about Node Express.js, Vue.js & Mongoose|MongoDB Tutorial — CRUD By ExampleAnd how to use it also give you demo for it if it is necessary.

Throughout this tutorial, you’ll be using Node.js, Express.js and Vue.js to learn by example how to create a full-stack CRUD (Create, Read, Update and Delete) application. For database we’ll be using MongoDB and Mongoose.

Express is a Node web framework that provides developers with essential elements to build web applications such as routing and templates etc.

Introduction

In this tutorial, we’ll use Vue for the front-end and Node for the back-end of a full-stack web application.

The example application we’ll be building will allow you to create, read, update and delete records from a MongoDB database with a Vue front-end interface. Express will be used for routing and REST API endpoints.

Start by creating a folder for your project by running the following command:

mkdir VueJSNodeProject

Navigate inside your newly created project and create a package.json file:

cd VueJSNodeProjecttouch package.json

Open the package.json file and add the following content:

{"name":"vuenodeproject","version":"1.0.0","description":"A Vue with Node and Express back end Project","scripts":{},"author":"","license":"MIT","devDependencies":{}}

Installing Back-End Dependencies

Now let’s install the required dependencies:

npm install --save express body-parser cors mongoose nodemon

Creating The Express Server

Inside your project’s root folder create a server.js file and add the following content:

varexpress=require('express'),path=require('path'),bodyParser=require('body-parser'),cors=require('cors'),mongoose=require('mongoose');mongoose.connect("mongodb://localhost:27017/vuenodedb").then(()=>{console.log('Database connection is successful')},err=>{console.log('Error when connecting to the database'+err)});constapp=express();app.use(express.static('public'));app.use(bodyParser.json());app.use(cors());varport=process.env.PORT||4000;app.listen(()=>{console.log('Listening on port '+port);});

You need to install MongoDB database system on your development machine.

Creating the Mongoose Model(s): Todo

Create a models folder inside your project and add a Todo.js file with the following content:

constmongoose=require('mongoose');constTodoSchema=mongoose.Schema({name:String},{timestamps:true});module.exports=mongoose.model('Todo',TodoSchema);

Our Todo model is very simple as it only contains a name field of type String. We have also set timestamps to true which automatically adds two new fields: createdAt and updatedAt to the schema.

Creating Express Routes

First, let’s require the Todo model:

varTodo=require('./models/Todo');

Next, let’s instantiate an Express router:

varrouter=express.Router();

Creating a Todo: Express.js POST Route Example

Now let’s add a POST route that handles HTTP POST requests. In the same file add the following code:

...router.route('/create').post((req,res)=>{vartodo=newTodo(req.body);todo.save().then(todo=>{res.status(200).json({'message':'Todo successfully added '});}).catch(err=>{res.status(400).send("Error when saving to database");});});

Getting Todos: Express.js GET Route Example

Next, let’s add a GET route that handles HTTP GET requests. Add the following code:

router.route('/todos').get((req,res)=>{Todo.find((err,todos)=>{if(err){console.log(err);}else{res.json(todos);}});});

Getting a Todo by Id: Express.js GET by Id Route Example

router.route('/todos/:id').get((req,res)=>{varid=req.params.id;Todo.findById(id,(err,todo)=>{res.json(todo);});});

Updating a Todo by Id: Express.js PUT Route Example

router.route('/todos/:id').put((req,res)=>{Todo.findById(req.params.id,(err,todo)=>{if(!todo)returnnext(newError('Error getting the todo!'));else{todo.name=req.body.name;todo.save().then(todo=>{res.json('Todo updated successfully');}).catch(err=>{res.status(400).send("Error when updating the todo");});}});});

Deleting a Todo by Id: Express.js DELETE Route Example

router.route('/todos/:id').get((req,res)=>{Todo.findByIdAndRemove({_id:req.params.id},(err,todo)=>{if(err)res.json(err);elseres.json('Todo successfully removed');});});

Starting your Express.js API Back-End

node server.js

You should have the following output in the terminal:

Listening on port 4000

Installing Vue CLI v3

We’ll use the Vue CLI to generate the Vue front-end application. Let’s start by installing the Vue CLI if you have not done so yet using the following command:

npm install --global @vue/cli

Generating a Vue Application Using Vue CLI v3

Let’s now generate a new Vue application inside our project’s root folder

$ vue create frontend

Next navigate inside your frontend folder and install Axios by running the following command:

$ npm install --save axios

Axios is a Promise based HTTP client that we’ll be using to make HTTP calls from our Vue front-end application to our Express.js REST API backend running at http://localhost:4000 with CORS enabled.

Creating Vue Components

Inside frontend/src/components add two Vue components:

CreateTodo.vue: for creating todos.
ListTodo.vue: for displaying fetched todos.

Creating a Todo

Open components/CreateTodo.vue and add the following content:

<template><divid="container"class="container"><divclass="row"><divclass="col-sm-8 offset-sm-2"><divclass="alert alert-warning"v-show="showError"><buttontype="button"class="close"@click="hideMessage()">X</button><strong>Error!</strong></div><h1>CreateaTodo</h1><divclass="info-form"><form><divclass="form-group"><labelfor="name">Todoname</label><inputv-model="todo.name"type="text"class="form-control"id="name"aria-describedby="nameHelp"placeholder="Enter Name"><smallid="nameHelp"class="form-text text-muted">Enteryourtodo's name</small></div></form><button  v-if="!this.todo.id" @click="createTodo()" ><span>Create</span><button  v-if="this.todo.id" @click="updateTodo()" ><span>Update</span></button><button  @click="newTodo()" >New..</button></div></div></div></div></template><script>import {APIService} from '../APIService';const apiService = new APIService();export default {name: 'CreateTodo',components:{},data(){return{showError:false,todo:{}};},methods:{createTodo(){apiService.createTodo(this.todo).then((result)=>{console.log(result);if(result.status===201){this.todo=result.data;}},(error)=>{this.showError=true;});},updateTodo(){apiService.updateTodo(this.todo).then((result)=>{console.log(result);},(error)=>{this.showError=true;});},newTodo(){this.todo={};}},mounted(){if(this.$route.params.pk){apiService.getTodo(this.$route.params.pk).then((todo)=>{this.todo=todo;})}},}</script><stylescoped>.aform{margin-left:auto;width:60%;}</style>

Listing Todos

Open components/ListTodo.vue and add the following content:

<template><div><h1>Todos()</h1><tableclass="table table-bordered table-hover"><thead><tr><th>#</th><th>Name</th><th>Actions</th></tr></thead><tbody><trv-for="todo in todos"@click="selectTodo(todo)"><th></th><td></td><td><buttonclass="btn btn-danger"@click="deleteTodo(todo)">X</button><aclass="btn btn-primary"v-bind:href="'/todo-update/' + todo.id">&#9998;</a></td></tr></tbody></table></div></template><script>import{APIService}from'../APIService';constAPI_URL='http://localhost:4000';constapiService=newAPIService();exportdefault{name:'ListTodo',components:{},data(){return{todos:[],numberOfTodos:};},methods:{getTodos(){apiService.getTodos().then((data)=>{this.todos=data.data;this.numberOfProducts=data.count;});},deleteTodo(todo){apiService.deleteTodo(todo).then((r)=>{if(r.status===204){alert("Todo deleted");this.$router.go()}})},},mounted(){this.getTodos();},}</script><stylescoped>.list-horizontalli{display:inline-block;}.list-horizontalli:before{content:'0a020220a00a0';color:#999;color:rgba(,,,0.5);font-size:11px;}.list-horizontalli:first-child:before{content:'';}</style>

Adding the API Service

importaxiosfrom'axios';constAPI_URL='http://localhost:8000';exportclassAPIService{constructor(){}getTodos(){consturl='${API_URL}/api/todos/';returnaxios.get(url).then(response=>response.data);}getTodo(pk){consturl='${API_URL}/api/todos/${pk}';returnaxios.get(url).then(response=>response.data);}deleteTodo(todo){consturl='${API_URL}/api/todos/${todo.pk}';returnaxios.delete(url);}createTodo(todo){consturl='${API_URL}/api/todos/';returnaxios.post(url,todo);}updateTodo(todo){consturl='${API_URL}/api/todos/${todo.pk}';returnaxios.put(url,todo);}}

Conclusion

In this tutorial, we’ve created a CRUD application with Node.js and Vue which consumes a REST API created with Express.

Hope this code and post will helped you for implement Node Express.js, Vue.js & Mongoose|MongoDB Tutorial — CRUD By Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github