{"id":205,"date":"2019-11-23T13:40:34","date_gmt":"2019-11-23T13:40:34","guid":{"rendered":"http:\/\/localhost\/blogs\/?p=205"},"modified":"2020-12-28T09:37:12","modified_gmt":"2020-12-28T09:37:12","slug":"mevn-stack-for-beginners","status":"publish","type":"post","link":"https:\/\/www.appfinz.com\/blogs\/mevn-stack-for-beginners\/","title":{"rendered":"MEVN Stack For Beginners"},"content":{"rendered":"\n

MEVN Stack Tutorial From Scratch is today topic, We will generate \nFullStack Single Page Application(SPA) using Mongo, MongoDB, Express, \nVue, and Node<\/strong><\/p>\n\n\n\n

In\n this post, we learn a simple CRUD operation where the user can create, \nread, delete and update some data.so let us start the MEVN Stack \nTutorial From Scratch for the beginner.<\/p>\n\n\n\n

MEVN Stack Tutorial From Scratch for beginner<\/h3>\n\n\n\n

Before start tutorials, we need to first \ninstall Vue.js project using Vue CLI and for install CLI we need Node.js\n (version 8.9 or above  8.11.0+ recommended)<\/p>\n\n\n\n

Run the following command to install Vue CLI, if you have not installed in your machine.<\/p>\n\n\n\n

 npm install -g @vue\/cli\n\n # OR\n\n yarn global add @vue\/cli<\/code><\/pre>\n\n\n\n
 After successfully install you can check the version is Vue js using this command. <\/p>\n\n\n\n
vue --version\n<\/code><\/pre>\n\n\n\n
Step: 1 Create a new Vue.js project<\/h2>\n\n\n\n
Run this following command to install Vue.js.<\/strong><\/p>\n\n\n\n
vue create mevnproject<\/code><\/pre>\n\n\n\n
 It takes some time to depend on your internet speed. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Now, go to your Vue js project folder and run following command. <\/p>\n\n\n\n
 cd mevnexample<\/code><\/pre>\n\n\n\n
 After that start the Vue js dev server using the following command.  <\/p>\n\n\n\n
npm run serve<\/code><\/pre>\n\n\n\n
 Now, open project file in your favorite code editor. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Go to the http:\/\/localhost:8081 URL <\/strong> on your browser.<\/p>\n\n\n\n
Step:2  Install Vue dependencies.<\/h2>\n\n\n\n
We install two dependencies one is vue-router <\/strong>and vue-axios.<\/strong><\/p>\n\n\n\n
  • Vue-router : <\/strong> Vue router use for routing in our Vue js applicaion.<\/li>
  • Vue-axios : <\/strong> V-axios use for sending the network request severe.<\/li><\/ul>\n\n\n\n
    Install this dependency using following this command.<\/p>\n\n\n\n
     npm install axios vue-router vue-axios --save<\/code><\/pre>\n\n\n\n
    In this Vue application, we use the bootstrap framework for styling. to install bootstrap run this command.<\/p>\n\n\n\n
    npm install bootstrap --save<\/code><\/pre>\n\n\n\n
    Now import bootstrap file in main.js<\/strong><\/p>\n\n\n\n
     \/\/ main.js  Created By Appfinz\n\nimport Vue from 'vue'\nimport App from '.\/App.vue'\nimport 'bootstrap\/dist\/css\/bootstrap.min.css'\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')<\/code><\/pre>\n\n\n\n
    Step 3: Create some components in Vue js <\/h2>\n\n\n\n
    In src\/components <\/strong>folder create four new following components.<\/p>\n\n\n\n
    1. HomeComponent.vue<\/li>
    2. CreateComponent.vue<\/li>
    3. EditComponent.vue<\/li>
    4. IndexComponent.vue<\/li><\/ol>\n\n\n\n
      Now, add some view code inside the HomeComponent.vue <\/strong>file.<\/p>\n\n\n\n
       <template>\n  <div class=\"row justify-content-center\">\n      <div class=\"col-md-8\">\n          <div class=\"card card-default\">\n              <div class=\"card-header\">Home Component<\/div>\n\n              <div class=\"card-body\">\n                  I'm the Home Component component.\n              <\/div>\n          <\/div>\n      <\/div>\n  <\/div>\n <\/template>\n <script>\n export default {\n }\n <\/script><\/code><\/pre>\n\n\n\n
      After adding this component we need to import the HomeComponent.vue <\/strong>file inside the App.vue <\/strong>file.<\/p>\n\n\n\n
      Visit http:\/\/localhost:8081\/ to see HomeComponents <\/strong>rendering.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Now create other three components.<\/p>\n\n\n\n
      CreatComponent.vue<\/strong><\/h3>\n\n\n\n
       <template>\n  <div class=\"row justify-content-center\">\n      <div class=\"col-md-8\">\n          <div class=\"card card-default\">\n              <div class=\"card-header\">Create Component<\/div>\n\n              <div class=\"card-body\">\n                  I'm the Create Component component.\n              <\/div>\n          <\/div>\n      <\/div>\n  <\/div>\n <\/template>\n\n <script>\n  export default {\n  }\n <\/script><\/code><\/pre>\n\n\n\n
      EditComponent.vue<\/strong><\/h3>\n\n\n\n
       \/\/ EditComponent.vue\n\n <template>\n  <div class=\"row justify-content-center\">\n      <div class=\"col-md-8\">\n          <div class=\"card card-default\">\n              <div class=\"card-header\">Edit Component<\/div>\n\n              <div class=\"card-body\">\n                  I'm an Edit component.\n              <\/div>\n          <\/div>\n      <\/div>\n  <\/div>\n <\/template>\n \n <script>\n  export default {\n  }\n <\/script><\/code><\/pre>\n\n\n\n
      IndexComponent.vue<\/strong><\/h3>\n\n\n\n
       \/\/ IndexComponent.vue\n\n <template>\n  <div class=\"row justify-content-center\">\n      <div class=\"col-md-8\">\n          <div class=\"card card-default\">\n              <div class=\"card-header\">Index Component<\/div>\n\n              <div class=\"card-body\">\n                  I'm an Index component.\n              <\/div>\n          <\/div>\n      <\/div>\n  <\/div>\n <\/template>\n\n <script>\n  export default {\n  }\n <\/script><\/code><\/pre>\n\n\n\n
      Step:4 Configure the Vue-router<\/h2>\n\n\n\n
      Now, configure Vue router. Inside the main.js <\/strong>file, write the following code for the route.<\/p>\n\n\n\n
      \/\/ main.js\n\nimport Vue from 'vue'\nimport App from '.\/App.vue'\nimport 'bootstrap\/dist\/css\/bootstrap.min.css'\n\nimport VueRouter from 'vue-router';\nVue.use(VueRouter);\n\nVue.config.productionTip = false;\n\nimport HomeComponent from '.\/components\/HomeComponent.vue';\nimport CreateComponent from '.\/components\/CreateComponent.vue';\nimport IndexComponent from '.\/components\/IndexComponent.vue';\nimport EditComponent from '.\/components\/EditComponent.vue';\n\nconst routes = [\n  {\n      name: 'home',\n      path: '\/',\n      component: HomeComponent\n  },\n  {\n      name: 'create',\n      path: '\/create',\n      component: CreateComponent\n  },\n  {\n      name: 'posts',\n      path: '\/posts',\n      component: IndexComponent\n  },\n  {\n      name: 'edit',\n      path: '\/edit\/:id',\n      component: EditComponent\n  }\n];\n\nconst router = new VueRouter({ mode: 'history', routes: routes});\n\nnew Vue(Vue.util.extend({ router }, App)).$mount('#app');\n<\/code><\/pre>\n\n\n\n
      Here, first import the Vue-router module and create an array for the route which has a name, path,<\/strong> and components <\/strong>as the properties.<\/p>\n\n\n\n
      After that, we have created the router object and passed the mode history and routes array.<\/p>\n\n\n\n
      Now, the at the last step is to define the <router-view><\/router-view> <\/strong>element in the view. It renders the component according to the routing path in our Vue application.<\/p>\n\n\n\n
      So, add the <router-view> <\/strong>inside the App.vue <\/strong>file.<\/p>\n\n\n\n
      \/\/ App.vue\n\n<template>\n  <div>\n    <router-view><\/router-view>\n  <\/div>\n<\/template>\n\n<script>\n\n\nexport default {\n  name: 'app'\n}\n<\/script><\/code><\/pre>\n\n\n\n
      Now, save the file and check the following route paths.<\/p>\n\n\n\n
      1. http:\/\/localhost:8080\/create<\/li>
      2. http:\/\/localhost:8080\/posts<\/li>
      3. http:\/\/localhost:8080\/edit\/1<\/li><\/ol>\n\n\n\n
        Step:4 Create nav-bar for Vue application.<\/h2>\n\n\n\n
        Write the following code inside the App.vue <\/strong>file for Nav bar.<\/p>\n\n\n\n
        \/\/ App.vue\n\n<template>\n  <div class=\"container\">\n    <nav class=\"navbar navbar-expand-sm bg-dark navbar-dark\">\n      <ul class=\"navbar-nav\">\n        <li class=\"nav-item\">\n          <router-link to=\"\/\" class=\"nav-link\">Home<\/router-link>\n        <\/li>\n        <li class=\"nav-item\">\n          <router-link to=\"\/create\" class=\"nav-link\">Create Post<\/router-link>\n        <\/li>\n        <li class=\"nav-item\">\n          <router-link to=\"\/posts\" class=\"nav-link\">Posts<\/router-link>\n        <\/li>\n      <\/ul>\n    <\/nav><br \/>\n    <transition name=\"fade\">\n      <router-view><\/router-view>\n    <\/transition>\n  <\/div>\n<\/template>\n\n<style>\n   \n<\/style>\n\n<script>\n\n    export default{\n    }\n<\/script>\n<\/code><\/pre>\n\n\n\n
        Here we add some code navigation bar for Vue application.<\/p>\n\n\n\n
        Step:6 Create a form in CreateComponent.vue<\/strong><\/h2>\n\n\n\n
        We need a simple form for submitting data. so let’s create a form in CreateComponent.vue<\/strong><\/p>\n\n\n\n
        \/\/ CreateComponent.vue\n\n<template>\n  <div>\n    <h1>Create A Post<\/h1>\n    <form @submit.prevent=\"addPost\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label>Post Title:<\/label>\n            <input type=\"text\" class=\"form-control\" v-model=\"post.title\">\n          <\/div>\n        <\/div>\n        <\/div>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <div class=\"form-group\">\n              <label>Post Body:<\/label>\n              <textarea class=\"form-control\" v-model=\"post.body\" rows=\"5\"><\/textarea>\n            <\/div>\n          <\/div>\n        <\/div><br \/>\n        <div class=\"form-group\">\n          <button class=\"btn btn-primary\">Create<\/button>\n        <\/div>\n    <\/form>\n  <\/div>\n<\/template>\n\n<script>\n    export default {\n        data(){\n        return {\n          post:{}\n        }\n    },\n    methods: {\n      addPost(){\n        console.log(this.post);\n      }\n    }\n  }\n<\/script>\n<\/code><\/pre>\n\n\n\n
        First, at the bottom of the code, we define the object post <\/strong>here use used two-way data binding the post object has two properties title and body.<\/p>\n\n\n\n
        Second, we create one method called addPost(). <\/strong>when the user submits form details we will receive inside the addPost() <\/strong> method. we will send a POST method request to the Laravel server and to save the data into the database.<\/p>\n\n\n\n
        Save all files and go to this URL: http:\/\/localhost:8080\/create <\/strong>You can see the form like below.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Step: 7 Create a Node.js backend<\/h2>\n\n\n\n
        Create a new folder inside the Vue project root called API <\/strong>and go inside that new folder.<\/p>\n\n\n\n
        And now, initialize the package.json <\/strong>file. <\/p>\n\n\n\n
        npm init -y<\/code><\/pre>\n\n\n\n
        After running this command inside the new folder a new file auto created named package.json.<\/strong><\/p>\n\n\n\n
        {\n  \"name\": \"api\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n<\/code><\/pre>\n\n\n\n
        After that install the following node.js<\/strong> dependencies.  using the following command.<\/p>\n\n\n\n
        yarn add express body-parser cors mongoose\n\n# or\n\nnpm install express body-parser cors mongoose --save<\/code><\/pre>\n\n\n\n
        We need to also install Nodemon serve <\/strong>as a development dependency. because we do not need to restart every time, we change our server code.e change our server code.<\/p>\n\n\n\n
        npm install nodemon --save-dev<\/code><\/pre>\n\n\n\n
        Now we need to create some files called <\/p>\n\n\n\n
        1. server.js<\/strong><\/li>
        2. DB.js<\/strong><\/li>
        3. post.model.js<\/strong><\/li>
        4. post.route.js. <\/strong><\/li><\/ol>\n\n\n\n
          All these files should be inside the root of the API <\/strong>folder. and write the following code inside the server.js <\/strong>file.<\/p>\n\n\n\n
          \/\/ server.js\n\nconst express = require('express');\nconst app = express();\nconst bodyParser = require('body-parser');\nconst PORT = 4000;\nconst cors = require('cors');\n\napp.use(cors());\napp.use(bodyParser.urlencoded({extended: true}));\napp.use(bodyParser.json());\n\napp.listen(PORT, function(){\n  console.log('Server is running on Port:',PORT);\n});\n<\/code><\/pre>\n\n\n\n
          After that, we need to start a node server using the following command.<\/p>\n\n\n\n
          nodemon server<\/code><\/pre>\n\n\n\n
          After running the command, our node.js server is running at port: 4000<\/strong><\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          Step:8 install and connect with MongoDB Database<\/h2>\n\n\n\n
          Install MongoDB in your computer system. here I am just using the terminal for this demo because it is a simple application.<\/p>\n\n\n\n
          mongod<\/code><\/pre>\n\n\n\n
          Inside the API, folder creates a new file DB.js for <\/strong>connecting our node application with MongoDB, so this following code inside the DB.js.<\/strong><\/p>\n\n\n\n
          \/\/ DB.js\n\nmodule.exports = {\n    DB: 'mongodb:\/\/localhost:27017\/mevncrud'\n}<\/code><\/pre>\n\n\n\n
          For the local MongoDB server, username and password may be empty. but\n when we create a production database we need to set all this thing.<\/p>\n\n\n\n
          Now, import this DB.js<\/strong> file into the server.js <\/strong>file.<\/p>\n\n\n\n
          \/\/ server.js\n\nconst express = require('express');\nconst app = express();\nconst bodyParser = require('body-parser');\nconst PORT = 4000;\nconst cors = require('cors');\nconst mongoose = require('mongoose');\nconst config = require('.\/DB.js');\n\nmongoose.Promise = global.Promise;\nmongoose.connect(config.DB, { useNewUrlParser: true }).then(\n  () => {console.log('Database is connected') },\n  err => { console.log('Can not connect to the database'+ err)}\n);\n\napp.use(cors());\napp.use(bodyParser.urlencoded({extended: true}));\napp.use(bodyParser.json());\n\napp.listen(PORT, function(){\n  console.log('Server is running on Port:',PORT);\n});<\/code><\/pre>\n\n\n\n
          Now, our application connects with MongoDB Database.<\/p>\n\n\n\n
          Step:9 Create a Mongoose Schema<\/h2>\n\n\n\n
          Add some code inside the post.model.js<\/strong><\/p>\n\n\n\n
          \/\/ post.model.js\n\nconst mongoose = require('mongoose');\nconst Schema = mongoose.Schema;\n\n\/\/ Define collection and schema for Post\nlet Post = new Schema({\n  title: {\n    type: String\n  },\n  body: {\n    type: String\n  }\n},{\n    collection: 'posts'\n});\n\nmodule.exports = mongoose.model('Post', Post);\n<\/code><\/pre>\n\n\n\n
          Step:10 Create Routes for Node.js application<\/h2>\n\n\n\n
          Here we add CRUD operation code inside the post.route.js <\/strong>file.<\/p>\n\n\n\n
          \/\/ post.model.js\n\nconst express = require('express');\nconst postRoutes = express.Router();\n\n\/\/ Require Post model in our routes module\nlet Post = require('.\/post.model');\n\n\/\/ Defined store route\npostRoutes.route('\/add').post(function (req, res) {\n  let post = new Post(req.body);\n  post.save()\n    .then(() => {\n      res.status(200).json({'business': 'business in added successfully'});\n    })\n    .catch(() => {\n      res.status(400).send(\"unable to save to database\");\n    });\n});\n\n\/\/ Defined get data(index or listing) route\npostRoutes.route('\/').get(function (req, res) {\n    Post.find(function(err, posts){\n    if(err){\n      res.json(err);\n    }\n    else {\n      res.json(posts);\n    }\n  });\n});\n\n\/\/ Defined edit route\npostRoutes.route('\/edit\/:id').get(function (req, res) {\n  let id = req.params.id;\n  Post.findById(id, function (err, post){\n      if(err) {\n        res.json(err);\n      }\n      res.json(post);\n  });\n});\n\n\/\/  Defined update route\npostRoutes.route('\/update\/:id').post(function (req, res) {\n    Post.findById(req.params.id, function(err, post) {\n    if (!post)\n      res.status(404).send(\"data is not found\");\n    else {\n        post.title = req.body.title;\n        post.body = req.body.body;\n        post.save().then(() => {\n          res.json('Update complete');\n      })\n      .catch(() => {\n            res.status(400).send(\"unable to update the database\");\n      });\n    }\n  });\n});\n\n\/\/ Defined delete | remove | destroy route\npostRoutes.route('\/delete\/:id').delete(function (req, res) {\n    Post.findByIdAndRemove({_id: req.params.id}, function(err){\n        if(err) res.json(err);\n        else res.json('Successfully removed');\n    });\n});\n\nmodule.exports = postRoutes;<\/code><\/pre>\n\n\n\n
          Inside the post model js, we write the CRUD operation in Node.js \nwhich is back end server side. so when a user requests from the \nclientside hits the node express server and the above function will be \nexecuted and all request sends to the database and send the response to \nthe client, in this application we use vue.js as frontend.<\/p>\n\n\n\n
          We use MongoDB ORM to CRUD operation from the MongoDB database. Mongoose <\/strong>is an ORM(Object Relational Mapping) <\/strong>which is used in the MongoDB<\/strong> database. Now, we have all setup for the CRUD operations set up on the post.route.js <\/strong>file. we need to import inside the server.js <\/strong>file.<\/p>\n\n\n\n
          So, our finally server.js <\/strong>file looks like this.<\/p>\n\n\n\n
          \/\/ server.js\n\nconst express = require('express');\nconst app = express();\nconst bodyParser = require('body-parser');\nconst PORT = 4000;\nconst cors = require('cors');\nconst mongoose = require('mongoose');\nconst config = require('.\/DB.js');\nconst postRoute = require('.\/post.route');\n\nmongoose.Promise = global.Promise;\nmongoose.connect(config.DB, { useNewUrlParser: true }).then(\n  () => { console.log('Database is connected') },\n  err => { console.log('Can not connect to the database'+ err)}\n);\n\napp.use(cors());\napp.use(bodyParser.urlencoded({extended: true}));\napp.use(bodyParser.json());\n\napp.use('\/posts', postRoute);\n\napp.listen(PORT, function(){\n  console.log('Server is running on Port:',PORT);\n});<\/code><\/pre>\n\n\n\n
          Step:12 Use Axios to send a network request<\/h2>\n\n\n\n
           Import the axios <\/strong>and vue-axios <\/strong>in the main.js <\/strong>file.<\/p>\n\n\n\n
          \/\/ main.js\n\nimport Vue from 'vue'\nimport App from '.\/App.vue'\nimport 'bootstrap\/dist\/css\/bootstrap.min.css'\n\nimport VueRouter from 'vue-router';\nVue.use(VueRouter);\n\nimport VueAxios from 'vue-axios';\nimport axios from 'axios';\n\nVue.use(VueAxios, axios);\n\nVue.config.productionTip = false;\n\nimport HomeComponent from '.\/components\/HomeComponent.vue';\nimport CreateComponent from '.\/components\/CreateComponent.vue';\nimport IndexComponent from '.\/components\/IndexComponent.vue';\nimport EditComponent from '.\/components\/EditComponent.vue';\n\nconst routes = [\n  {\n      name: 'home',\n      path: '\/',\n      component: HomeComponent\n  },\n  {\n      name: 'create',\n      path: '\/create',\n      component: CreateComponent\n  },\n  {\n      name: 'posts',\n      path: '\/posts',\n      component: IndexComponent\n  },\n  {\n      name: 'edit',\n      path: '\/edit\/:id',\n      component: EditComponent\n  }\n];\n\nconst router = new VueRouter({ mode: 'history', routes: routes});\n\nnew Vue(Vue.util.extend({ router }, App)).$mount('#app');\n<\/code><\/pre>\n\n\n\n
          We have created the backend. Next step is to send the POST method<\/strong> request to the node.js API server. Remember, now we have three servers are running.<\/p>\n\n\n\n
          1. Vue development server<\/li>
          2. Node.js server<\/li>
          3. MongoDB server<\/li><\/ol>\n\n\n\n
            Make sure, all these running fine otherwise the project won\u2019t work.<\/p>\n\n\n\n
            Write some code code inside the CreateComponent.vue <\/strong>file\u2019s addPost() <\/strong>function.<\/p>\n\n\n\n
            \/\/ CreateComponent.vue\n\naddPost(){\n    let uri = 'http:\/\/localhost:4000\/posts\/add';\n    this.axios.post(uri, this.post).then(() => {\n       this.$router.push({name: 'posts'});\n    });\n}<\/code><\/pre>\n\n\n\n
            Now we can create the post and see in the MongoDB database.<\/p>\n\n\n\n
            To check by the terminal, you need to open the mongo shell using the following command.<\/p>\n\n\n\n
            mongo<\/code><\/pre>\n\n\n\n
            Step:12 Display the backend data<\/h2>\n\n\n\n
            After saving a row of data into database we want to display. so write some code inside the IndexComponent.vue<\/p>\n\n\n\n
            \/\/ IndexComponent.js\n\n<template>\n  <div>\n      <h1>Posts<\/h1>\n        <div class=\"row\">\n          <div class=\"col-md-10\"><\/div>\n          <div class=\"col-md-2\">\n            <router-link :to=\"{ name: 'create' }\" class=\"btn btn-primary\">Create Post<\/router-link>\n          <\/div>\n        <\/div><br \/>\n\n        <table class=\"table table-hover\">\n            <thead>\n            <tr>\n              <th>Title<\/th>\n              <th>Body<\/th>\n              <th>Actions<\/th>\n            <\/tr>\n            <\/thead>\n            <tbody>\n                <tr v-for=\"post in posts\" :key=\"post._id\">\n                  <td>{{ post.title }}<\/td>\n                  <td>{{ post.body }}<\/td>\n                  <td><router-link :to=\"{name: 'edit', params: { id: post._id }}\" class=\"btn btn-primary\">Edit<\/router-link><\/td>\n                  <td><button class=\"btn btn-danger\">Delete<\/button><\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n  <\/div>\n<\/template>\n\n<script>\n  export default {\n      data() {\n        return {\n          posts: []\n        }\n      },\n      created() {\n      let uri = 'http:\/\/localhost:4000\/posts';\n      this.axios.get(uri).then(response => {\n        this.posts = response.data;\n      });\n    }\n  }\n<\/script><\/code><\/pre>\n\n\n\n
            Now you can see this inserted data on the browser.<\/p>\n\n\n\n
            Step:13 Send edit and update request<\/h2>\n\n\n\n
            Now, when we want to edit our data we need to fetch that record from data to display on view. Then, after editing the data in the textbox<\/strong> and textarea<\/strong>, when we hit the update button, updatePost() <\/strong>function to send a post request to the server to update the data.<\/p>\n\n\n\n
            \/\/ EditComponent.vue\n\n<template>\n  <div>\n    <h1>Edit Post<\/h1>\n    <form @submit.prevent=\"updatePost\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <div class=\"form-group\">\n            <label>Post Title:<\/label>\n            <input type=\"text\" class=\"form-control\" v-model=\"post.title\">\n          <\/div>\n        <\/div>\n        <\/div>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <div class=\"form-group\">\n              <label>Post Body:<\/label>\n              <textarea class=\"form-control\" v-model=\"post.body\" rows=\"5\"><\/textarea>\n            <\/div>\n          <\/div>\n        <\/div><br \/>\n        <div class=\"form-group\">\n          <button class=\"btn btn-primary\">Update<\/button>\n        <\/div>\n    <\/form>\n  <\/div>\n<\/template>\n\n<script>\n    export default {\n\n      data() {\n        return {\n          post: {}\n        }\n      },\n      created() {\n        let uri = `http:\/\/localhost:4000\/posts\/edit\/${this.$route.params.id}`;\n        this.axios.get(uri).then((response) => {\n            this.post = response.data;\n        });\n      },\n      methods: {\n        updatePost() {\n          let uri = `http:\/\/localhost:4000\/posts\/update\/${this.$route.params.id}`;\n          this.axios.post(uri, this.post).then(() => {\n            this.$router.push({name: 'posts'});\n          });\n        }\n      }\n    }\n<\/script><\/code><\/pre>\n\n\n\n
            After changing the database we can see the edit data from the database and also you can update the database.<\/p>\n\n\n\n
            Step:14 Delete the data<\/h2>\n\n\n\n
            So, add some final code inside the IndexComponent.vue <\/strong>file for delete a record.<\/p>\n\n\n\n
            \/\/ IndexComponent.vue\n\n<template>\n  <div>\n      <h1>Posts<\/h1>\n        <div class=\"row\">\n          <div class=\"col-md-10\"><\/div>\n          <div class=\"col-md-2\">\n            <router-link :to=\"{ name: 'create' }\" class=\"btn btn-primary\">Create Post<\/router-link>\n          <\/div>\n        <\/div><br \/>\n\n        <table class=\"table table-hover\">\n            <thead>\n            <tr>\n              <th>Title<\/th>\n              <th>Body<\/th>\n              <th>Actions<\/th>\n            <\/tr>\n            <\/thead>\n            <tbody>\n                <tr v-for=\"post in posts\" :key=\"post._id\">\n                  <td>{{ post.title }}<\/td>\n                  <td>{{ post.body }}<\/td>\n                  <td><router-link :to=\"{name: 'edit', params: { id: post._id }}\" class=\"btn btn-primary\">Edit<\/router-link><\/td>\n                  <td><button class=\"btn btn-danger\" @click.prevent=\"deletePost(post._id)\">Delete<\/button><\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n  <\/div>\n<\/template>\n\n<script>\n  export default {\n      data() {\n        return {\n          posts: []\n        }\n      },\n      created() {\n      let uri = 'http:\/\/localhost:4000\/posts';\n      this.axios.get(uri).then(response => {\n        this.posts = response.data;\n      });\n    },\n    methods: {\n      deletePost(id)\n      {\n        let uri = `http:\/\/localhost:4000\/posts\/delete\/${id}`;\n        this.axios.delete(uri).then(response => {\n          this.posts.splice(this.posts.indexOf(id), 1);\n        });\n      }\n    }\n  }\n<\/script>\n<\/code><\/pre>\n\n\n\n
            Save all file, and now, you can see delete the values from the MongoDB<\/strong> database.<\/p>\n\n\n\n
            So, finally, our MEVN Stack For Beginners\u00a0<\/strong>is over.\u00a0<\/p>\n\n\n\n
            Tags: website development company in delhi<\/a>|| website designing company in delhi<\/a> || b2b portal development company<\/a> || magento development company in delhi<\/a> ||  website redesigning company in delhi<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
            MEVN Stack Tutorial From Scratch is today topic, We will generate FullStack Single Page Application(SPA)<\/p>\n","protected":false},"author":1,"featured_media":234,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nodejs"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":9,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":803,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/205\/revisions\/803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/234"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}