Xây dựng một CRUD app đơn giản với Nodejs và Mongodb – Phần 4

325

Tạo giao diện web

Trong hướng dẫn này, chúng ta chỉ xây dựng giao diện trên một file html đơn giản, ngoài ra thì các bạn có thể tự tìm hiểu thêm các view engine của express để xây dựng giao diện web.

Trong thư mục gốc của dự án, chúng ta tạo một static folder có tên là public, thư mục static chứa các file mà client có thể tải về hoặc server gửi đến client. Trong thư mục này, chúng ta tạo một file index.html và các thư mục css, js, images, khi client request đến một url nào đó thì server sẽ response file này và hiển thị lên trình duyệt ở phía client.

Trong file app.js, chúng ta cần khai báo đường dẫn url nào sẽ trỏ tới thư mục static:

// declare public folder as static path:
app.use('/', express.static('public'));

Trong thư mục public của tôi sẽ có cấu trúc như sau:

public/
├── css
│    └── style.css
├── index.html
└── js
     └── index.js

Giao diện của tôi sẽ như sau:

Chúng ta sẽ không tập trung và phần thiết kế giao diện website, mà chỉ tập trung vào cách để gọi các api từ server. Chúng ta sẽ dùng hàm fetch để gọi request đến các api trên server.

CREATE

// function add new task:
function addTask() {
   // prepare data to send:
   var body = {};
   body.content = $('#new-task').val();
   // send request to API by fetch function:
   fetch('http://localhost:3000/task', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify(body)
   }).then(async response => {
       // get response from server:
       var message = "";
       await response.json().then(result => {
           message = result.message;
       });
       // show notify:
       if (response.status == 200) {
           // action when success
       }
       else {
           // action when failed
       }
   });
}

READ

// function get list of task:
function getListTask() {
   // prepare data to send:
   var body = {};
   body.content = $('#new-task').val();
   // send request to API by fetch function:
   fetch('http://localhost:3000/task').then(response => {
       // get response from server:
       if (response.status == 200) {
           // render data:
           var listTask = $('#list-task');
           var content = '';
           response.json().then(result => {
               // action with list of task
           });
       }
       else {
           // action when get data failed
       }
   });
}

UPDATE

// function update a task:
function updateTask(id) {
   // prepare data to send:
   var body = {};
   body.id = id;
   // prompt when delete:
   // send request to API by fetch function:
   fetch('http://localhost:3000/task', {
       method: 'PUT',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify(body)
   }).then(async response => {
       if (response.status == 200) {
       }
   });
}

DELETE

// function delete a task:
function removeTask(id) {
   // prepare data to send:
   var body = {};
   body.id = id;
   // send request to API by fetch function:
   fetch('http://localhost:3000/task', {
       method: 'DELETE',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify(body)
   }).then(async response => {
       // get response from server:
       var message = "";
       await response.json().then(result => {
           message = result.message;
       });
       // show notify:
       if (response.status == 200) {
           // action when success
       }
       else {
           // action when failed           
       }
   });
}

Để test thử giao diện, chúng ta vẫn chạy server như bình thường, sau đó truy cập vào url mà chúng ta đã khai báo cho thư mục static.

Kết quả:

Vậy là chúng ta đã tạo ra một ứng dụng web app sử dụng cơ sở dữ liệu mongoDB. Các bạn có thể tải project hoàn chỉnh tại: https://github.com/trandiepkhanhtrinh/website-todolist/tree/dev

Các bạn có thể tải project hoàn chỉnh tại: https://github.com/trandiepkhanhtrinh/website-todolist/tree/dev