Erstellen Sie eine einfache Anfänger-App mit Node.js Bootstrap und MongoDB
Node.js ist eine der berühmten Open-Source-Umgebungen, mit der Sie Javascript-Skripte außerhalb des Browsers ausführen können. MERN- und MEAN-Stacks sind die beiden beliebtesten Kombinationen, mit denen Sie eine erstaunliche Anwendung erstellen können. In diesem Artikel erstellen wir eine einfache, anfängerfreundliche Kontaktformular-App mit Node, Bootstrap und MongoDB. Bevor wir mit dem Projekt beginnen, müssen wir sicherstellen, dass Node.js und MongoDB in Ihrem System installiert sind.
Projektstruktur:
Schritt 1: Erstellen Sie einen Projektordner und öffnen Sie diesen Ordner in Ihrer IDE.
Um zunächst eine package.json -Datei mit den von Ihnen bereitgestellten Werten zu erstellen, verwenden Sie den Befehl npm init im Terminal der IDE.
npm init
Sie können die gestellten Fragen und Felder, die während des Init-Prozesses erstellt werden, anpassen oder als Standard belassen. Nach dem Vorgang finden Sie die Datei package.json in Ihrem Projektordner.
Schritt 2: Erstellen Sie als Nächstes eine index.js- Datei im Projektordner, die der Einstiegspunkt der App sein wird.
Schritt 3: Installieren Sie nun die Abhängigkeiten express , mongoose und nodemon mit dem Befehl npm .
npm install express mongoose nodemon
Installation von express, mongoose und nodemon
Es wird einige Zeit dauern, die Abhängigkeiten zu installieren, und danach wird ein Ordner mit dem Namen node_modules erstellt und in der Datei package.json unter Abhängigkeiten finden Sie den Namen aller installierten Abhängigkeiten zusammen mit ihrer Version.
Abhängigkeiten
Schritt 4: Als nächstes öffnen wir die Datei index.js und erstellen eine einfache Express-App mit dem folgenden Code.
Javascript
// Importing express module
var express = require("express");
// Importing mongoose module
var mongoose = require("mongoose");
const port = 80;
const app = express();
// Handling the get request
app.get("/", (req, res) => {
res.send("Hello World");
});
// Starting the server on the 80 port
app.listen(port, () => {
console.log(`The application started
successfully on port ${port}`);
});
Dieser Code erstellt eine einfache Express-App, die einen Server startet und Port 80 auf Verbindungen überwacht. Auf Requestsn an „/“ antwortet die App mit „Hello World “ .
Schritt 5: Um den Code auszuführen, gehen Sie zum Terminal und geben Sie ihn ein
nodemon index.js
Anwendung erfolgreich gestartet
Schritt 6: Öffnen Sie dann Ihren Browser, verwenden Sie http://localhost oder einfach localhost , um von sich aus auf den Server zuzugreifen.
Localhost
Auf der Seite wird „Hello World“ angezeigt , was bedeutet, dass unsere Express-App ordnungsgemäß funktioniert.
Schritt 7: Wir müssen jetzt 2 Codezeilen hinzufügen, da wir express.json() und express.urlencoded() für POST- und PUT-Anforderungen benötigen. Express stellt uns Middleware zur Verfügung, um mit eingehenden Datenobjekten im Text der Requests umzugehen. Sowohl in POST- als auch in PUT-Anforderungen senden wir Datenobjekte an den Server und bitten den Server, dieses Datenobjekt zu akzeptieren oder zu speichern, das im req.body dieser Anforderung enthalten ist.
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
Schritt 8: Erstellen Sie im Projektordner einen Ordner namens public . Wir werden alle statischen HTML-Dateien im öffentlichen Verzeichnis unseres Projekts erstellen.
// For serving static html files
app.use(express.static('public'));
Schritt 9: Jetzt werden wir uns mit dem folgenden Code mit der Mungo-Datenbank verbinden. Der Name der Datenbank für dieses Projekt wird als projectDG angegeben
mongoose.connect("mongodb://localhost/projectDG", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
var db = mongoose.connection;
Schritt 10: Als nächstes definieren wir eine Post-Methode, um die Daten des Kontaktformulars in unserer Datenbank zu speichern. Wir definieren unser Datenobjekt und erstellen hier eine Sammlung benannter Benutzer . Bei erfolgreicher Dateneinfügung leiten wir zu formSubmitted.html um
Dies ist der Hauptteil der Datei index.js, in dem die Post-Anforderung verarbeitet wird und die ordnungsgemäße Übertragung der Daten von der Client-Anforderung an den Hauptdatenbankserver stattfindet.
app.post("/formFillUp", (req, res) => {
var name = req.body.name;
var reason = req.body.reason;
var email = req.body.email;
var phone = req.body.phone;
var city = req.body.city;
var state = req.body.state;
var addressline = req.body.addressline;
var data = {
name: name,
reason: reason,
email: email,
phone: phone,
city: city,
state: state,
addressline: addressline,
};
db.collection("users").insertOne(data,
(err, collection) => {
if (err) {
throw err;
}
console.log("Data inserted successfully!");
});
return res.redirect("formSubmitted.html");
});
Die endgültige index.js sieht wie folgt aus:
index.js
var express = require("express");
var mongoose = require("mongoose");
const port = 80;
const app = express();
mongoose.connect("mongodb://localhost/projectDG", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
var db = mongoose.connection;
app.use(express.json());
// For serving static HTML files
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.set({
"Allow-access-Allow-Origin": "*",
});
// res.send("Hello World");
return res.redirect("index.html");
});
app.post("/formFillUp", (req, res) => {
var name = req.body.name;
var reason = req.body.reason;
var email = req.body.email;
var phone = req.body.phone;
var city = req.body.city;
var state = req.body.state;
var addressline = req.body.addressline;
var data = {
name: name,
reason: reason,
email: email,
phone: phone,
city: city,
state: state,
addressline: addressline,
};
db.collection("users").insertOne(
data, (err, collection) => {
if (err) {
throw err;
}
console.log("Data inserted successfully!");
});
return res.redirect("formSubmitted.html");
});
app.listen(port, () => {
console.log(`The application started
successfully on port ${port}`);
});
Schritt 11: Jetzt erstellen wir die Dateien index.html, formSubmittedhtml und style.css im öffentlichen Ordner.
index.html:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <link rel="stylesheet" href="./style.css" /> <link href= "https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> </head> <body> <div class="container mt-3"> <br /> <h1>Contact Us</h1> <br /> <form action="/formFillUp" method="POST"> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputName" style="font-size: 23px"> Name </label> <input type="text" class="form-control" id="name" name="name" /> </div> <div class="form-group col-md-6"> <label for="inputReason" style="font-size: 23px"> Reason for contacting </label> <input type="text" class="form-control" id="reason" name="reason" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail" style="font-size: 23px"> Email </label> <input type="email" class="form-control" id="inputEmail" name="email" /> </div> <div class="form-group col-md-6"> <label for="inputPhone" style="font-size: 23px">Phone </label> <input type="text" class="form-control" id="inputPhone" name="phone" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputCity" style="font-size: 23px">City </label> <input type="text" class="form-control" id="inputCity" name="city" /> </div> <div class="form-group col-md-6"> <label for="inputState" style="font-size: 23px">State </label> <input type="text" class="form-control" id="inputState" name="state" /> </div> </div> <div class="form-group"> <label for="inputAddress" style="font-size: 23px">Address</label> <input type="text" class="form-control" id="inputAddress" name="addressline" /> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> </div> </body> </html>
Ausgabe:
index.html
formSubmitted.html
HTML
<!DOCTYPE html> <html> <head> <title>Form Submitted Succesfully</title> <link rel="stylesheet" href="./style.css" /> <link href= "https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> </head> <body> <div class="containerFormSubmittedMessage"> <h1>Form Submitted Succesfully!</h1> <p> Thank you for contacting us! Our team will mail you shortly. </p> </div> </body> </html>
Ausgabe:
formSubmitted.html
style.css
CSS
body {
background-image: linear-gradient(120deg,
#9de7fa 0%, #f89fba 100%);
color: white;
font-family: "Poppins", sans-serif;
min-height: 100vh;
}
.btn-primary {
color: #fff;
background-color: #f89fba;
border-color: #f89fba;
}
.containerFormSubmittedMessage {
display: flex;
flex-direction: column;
margin: auto;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid whitesmoke;
}
Schritt 12: Nachdem wir diese drei Dateien erstellt haben, sind wir mit unserem Projekt fast fertig. Wir werden nun MongoDB starten. Öffnen Sie das Windows Powershell-Fenster und geben Sie dann den Befehl mongod ein.
mongod
Geben Sie den Befehl mongod in das Powershell-Fenster ein
Öffnen Sie ein weiteres Windows Powershell-Fenster und geben Sie den Befehl mongo ein
mongo
Geben Sie den Mongo - Befehl in ein anderes Powershell-Fenster ein
Schritt 13: Öffnen Sie Ihre IDE und geben Sie im Terminal nodemon index.js ein, um die App zu starten. Gehen Sie zu localhost .
Hinweis: Erfolgreich eingefügte Daten werden gedruckt, nachdem die Post-Anforderung ordnungsgemäß bearbeitet wurde.
- Füllen Sie die Details des Kontaktformulars aus. Nach erfolgreicher Übermittlung des Formulars werden Sie von index.html zu formSubmitted.html umgeleitet .
Kontakt Formular
- Um nun zu überprüfen, ob unsere im Kontaktformular eingegebenen Daten in der projectDG- Datenbank gespeichert wurden, verwenden wir die folgenden Befehle im zweiten Windows Powershell-Fenster.
Dieser Befehl listet alle Datenbanken in mongoDB auf:
show dbs
Dieser Befehl lässt uns zu unserer Datenbank wechseln:
use projectDG
Mit diesem Befehl überprüfen wir bestimmte Daten in der Sammlung:
db.users.find()
Daten, die in der Benutzersammlung in der projectDG-Datenbank vorhanden sind
Wir können deutlich sehen, dass Daten in die MongoDB-Datenbank eingefügt wurden.