diff --git a/node-server/index.js b/node-server/index.js index 37c2591..8dbb908 100644 --- a/node-server/index.js +++ b/node-server/index.js @@ -1,46 +1,47 @@ -const express = require('express'); -const cors = require('cors'); -const bodyParser = require('body-parser'); -const mongoose = require('mongoose'); +const express = require('express'); //express is used to make a web server +const cors = require('cors'); //is used to grant permission to communicate node server with react server +const bodyParser = require('body-parser'); //THIS IS A MIDDLE WARE WHICH IS USED TO READ INSIDE BODY OF POST +const mongoose = require('mongoose'); //this is a help in interacting with mongodb and making changes to it` -main().catch(err => console.log(err)); +main().catch(err => console.log(err)); //Used to catch error in database if it appears async function main() { await mongoose.connect('mongodb://127.0.0.1:27017/demo'); console.log('db connected') } -const userSchema = new mongoose.Schema({ +const userSchema = new mongoose.Schema({ //Here we assign datatype to the data and validate and filter the data username: String, password: String }); -const User = mongoose.model('User', userSchema); +const User = mongoose.model('User', userSchema); //Here user is the name the collection and user scheme has data inside it + //User acts as a class +const server = express(); //used to create a server - - -const server = express(); - -server.use(cors()); -server.use(bodyParser.json()); +server.use(cors()); //this is .use which is a middleware it can change request between client and server +server.use(bodyParser.json()); //WE HAVE TO USE JSON IN BODYPARSER // CRUD - Create server.post('/demo',async (req,res)=>{ - let user = new User(); - user.username = req.body.username; - user.password = req.body.password; - const doc = await user.save(); + let user = new User(); //This Stateme is creating object of User class and in user there is information + //For changing database change the object and the changes will be reflected in database + + user.username = req.body.username; //REQ IS DATA FROM FRONTEND WHICH HAS A BODY AND INSIDE IT IT HAS USERNAME + user.password = req.body.password; + const doc = await user.save(); //In mongodb it will be saved as doc and it will be documnet - console.log(doc); - res.json(doc); + console.log(doc); //PRINTS WHATEVER FRONTEND HAS SEND + res.json(doc); //SEND THE RESPONSE TO FRONTEND }) -server.get('/demo',async (req,res)=>{ - const docs = await User.find({}); - res.json(docs) +server.get('/demo',async (req,res)=>{ //get is a server method where /demo is path req is request res is respond + const docs = await User.find({}); //req is any data from frontend comes to req + res.json(docs) //respond is any data which has to be send to frontend comes to res + //get request can be run through url }) -server.listen(8080,()=>{ - console.log('server started') +server.listen(8080,()=>{ //server.listen at request to port 8080 will listen here + console.log('server started') }) diff --git a/react-app/src/App.js b/react-app/src/App.js index 6dac918..53e1480 100644 --- a/react-app/src/App.js +++ b/react-app/src/App.js @@ -1,36 +1,37 @@ -import logo from './logo.svg'; + import logo from './logo.svg'; import './App.css'; -import { useEffect, useState } from 'react'; + import { useEffect, useState } from 'react'; function App() { - const [form, setForm] = useState({}); - const [users, setUsers] = useState([]); + const [form, setForm] = useState({}); // use state is used to store the event //form is the object and setform is its setter + const [users, setUsers] = useState([]); const handleForm = (e)=>{ setForm({ - ...form, - [e.target.name] : e.target.value + ...form, //No changes will be overridden it will be continues in form object + [e.target.name] : e.target.value //Thus username:Meet will bw stored in form object }) } const handleSubmit = async (e)=>{ - e.preventDefault(); - const response = await fetch('http://localhost:8080/demo',{ - method:'POST', - body:JSON.stringify(form), - headers:{ - 'Content-Type':'application/json' + e.preventDefault(); //thus it helps us to see event on console without it being lost + const response = await fetch('http://localhost:8080/demo',{ //here url in fetch is of the server get + method:'POST', //also here we can also write get and there is a link between this get and the get we have used in node server it helps to connect the same + body:JSON.stringify(form), //also whatever we take throught get gets reflected through url + headers:{ //Here POST METHOD IS USED TO SEND DATA TO SERVER + //HERE IN BODY WE CAN SEND DATA AND WE HAVE TO SEND IT IN STRING FORMA + 'Content-Type':'application/json' //HEADERS HELPS IN GIVING ADDITIONAL INFORMATION } - }) + }) const data = await response.json(); console.log(data); } const getUsers = async ()=>{ - const response = await fetch('http://localhost:8080/demo',{ + const response = await fetch('http://localhost:8080/demo',{ //Fetching the data from database method:'GET', }) - const data = await response.json(); + const data = await response.json(); //reading it in json format setUsers(data); } @@ -40,20 +41,24 @@ function App() { return (