Κατά τη δημιουργία εφαρμογών Ιστού, ο χειρισμός των δεδομένων εισόδου χρήστη είναι μια κρίσιμη πτυχή για τη δημιουργία διαδραστικών και ευέλικτων λειτουργιών. Στο Express.js περιβάλλον ανάπτυξης, μπορείτε εύκολα να επεξεργαστείτε δεδομένα εισόδου από φόρμες και διάφορα αιτήματα HTTP όπως GET, POST, PUT, PATCH και DELETE. Ακολουθεί ένας λεπτομερής οδηγός με πολλές μεθόδους και παραδείγματα που θα σας βοηθήσουν να το πετύχετε:
Λήψη πληροφοριών από Form
Δημιουργία HTML Form: Ξεκινήστε δημιουργώντας ένα HTML form σε ένα αρχείο Pug ή EJS. Βεβαιωθείτε ότι έχετε ορίσει το action
χαρακτηριστικό στην <form>
ετικέτα για να καθορίσετε τη διαδρομή όπου θα σταλεί το αίτημα.
<form action="/process" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
Χειρισμός POST αιτήματος: Στο πρόγραμμα χειρισμού διαδρομής, χρησιμοποιήστε το body-parser
ενδιάμεσο λογισμικό για να εξαγάγετε δεδομένα από το POST αίτημα.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/process',(req, res) => {
const username = req.body.username;
const password = req.body.password;
// Process data and return results
});
Χειρισμός διαφόρων τύπων αιτημάτων με Παράδειγμα σύνδεσης
Αποστολή POST αιτήματος από τη σύνδεση Form: Στο HTML form, βεβαιωθείτε ότι έχετε ορίσει τη post
μέθοδο και το action
χαρακτηριστικό για να καθορίσετε τη διαδρομή όπου POST θα σταλεί το αίτημα.
<form action="/login" method="post">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Login</button>
</form>
Χειρισμός POST αιτήματος για σύνδεση: Στο πρόγραμμα χειρισμού διαδρομής, χρησιμοποιήστε το body-parser
ενδιάμεσο λογισμικό για να εξαγάγετε δεδομένα από το POST αίτημα και να εκτελέσετε επεξεργασία σύνδεσης.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/login',(req, res) => {
const username = req.body.username;
const password = req.body.password;
// Check login information
if(username === 'admin' && password === '123') {
res.send('Login successful!');
} else {
res.send('Login failed!');
}
});
Χειρισμός PUT και DELETE αιτήματα
Χειρισμός PUT αιτήματος: Για να χειριστείτε PUT αιτήματα, μπορείτε να χρησιμοποιήσετε μια διαδρομή και ένα ενδιάμεσο λογισμικό για να εξαγάγετε δεδομένα από το αίτημα και να εκτελέσετε την αντίστοιχη ενημέρωση.
app.put('/update/:id',(req, res) => {
const id = req.params.id;
const updatedData = req.body;
// Perform data update with corresponding ID
});
Χειρισμός DELETE αιτήματος: Για να χειριστείτε DELETE αιτήματα, χρησιμοποιήστε επίσης μια διαδρομή και ενδιάμεσο λογισμικό για να αναγνωρίσετε το αναγνωριστικό και να εκτελέσετε τη διαγραφή.
app.delete('/delete/:id',(req, res) => {
const id = req.params.id;
// Perform data deletion with corresponding ID
});
συμπέρασμα
Η κατανόηση του τρόπου χειρισμού των δεδομένων εισόδου των χρηστών και των διαφόρων αιτημάτων HTTP είναι ζωτικής σημασίας για την ανάπτυξη ιστού. Χρησιμοποιώντας Express.js και ενδιάμεσο λογισμικό όπως body-parser
, μπορείτε εύκολα να επεξεργάζεστε εισόδους από φόρμες και να χειρίζεστε διαφορετικά αιτήματα HTTP συμπεριλαμβανομένων των GET, POST, PUT, PATCH και DELETE. Αυτό σας δίνει τη δυνατότητα να δημιουργήσετε διαδραστικές και ευέλικτες λειτουργίες στον ιστότοπό σας.