Vậy làm sao để chạy nó ta? đó là dùng các công cụ REST client như PostMan (Chrome), HTTP Requester (Firefox), WCF client Test (Microsoft). Lưu ý các công cụ này ta vẫn Debug được NodeJS một cách trực tiếp trong Visual nha (xem lại bài này để biết cách Debug->Kéo xuống cuối bài hướng dẫn sẽ thấy).
OK, bây giờ Thím mở PostMan lên:
Mục 2: Nhập URI //localhost:1337/addProduct
Mục 3: Chọn body và checked vào x-www-form-urlencoded
Mục 4: Nhập các Parameter trong body cho API. Lưu ý nhập chính xác tên biến khớp tới Cột trong bảng CSDL nha. Tui chụp hình dưới đây để các bạn hiểu về sự so khớp từ Client -> API
Mục 5: Bấm SEND
Mục 6: Kết quả cho biết là true hay false (true thành công, false thất bại.
Bây giờ ta có thể chạy lại API //localhost:1337/products để xem được kết quả có thêm thành công hay chưa:
Như vậy các bạn đã biết cách viết HTTPPOST để lưu một Product vào cơ sở dữ liệu MongoDB như thế nào rồi nha.
Lưu ý muốn Debug để gỡ lỗi từng bước thì xem lại bài 23, kéo xuống dưới cùng có hướng dẫn
Source code HTTPPOST Thêm mới Product tải ở đây.
Bài sau Tui sẽ hướng dẫn các Thím cách viết HTTPPUT để chỉnh sửa dữ liệu, và sau đó là HTTPDELETE. Các bạn chú ý theo dõi nhé
If you need file uploads, form-data is your only option here. Otherwise, they serve the same job. form-data is a fancier way of encoding data than x-www-form-urlencoded. You can think of x-www-form-urlencoded as .txt file and form-data as .html file. In the end of day they both deliver some http payload.
Try 🏀 getd.io playground links 🏀 below to see what the headers and body look like:
- Send a request with x-www-form-urlencoded
- Send a request with form-data
Content Type
content-type x-www-form-urlencoded --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
0 form-data --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
1
A quick note for form-data: Usually the browser generates a random --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
3, e.g., --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
4, but you can specify your own if you want. See below for examples.
Request Payload
Let's say you have a login form with fields below:
Fields Values username techbos password Pa$$w0rd
When you post the form, the payload for x-www-form-urlencoded looks like below. Note how strings are --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
6'd. username=techbos&password=Pa%24%24w0rd
For form-data, each (key, value) pair is encoded in its own section, with --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
3 as separator. Here I also included a sample section in the end to show you what a file upload looks like: --{boundary string} Content-Disposition: form-data; name="username", techbos --{boundary string} Content-Disposition: form-data; name="password", Pa$$w0rd --{boundary string} Content-Disposition: form-data; name="file"; filename="image.jpg" Content-Type: image/jpeg, --{boundary string}--
Explained inline:
API to send request
API to handle response
For x-www-form-urlencoded, use bodyParser, which will parse payload into express.use(bodyParser.urlencoded({ extended: true })); express.post('/my-form-endpoint', (req, res) => { console.log(req.body.username); // print 'techbos' });
0 in the format of express.use(bodyParser.urlencoded({ extended: true })); express.post('/my-form-endpoint', (req, res) => { console.log(req.body.username); // print 'techbos' });
express.use(bodyParser.urlencoded({ extended: true })); express.post('/my-form-endpoint', (req, res) => { console.log(req.body.username); // print 'techbos' });
Same functionality also comes built-in with .
For parsing form-data, you can use packages such as busboy or formidable. See their doc for how-to.
What's your favorite library for sending / handling forms? Leave a comment below to share your experience ❤️❤️❤️!