Lập trình ứng dụng

Tạo Server Api Data để test ứng dụng trong Angular Project

Tại sao phải cần Fake Server Api Data khi phát triển ứng dụng trong Angular Project:

Đôi khi trong quá trình phát triển ứng dụng, các developer cần có 1 dịch vụ Api Data để kiểm tra nhanh gọn các tính năng đang phát triển. Tạo một dịch vụ Api Data đáp ứng nhu cầu CRUD thì không phải khó, tuy nhiên điều này tốn rất nhiều thời gian và không cần thiết cho lắm. Do đó, nhu cầu cần có 1 service api data gọn nhẹ, không mất nhiều time là rất cần thiết. Nội dung sau tôi xin hướng dẫn bạn cách tạo 1 dịch vụ gọn nhẹ như thế trong 6 bước.  

Bước 1: Cài đặt package với lệnh npm install –save json-server

npm install --save json-server

Bước 2: Tạo 2 file trong thư mục api gồm api/db.json và routes.json với nội dung sau:

db.json
{
  "cities": [
    {
      "id": 1,
      "name": "Hồ Chí Minh"
    },
    {
      "id": 2,
      "name": "Hà Nội"
    },
    {
      "id": 3,
      "name": "Đà Nẵng"
    },
    {
      "id": 4,
      "name": "Nha Trang"
    },
    {
      "name": "Hai Phong",
      "id": 67
    },
    {
      "name": "Ba Ria",
      "id": 70
    },
    {
      "name": "Binh Dinh",
      "id": 50
    }
 ]
}
routes.json
{
  "/api/*": "/$1"
}

Bước 3: Thêm comand script run trong file package.json

"scripts": {
    ...
    "api": "json-server api/db.json --routes api/routes.json --no-cors=true"
 },

Bước 4: Chạy test với lệnh: npm run api và truy cập địa chỉ http://localhost:3000 để lấy đường dẫn truy cập endpoint api.

Bước 5: Nếu bước 4 hoạt động chúng ta fix lỗi CORS trong Angular bằng cách tạo 1 file proxy.conf.json và thêm đoạn mã sau:

{
    "/api": {
      "target": "http://localhost:3000"
    }
 }

Bước 6: Thêm đoạn mã sau trong file angular.json để kích hoạt proxy khi request

"serve": {
 "development": {
    "browserTarget": "TinyGarden:build:development",
    "proxyConfig": "proxy.conf.json"
    }
  },
  "defaultConfiguration": "development"
},

Kevin Dang

Hey there! My name is Kevin Dang, I am website, software, mobile app develop, web admin system. Expert living in Hồ Chí Minh (Việt Nam). I am very interested in digital marketing with: SEO, Facebook, Google Ads ... This blog is where I will share the experiences, techniques and knowledge I have learned.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *