Mengendalikan Data Input dalam Express.js

Apabila membina aplikasi web, pengendalian data input pengguna adalah aspek kritikal untuk mencipta ciri interaktif dan fleksibel. Dalam Express.js persekitaran pembangunan, anda boleh dengan mudah memproses data input daripada borang dan pelbagai permintaan HTTP seperti GET, POST, PUT, PATCH, dan DELETE. Berikut ialah panduan terperinci dengan pelbagai kaedah dan contoh untuk membantu anda mencapai matlamat ini:

Menerima Maklumat daripada Form

Mencipta HTML Form: Mulakan dengan mencipta HTML form dalam fail Pug atau EJS. Pastikan anda menetapkan action atribut dalam <form> teg untuk menentukan laluan tempat permintaan akan dihantar.

<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>  

Mengendalikan POST Permintaan: Dalam pengendali laluan, gunakan body-parser perisian tengah untuk mengekstrak data daripada POST permintaan.

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  
});  

 

Mengendalikan Pelbagai Jenis Permintaan dengan Contoh Log Masuk

Menghantar POST Permintaan daripada Log Masuk Form: Dalam HTML form, pastikan anda menetapkan post kaedah dan action atribut untuk menentukan laluan di mana POST permintaan akan dihantar.

<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>  

Mengendalikan POST Permintaan untuk Log Masuk: Dalam pengendali laluan, gunakan body-parser perisian tengah untuk mengekstrak data daripada POST permintaan dan melaksanakan pemprosesan log masuk.

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!');  
  }  
});  

 

Pengendalian PUT dan DELETE Permintaan

Mengendalikan PUT Permintaan: Untuk mengendalikan PUT permintaan, anda boleh menggunakan laluan dan perisian tengah untuk mengekstrak data daripada permintaan dan melakukan kemas kini yang sepadan.

app.put('/update/:id',(req, res) => {  
  const id = req.params.id;  
  const updatedData = req.body;  
  // Perform data update with corresponding ID  
});  

Mengendalikan DELETE Permintaan: Untuk mengendalikan DELETE permintaan, gunakan juga laluan dan perisian tengah untuk mengenal pasti ID dan melakukan pemadaman.

app.delete('/delete/:id',(req, res) => {  
  const id = req.params.id;  
  // Perform data deletion with corresponding ID  
});  

 

Kesimpulan

Memahami cara mengendalikan data input pengguna dan pelbagai permintaan HTTP adalah penting dalam pembangunan web. Dengan menggunakan Express.js dan middleware seperti body-parser, anda boleh dengan mudah memproses input daripada borang dan mengendalikan permintaan HTTP yang berbeza termasuk GET, POST, PUT, PATCH, dan DELETE. Ini membolehkan anda mencipta ciri interaktif dan fleksibel di tapak web anda.