LAB 7 MEAN app ( Customer CRUD) - sindhusha-t/ASE-Lab-Assignments GitHub Wiki
Customer CRUD application using MEAN
Introduction:
Creating basic CRUD functions for adding, getting, updating, removing customers data using MEAN( MongoDB, express, Angular, NodeJS) frameworks.
Main Objective:
Task-1:
Creating backend API which interacts with MongoDB database and allows to use API functions to get, update, delete and add customer details.
Task-2:
Creating User Interface to access/modify customer data (adding, viewing, updating and deleting operations).
Steps for implementation of above mentioned tasks:
Task-1: Creating Backend API that interacts with MongoDB
- Installed the following js file using node package manager
npm install express --save
npm install body-parser --save
npm install cors --save
npm install mongoose --save
Installing nodemon to automatically detect any changes in the js files and recompile the backend API files.
npm install --save -g nodemon
Make sure that all the dependencies are added in the package.json file.
-
Implementing the main file( server.js/index.js) Importing the required packages like express, body-parser, MongoDB, cors Connecting to the MongoDB database importing the required database schema models and the routing service js file Telling the js file to listen on port 4000 ( which is the backend API ) Final server.js file source code:
-
Created the MongoDB database connection config file (db.js)
-
Created Schema file ( which connects to the collection and updates the documents ) - Customers.js
-
Running
node server
ornodemon
to listen on port 4000 and successfully connect to the MongoDB database.
Task-2: Creating User Interface and sends requests to the backend api based on the CRUD operation.
- Created basic html files for adding, editing, Viewing the list of customer details.
- Created customer service file provides functions like 'addCustomer, getCustomer, editCustomer, updateCustomer, deleteCustomer) These functions connect to the localhost on port 4000 and does the required operations connecting to MongoDB
- Implemented type script files for all 3 components that use customer service functions to do the required operations.
- Running
ng serve -o
command
User Interface:
- Home Page:
- Adding Customer Page:
- Viewing Customer details:
- Updating Customer Details:
- Deleting Customer Details:
Conclusion:
We have learnt how to create CRUD application using MEAN and how to create API using MongoDB, express and nodejs.
Task responsibilities:
Sindhusha Tiyyagura: Created Backend API that connects to MongoDB and does CRUD operations Pradeepika Kolluru: Created User Interface for the Customer CRUD operations.