Morioh
Login
CODE VN

CODE VN

7 months ago

Xây dựng một máy chủ phụ trợ đơn giản bằng React và Node.js

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách xây dựng một máy chủ phụ trợ đơn giản bằng cách sử dụng Javascript Node.js làm lớp ứng dụng và React.js làm lớp xem tương tác với phần phụ trợ để mô phỏng trải nghiệm ngăn xếp đầy đủ.

Thiết lập máy chủ

Ứng dụng máy chủ mà bạn sẽ tạo sẽ là điểm cuối API mô phỏng trả về dữ liệu JSON. Bắt đầu bằng cách tạo một tệp Javascript có tên app.js với nội dung sau:

var http = require('http');

var hostname  = '127.0.0.1';
var port      = 3000;

var app = http.createServer(function(req, res) {
            res.setHeader('Content-Type', 'application/json');

            res.end(
              JSON.stringify({
                firstName: "John",
                lastName: "Doe"
              })
            );
          });

app.listen(port, hostname);

Sử dụng Javascript và Node.js đơn giản, bạn có thể dễ dàng tạo một máy chủ ứng dụng máy chủ hoạt động như một điểm cuối. Dòng res.setHeader('Content-Type', 'application/json') buộc phản hồi trả về dữ liệu dưới dạng JSON. Hàm res.end() chấp nhận phiên bản chuỗi của đối tượng JSON chứa firstName và lastName, đây sẽ là trọng tải của hàm này điểm cuối. Ứng dụng máy chủ được khởi động bằng cách chạy dòng app.listen(port, hostname), có tham số được đặt thành localhost và số cổng 3000 của máy chủ.

Chạy máy chủ

Đưa ra lệnh sau trong thiết bị đầu cuối của bạn để bắt đầu chạy máy chủ:

$ node app.js

Sử dụng trình duyệt của bạn, truy cập URL http://localhost:3000 và bạn sẽ thấy đối tượng JSON được trả về có dạng sau:

{
  "firstName": "John",
  "lastName": "Doe"
}

Sau khi bạn đã xác minh rằng điểm cuối mô phỏng của mình đang hoạt động, hãy thực hiện hành động tương tự, nhưng lần này là lập trình bằng cách sử dụng thành phần giao diện người dùng React.js.

Tạo giao diện người dùng React.js

Bắt đầu bằng cách tạo thành phần React có tên PersonComponent với mã sau:

import React from 'react';
import $ from 'jquery';

export default class PersonComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.firstName} {this.state.LastName}</h1>
      </div>
    );
  }
}

Thành phần vanilla này sẽ chỉ hiển thị các giá trị trạng thái firstName và lastName. Ban đầu, những giá trị này được đặt dưới dạng một chuỗi trống.

Tiếp theo, tạo một phương thức tìm nạp dữ liệu từ API phụ trợ của bạn, có điểm cuối là http://localhost:3000. Tạo phương thức fetch sau trong thành phần của bạn:

fetch() {
  var context = this;

  $.ajax({
    url: 'http://localhost:3000',
    method: 'GET',
    success: function(response) {
      context.setState({
        firstName: response.firstName,
        lastName: response.lastName
      });
    }
  });
}

Trước tiên, bạn tạo một tham chiếu context có giá trị là this, tham chiếu đến phiên bản thành phần của bạn. Điều này sẽ được sử dụng sau này trong logic của hàm thành công sau khi mã thực hiện lệnh gọi thành công tới phần phụ trợ API. context sau đó sẽ gọi setState và cập nhật các giá trị trạng thái của thành phần React.js đến từ response, lần lượt là đối tượng JSON được API trả về.

Điều cuối cùng cần làm là tự động gọi fetch khi thành phần được gắn lần đầu tiên. Để làm như vậy, hãy ghi đè phương thức thành phần React.js componentDidMount() bằng logic sau:

componentDidMount() {
  this.fetch();
}

Tất cả những gì cần làm là gọi fetch sau khi thành phần đã được gắn thành công. Đổi lại, fetch sẽ tương tác với API, cập nhật trạng thái và buộc hiển thị lại chế độ xem với các giá trị đã cập nhật, do đó hoàn thành chu trình.

Mã tổng thể

Mã cuối cùng sẽ trông giống như sau:

Ứng dụng máy chủ

var http = require('http');

var hostname  = '127.0.0.1';
var port      = 3000;

var app = http.createServer(function(req, res) {
            res.setHeader('Content-Type', 'application/json');

            res.end(
              JSON.stringify({
                firstName: "John",
                lastName: "Doe"
              })
            );
          });

app.listen(port, hostname);

Giao diện ReactJS

import React from 'react';
import $ from 'jquery';

export default class PersonComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    }
  }

  componentDidMount() {
    this.fetch();
  }

  fetch() {
    var context = this;

    $.ajax({
      url: 'http://localhost:3000',
      method: 'GET',
      success: function(response) {
        context.setState({
          firstName: response.firstName,
          lastName: response.lastName
        });
      }
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.firstName} {this.state.LastName}</h1>
      </div>
    );
  }
}

Trong hướng dẫn này, bạn đã biết cách sử dụng một ngôn ngữ lập trình duy nhất để triển khai cả thành phần phụ trợ và giao diện người dùng của ứng dụng của mình.

1.55 GEEK