This tutorial will teach you how to make Crud Application using Node JS with Vue Js Frontend application and Mongo DB Database using Api access Crudapplication.
First Step What you have to do is you to divide the Front-End and Back-End.
Front-End – Vue JS
BackEnd – Node JS
Create the folder myprojects. inside the folder Frond end project you maintaining with the separate folder.
Backend project you maintaining with the separate folder.
Install Node JS
Create a new Project type the command on the command prompt.
Type the Command on Console.
1 | npm init |
and create your project. After project has been created you see the package.json file.
Then open the project in to the VS Code Editor by typing the following command
1 | code . |
after open up the project in to the vscode editor
Install the Express Server as back end server
1 | npm i express |
Install the mongoDB as database
1 | npm i express |
we have created the datbase on mongoDB Compass which name est.
attached the db connection below.
server.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var express = require('express'); var server = express(); var routes = require('./routes/routes'); var mongoose = require('mongoose'); const cors = require('cors'); mongoose.connect("mongodb://localhost:27017/est",{useNewUrlParser: true, useUnifiedTopology: true },function checkDB(error) { if(error) { console.log("errorr") } else { console.log("DB Connectedddd!!!!!!!!!!!") } }); server.use(cors()); server.use(express.json()); server.use(routes); server.listen(8000,function check(error) { if(error) { console.log("errorr") } else { console.log("startedddddd") } }); |
1 | node server.js |
DB Connectedddd
startedddddd
after that make the new folder route and inside the folder create the page route.js. route.js page which use to manage the all the restapis related to crud operations.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var express = require('express'); const router = express.Router(); var userController = require('../src/user/userController'); router.route('/user/getAll').get(userController.getDataConntrollerfn); router.route('/user/create').post(userController.createUserControllerFn); router.route('/user/update/:id').patch(userController.updateUserController); router.route('/user/delete/:id').delete(userController.deleteUserController); module.exports = router; |
After that create the MVC Page.First Create the Controller Page
userController.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | var userService = require('./userService'); var getDataConntrollerfn = async (req, res) => { var empolyee = await userService.getDataFromDBService(); res.send({ "status": true, "data": empolyee }); } var createUserControllerFn = async (req, res) => { var status = await userService.createUserDBService(req.body); if (status) { res.send({ "status": true, "message": "User created successfully" }); } else { res.send({ "status": false, "message": "Error creating user" }); } } var updateUserController = async (req, res) => { console.log(req.params.id); console.log(req.body); var result = await userService.updateUserDBService(req.params.id,req.body); if (result) { res.send({ "status": true, "message": "User Updateeeedddddd"} ); } else { res.send({ "status": false, "message": "User Updateeeedddddd Faileddddddd" }); } } var deleteUserController = async (req, res) => { console.log(req.params.id); var result = await userService.removeUserDBService(req.params.id); if (result) { res.send({ "status": true, "message": "User Deleteddd"} ); } else { res.send({ "status": false, "message": "User Deleteddd Faileddddddd" }); } } module.exports = { getDataConntrollerfn, createUserControllerFn,updateUserController,deleteUserController }; |
userService.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | var userModel = require('./userModel'); module.exports.getDataFromDBService = () => { return new Promise(function checkURL(resolve, reject) { userModel.find({}, function returnData(error, result) { if (error) { reject(false); } else { resolve(result); } }); }); } module.exports.createUserDBService = (userDetails) => { return new Promise(function myFn(resolve, reject) { var userModelData = new userModel(); userModelData.name = userDetails.name; userModelData.address = userDetails.address; userModelData.phone = userDetails.phone; userModelData.save(function resultHandle(error, result) { if (error) { reject(false); } else { resolve(true); } }); }); } module.exports.updateUserDBService = (id,userDetails) => { console.log(userDetails); return new Promise(function myFn(resolve, reject) { userModel.findByIdAndUpdate(id,userDetails, function returnData(error, result) { if(error) { reject(false); } else { resolve(result); } }); }); } module.exports.removeUserDBService = (id) => { return new Promise(function myFn(resolve, reject) { userModel.findByIdAndDelete(id, function returnData(error, result) { if(error) { reject(false); } else { resolve(result); } }); }); } |
userModel.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var mongoose = require('mongoose'); var Schema = mongoose.Schema; var userSchema = new Schema({ name: { type: String, required: true }, address: { type: String, required: true }, phone: { type: String, required: true } }); module.exports = mongoose.model('employees', userSchema); |
Vue.js
Install Vue.js CLI
1 | npm install -g vue-cli |
After installed successfully create the vue.js project using following command
1 | vue init webpack frontend |
After installation completed open the project in to vs code editor
First Step
Create the component Employeecrud.vue.
EmployeeCrud.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | <template> <div> <h2>Employee Registation</h2> <form @submit.prevent="save"> <div class="form-group"> <label>Employee name</label> <input type="text" v-model="employee.name" class="form-control" placeholder="Employee name"> </div> <div class="form-group"> <label>Employee Address</label> <input type="text" v-model="employee.address" class="form-control" placeholder="Employee Address"> </div> <div class="form-group"> <label>Mobile</label> <input type="text" v-model="employee.phone" class="form-control" placeholder="Mobile"> </div> <button type="submit" class="btn btn-primary">Save</button> </form> <h2>Employee View</h2> <table class="table table-dark"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Employee Name</th> <th scope="col">Address</th> <th scope="col">Mobile</th> <th scope="col">Option</th> </tr> </thead> <tbody> <tr v-for="employee in result" v-bind:key="employee._id"> <td>{{ employee._id }}</td> <td>{{ employee.name }}</td> <td>{{ employee.address }}</td> <td>{{ employee.phone }}</td> <td> <button type="button" class="btn btn-warning" @click="edit(employee)">Edit</button> <button type="button" class="btn btn-danger" @click="remove(employee)">Delete</button> </td> </tr> </tbody> </table> </div> </template> <script> import Vue from 'vue'; import axios from 'axios'; Vue.use(axios) export default { name: 'EmployeeCrud', data () { return { result: {}, employee:{ _id: '', name: '', address: '', phone: '' } } }, created() { this.EmployeeLoad(); }, mounted() { console.log("mounted() called......."); }, methods: { EmployeeLoad() { var page = "http://localhost:8000/user/getAll"; axios.get(page) .then( ({data})=>{ console.log(data); this.result = data.data; } ); }, save() { if(this.employee._id == '') { this.saveData(); } else { this.updateData(); } }, saveData() { axios.post("http://localhost:8000/user/create", this.employee) .then( ({data})=>{ alert("saveddddd"); this.EmployeeLoad(); } ) }, edit(employee) { this.employee = employee; }, updateData() { var editrecords = 'http://localhost:8000/user/update/'+ this.employee._id; axios.patch(editrecords, this.employee) .then( ({data})=>{ this.employee.name = ''; this.employee.address = '', this.employee.phone = '' this.id = '' alert("Updated!!!"); this.EmployeeLoad(); } ); }, remove(employee){ var url = `http://localhost:8000/user/delete/${employee._id}`; axios.delete(url); alert("Deleteddd"); this.EmployeeLoad(); } } } </script> |
Routes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import Vue from 'vue' import Router from 'vue-router' import EmployeeCrud from '@/components/EmployeeCrud' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'EmployeeCrud', component: EmployeeCrud } ] }) |