Data Trên Server

Nguyễn Đạt

Ở các phần trước chúng ta lấy dữ liệu hiển thị trưc tiếp từ phía client. Ở phần này chúng ta sẽ triển khai để lấy dữ liệu từ phía server. Tuy nhiên ở phần này chúng ta sẽ tạm thời sử dụng dữ liệu từ bộ nhớ server mà chưa sử dụng MongoDB. Việc sử dụng MongoDB làm database để lưu dữ liệu trên server sẽ được triển khai ở các phần sau.

Node.js và Express.js

Bước 5.1: Tạo API Trả Về Danh Sách Bug

Ở bước này chúng ta sẽ thêm một API vào ứng dụng Express.js trên server để trả về dữ liệu gồm danh sách các bug và thông tin liên quan. Như đã nói ở trên dữ liệu này sẽ tạm thời được lưu trong bộ nhớ server (thông qua biến) thay vì sử dụng database. Trong file webapp.js ở phía trước đoạn code khởi tạo và chạy server chúng ta thêm đoạn code sau:

var bugData = [
  {id: 1, priority: 'P1', status:'Open', owner:'Jessica Bánh Bèo', title:'Jessica Bánh Bèo'},
  {id: 2, priority: 'P2', status:'New', owner:'Eddie Tí Tèo', title:'Thiếu canh lề CSS cho văn bản trong table'},
];

Tiếp theo chúng ta sẽ cần thêm một route để cho server xử lý việc trả về danh sách các bug khi nhận được yêu cầu từ client. Ngay dưới đoạn code mới thêm ở trên bạn tiếp tục thêm vào đoạn code sau:

app.get('/api/bugs', function(req, res) {
  res.status(200).send(JSON.stringify(bugData));
});

Route trên áp dụng cho các request gửi từ client:

  • Sử dụng phương thức GET trong giao thức HTTP và
  • Dưới đường dẫn /app/bugs (URL đầy đủ http://localhost:3000/app/bugs)

Với các request đáp ứng hai yêu cầu như trên thì server sẽ trả về dữ liệu dạng JSON và với HTTP status code là 200.

So sánh thay đổi trong source code ở bước 5.1 ở đây.

Bước 5.2: Tạo API Thêm Bug

Ở bước này chúng ta sẽ tạo API trong Express.js để hỗ trợ việc thêm bug. Đồng thời chúng ta sẽ sử dụng thư viện body-parser của Node.js để có thể parse dữ liệu dạng JSON gửi trong request body tới server. Trên terminal đi tới thư mục dự án và chạy câu lện sau:

$ npm install --save body-parser@1.14.2

Câu lệnh trên sẽ cài đặt mô-đun body-parser đồng thời cập nhật nội dung tập tin package.json.

Bây giờ trong webapp.js chúng ta cập nhật đoạn code chứa logic xử lý lấy danh sách các bug mới thêm ở phần trước thành như sau:

app.get('/api/bugs', function(req, res) {
  res.json(bugData);
});

Sau đó thêm vào đoạn code sau để tạo API thêm bug:

app.use(bodyParser.json());
app.post('/api/bugs/', function(req, res) {
  console.log("Req body:", req.body);
  var newBug = req.body;
  newBug.id = bugData.length + 1;
  bugData.push(newBug);
  res.json(newBug);
});

Sau đó quay trở lại terminal khởi động lại Node.js server để các thay đổi ở bước 5.1 và 5.2 có hiệu lực (bấm Ctrl + C để dừng và sau đó chạy lại câu lệnh trước đó để khởi động web server). Bạn có thể test lại API thêm bug mới được thêm vào ở trên thông qua sử dụng câu lệnh curl trên terminal:

$ curl -v \
    --header 'Content-Type: application/json' \
    --data '{"priority":"P3","owner":"Pieta","status":"Open","title":"New bug added via api"}' \
    http://localhost:3000/api/bugs

Chúng ta cũng cần lưu ý về tùy chọn --hearder trong câu lệnh trên dùng để quy định kiểu dữ liệu gửi lên server là applicaiton/json. Nếu bạn bỏ tùy chọn này server sẽ trả về HTTP status code là 304. Bạn cũng có thể tìm thấy các câu lệnh curl dùng để test API được thêm vào tập tin test/test.sh trong source code của dự án ở bước này.

So sánh thay đổi trong source code ở bước 5.2 ở đây.

Bước 5.3: Sử Dụng API Lấy Dữ Liệu

Sau khi đã thêm 2 API thêm bug và lấy danh sách các bug ở 2 bước trước thì ở bước này chúng ta sẽ bắt đầu sử dụng các API này trong Component để lấy về dữ liệu danh sách các bug cũng như thêm bug.

Đầu tiên cập nhật code thiết lập state ban đầu của BugList component để trả về một một mảng trống như sau:

...
var BugList = React.createClass({
  getInitialState: function() {
    return {bugs: []};
  },
  ...
}
...

Tiếp theo thêm thiết lập cho phương thức componentDidMount của BugList component như sau:

...
var BugList = React.createClass({
  ...
  componentDidMount: function() {
    $.ajax('/api/bugs').done(function(data) {
      this.setState({bugs: data});
    }.bind(this));
    // Cần thêm logic xử lý lỗi nếu triển khai trên môi trường production.
  },
...

Chúng ta nhớ lại rằng phương thức componentDidMount() sẽ được gọi ngay khi component được mount. Ở bên trong phương thức này chúng ta thực hiện việc gọi một AJAX request tới server để lấy về dữ liệu danh sách các bug và gán data trả về cho thuộc tính bugs của state của component nhờ gọi method setState({bugs: data}).

Ở đoạn code trên bạn cũng lưu ý cách sử dụng bind(this) để bind (trói buộc) biến this sử dụng bên trong hàm callback (hàm được truyền vào làm đối số bên trong done()) với BugList component.

Sau đó chúng ta có thể xóa đoạn code khai báo biến bugData chứa danh sách các bug được code cứng trong App.js vì dữ liệu này không cần thiết vào thời điểm này nữa.

Bạn cũng đừng quên thêm vào đoạn code tham chiếu tới thư viện jQuery vào bên trong thẻ <head> trong tập tin index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So sánh thay đổi trong source code ở bước 5.3 ở đây.

Bước 5.4: Sử Dụng API Thêm Bug

Tương tự như bước 5.3 ở bước này chúng ta sẽ cập nhật BugList component để sử dụng API để thêm bug. Trong tập tin App.js sửa đoạn code thiết lập method addBug của BugList component giống như sau:

...
var BugAdd = React.createClass({
  ...
  addBug: function(bug) {
    console.log("Adding bug:", bug);
    $.ajax({
      type: 'POST', url: '/api/bugs', contentType: 'application/json',
      data: JSON.stringify(bug),
      success: function(data) {
        var bug = data;
        // Chúng ta sẽ không sửa state thay vào đó sẽ copy state
        var bugsModified = this.state.bugs.concat(bug);
        this.setState({bugs: bugsModified});
      }.bind(this),
      error: function(xhr, status, err) {
        // Nên sửa logic để thông báo lỗi cho người dùng ở đây.
        console.log("Lỗi khi thêm bug:", err);
      }
    });
  }
  ...

Đoạn code này tương tự như đoạn code ở bước 5.3 trước đó và do đó tôi sẽ bỏ qua phần giải thích cho nó.

So sánh thay đổi trong source code ở bước 5.4 ở đây.

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan