Làm cách nào để bạn thêm html và css vào nút js?

Trong hướng dẫn này, bạn sẽ học cách xây dựng một Node đơn giản và rõ ràng. ứng dụng kết xuất phía máy chủ js sử dụng khung Express và các mẫu Pug được tạo kiểu bằng CSS

Như một phần thưởng, bạn sẽ học cách hợp lý hóa Node của mình. js bằng cách sử dụng

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7 để khởi động lại máy chủ và

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

8 để tải lại trình duyệt bất cứ khi nào tệp nguồn có liên quan thay đổi

Tìm biểu tượng cảm xúc 🛠️️ nếu bạn muốn đọc lướt qua nội dung trong khi tập trung vào các bước xây dựng

Những gì bạn sẽ xây dựng

Bạn sẽ xây dựng một cổng đăng nhập cho một nhà hàng có tên là WHATABYTE bằng cách sử dụng kết xuất phía máy chủ (SSR)

Chúng tôi đã thử nghiệm hướng dẫn này bằng Node. js

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

9 và npm

npm i express

0. Nếu bạn cần cài đặt Node. js và npm, hãy sử dụng bất kỳ Node chính thức nào. js được cung cấp cho hệ điều hành của bạn

Bootstrap một nút. dự án js

🛠️ Tạo một thư mục dự án có tên

npm i express

1 ở bất kỳ đâu trong hệ thống của bạn và biến nó thành thư mục hiện tại của bạn

mkdir whatabyte-portal
cd whatabyte-portal

🛠️ Thực hiện lệnh sau trong thư mục

npm i express

1 để khởi tạo Node của bạn. dự án js với cài đặt mặc định

npm init -y

🛠️ Sau đó, tạo điểm vào của ứng dụng, một tệp có tên

npm i express

3

touch index.js

Tạo tập lệnh npm để chạy ứng dụng

Bạn sẽ sử dụng

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7 để giám sát mã nguồn dự án của mình và tự động khởi động lại Nút của bạn. js bất cứ khi nào nó thay đổi

🛠️ Như vậy, hãy cài đặt

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7 làm phụ thuộc phát triển

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

2

Lệnh trên tương đương với việc chạy

npm i express

6

🛠️ Tạo một lệnh tập lệnh

npm i express

7 trong tệp

npm i express

8 của bạn để chạy

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7 và xóa tập lệnh

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

70

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7 lấy đối số là điểm vào của một ứng dụng và thực thi nó

nút thử nghiệm. js nằm ngoài phạm vi của hướng dẫn này. Tuy nhiên, điều quan trọng là phải triển khai thử nghiệm để tạo các ứng dụng web mạnh mẽ, sẵn sàng sản xuất

Bây giờ bạn đã có cấu trúc cơ bản của một Nút. ứng dụng js

Thưởng. Chuẩn bị cho Kiểm soát phiên bản Git

🛠️ Tạo một tệp

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

72 trong thư mục dự án để tránh phạm các tệp không cần thiết hoặc nhạy cảm. Điền vào tệp đó nội dung của Gist này hoặc thoải mái sử dụng gitignore. io để tạo tệp

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

72 tùy chỉnh của riêng bạn

Thiết lập nhanh với nút. js

🛠️ Để sử dụng khung Express trong ứng dụng của bạn, hãy cài đặt nó dưới dạng phần phụ thuộc của dự án

npm i express

🛠️ Mở

npm i express

3 và điền vào đó mẫu sau để xác định cấu trúc cốt lõi của ứng dụng Express

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7

🛠️ Bây giờ, dưới mục

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

75, hãy nhập các gói

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

76 và

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

77

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

8

Mô-đun này cung cấp cho bạn các tiện ích để làm việc với đường dẫn tệp và thư mục. Bạn sẽ sử dụng nó sau này để tạo đường dẫn tệp đa nền tảng để truy cập các mẫu xem và nội dung tĩnh, chẳng hạn như biểu định kiểu và hình ảnh

🛠️ Tiếp theo, bên dưới phần

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

79, hãy thêm phần sau

npm i express

0

Tại đây, bạn thực thi chức năng mặc định được xuất bởi mô-đun

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

76 để tạo một phiên bản của ứng dụng Express, sau đó bạn lưu trữ trong

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

81. Bạn cũng xác định cổng mà máy chủ sẽ sử dụng để lắng nghe yêu cầu. giá trị của nó là

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

82, nếu có, hoặc

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

83 theo mặc định

🛠️ Trong phần

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

84, hãy tạo một trình xử lý định tuyến đơn giản cho yêu cầu HTTP

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

85 trả lời bằng một chuỗi

npm i express

7

Tham khảo Express Basic Routing để biết thêm chi tiết

🛠️ Cuối cùng, trong phần

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

86, hãy khởi động máy chủ lắng nghe các yêu cầu đến trên

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

87 và hiển thị thông báo xác nhận rằng nó đang lắng nghe

npm init -y

0

Chạy ứng dụng Express

🛠️ Thực thi

npm i express

7 để kiểm tra tập lệnh và chạy ứng dụng

npm init -y

1

🛠️ Truy cập

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

89 để xem ứng dụng đang hoạt động. Trình duyệt sẽ hiển thị chuỗi "WHATABYTE. Food For Devs" trên một trang đơn giản

Sử dụng Công cụ mẫu Pug với Express

Các ứng dụng web hiện đại dựa trên dữ liệu và cần các chế độ xem có thể hiển thị dữ liệu động. Mặc dù bạn có thể tạo các chế độ xem đẹp mắt bằng cách sử dụng các mẫu HTML tĩnh, nhưng bạn không thể cấp nước cho chúng bằng dữ liệu từ máy chủ

Thay vào đó, bạn sử dụng các công cụ mẫu như Pug để tạo các chế độ xem động có thể hiển thị các phần tử giao diện người dùng theo điều kiện và bạn có thể hydrat hóa bằng các giá trị từ máy chủ. Điều khiến Pug nổi bật so với các dịch vụ khác là cú pháp ngắn gọn và hỗ trợ kế thừa mẫu để soạn trang dễ dàng

🛠️ Để sử dụng Pug, hãy bắt đầu bằng cách cài đặt gói

npm i express

00 bằng cửa sổ terminal khác

npm init -y

2

Để tối ưu hóa thành phần trang thông qua các mẫu, bạn sẽ sử dụng kế thừa mẫu để mở rộng mẫu bố cục cốt lõi bao hàm cấu trúc HTML cấp cao nhất của trang

🛠️ Như vậy, hãy tạo một thư mục có tên

npm i express

01 trong thư mục dự án để lưu trữ tất cả các mẫu của bạn

npm init -y

3

Trong thư mục mới này, hãy tạo một tệp

npm i express

02

npm init -y

4

Điền vào

npm i express

03 với nội dung sau

npm init -y

5

Lưu ý rằng mẫu này sử dụng biến

npm i express

04 để hiển thị tiêu đề tài liệu của một trang. Giá trị biến này sẽ được chuyển từ máy chủ sang mẫu bằng trình xử lý định tuyến được xác định trong API, còn được gọi là bộ điều khiển

🛠️ Tiếp theo, tạo một tệp

npm i express

05 trong cùng thư mục

npm init -y

6

Thêm nội dung sau vào

npm i express

06

npm init -y

7

Với hai mẫu này, bạn đang sử dụng các tạo phẩm

npm i express

07 và

npm i express

08 để triển khai kế thừa mẫu. Trong một mẫu như

npm i express

02, bạn có thể xác định các điểm chèn nội dung thông qua một tên

npm i express

07. Một mẫu khác, chẳng hạn như

npm i express

05, sau đó có thể đưa nội dung vào mẫu đó bằng cách mở rộng mẫu đó trước rồi xác định nội dung của khối được đặt tên

Mẫu Pug không sử dụng thẻ HTML. Thay vào đó, họ chỉ cần sử dụng tên của các thành phần HTML và khoảng trắng để xác định cấu trúc của chúng. Bạn thiết lập mối quan hệ cha-con giữa các phần tử bằng cách sử dụng thụt đầu dòng

Bạn có thể xác định các thuộc tính phần tử, chẳng hạn như

npm i express

72, bằng cách đặt khóa và giá trị thuộc tính bên cạnh tên phần tử và đặt nó trong dấu ngoặc đơn, giống như cấu trúc của lệnh gọi hàm

npm init -y

8

Nội dung của phần tử có thể cùng dòng với tên phần tử hoặc thụt vào bên dưới

npm init -y

9

Truy cập Bắt đầu để biết tổng quan đầy đủ về cách thức hoạt động của Pug

Để kết nối các mẫu với bộ điều khiển, bạn cần định cấu hình Express để sử dụng Pug làm công cụ mẫu xem

🛠️ Mở

npm i express

3 và thêm phần sau vào phần

npm i express

74

touch index.js

0

Tại đây, bạn dùng để gán tên cài đặt cho một giá trị. Một số tên cài đặt được Express dành riêng để định cấu hình hành vi của ứng dụng, chẳng hạn như

npm i express

01 và

npm i express

77

Cài đặt

npm i express

01 cho Express biết thư mục nào sẽ được sử dụng làm nguồn của tệp mẫu chế độ xem. Trong trường hợp này, bạn đặt thư mục

npm i express

01 làm nguồn bằng phương thức tạo đường dẫn tệp đa nền tảng

Cài đặt

npm init -y

01 cho Express biết nên sử dụng công cụ mẫu nào, trong trường hợp này là

npm i express

00

Hiển thị chế độ xem Pug dưới dạng phản hồi của khách hàng

🛠️ Tiếp theo, bạn sẽ cấu trúc lại bộ điều khiển

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

85 để làm cho nó hiển thị

npm i express

05 dưới dạng phản hồi của khách hàng. Trong phần

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

84, hãy cập nhật trình xử lý tuyến đường của bạn như sau

touch index.js

1

Đối số đầu tiên của là một chuỗi đại diện cho đường dẫn tệp của mẫu, liên quan đến thư mục nguồn mẫu,

npm i express

01. Nó kết xuất tệp và gửi HTML được kết xuất dưới dạng chuỗi tới máy khách. Phần mở rộng cho tệp mẫu mặc định là

npm init -y

08 vì Pug là công cụ xem mặc định

Đối số thứ hai của nó là tùy chọn và đại diện cho một đối tượng mà bộ điều khiển chuyển đến mẫu. Các thuộc tính của đối tượng này trở thành các biến cục bộ trong mẫu. Do đó,

npm init -y

09 định nghĩa một biến

npm i express

04 cục bộ trong

npm i express

05. Tuy nhiên,

npm i express

05 không sử dụng

npm i express

04 cục bộ;

Tham khảo Sử dụng công cụ mẫu với Express để biết thêm chi tiết

🛠️ Làm mới trình duyệt để xem trang mới hiển thị trên màn hình

Khi bạn thực hiện bất kỳ thay đổi nào trong mẫu

npm i express

05, bạn có thể làm mới trình duyệt để xem các thay đổi. Tuy nhiên, làm mới trình duyệt theo cách thủ công để xem các bản cập nhật sẽ làm chậm quá trình phát triển của bạn. Để khắc phục điều đó, bạn sẽ sử dụng Browsersync

Thêm Tải lại trực tiếp vào Express bằng Browsersync

Bạn có thể mô phỏng hành vi tải lại trực tiếp của các khung giao diện người dùng, chẳng hạn như các mẫu React và Angular in Express bằng Browsersync. Khi quy tắc CSS hoặc giá trị trả về của hàm bị thay đổi, trình duyệt sẽ tự động làm mới

🛠️ Bắt đầu bằng cách cài đặt Browsersync như sau

touch index.js

2

🛠️ Làm việc với Browsersync thật dễ dàng. Thực hiện lệnh sau để tạo tệp cấu hình với các tùy chọn mặc định

touch index.js

3

npm init -y

16 tạo một tệp

npm init -y

17 trong thư mục dự án của bạn, chứa một số lượng lớn các cài đặt mặc định. Bạn chỉ cần một tập hợp con nhỏ các tùy chọn đó để sử dụng Browsersync để tải lại các trang web của mình khi bạn thay đổi mã dự án của mình

🛠️ Thay thế nội dung của

npm init -y

17 bằng nội dung sau

touch index.js

4Các tùy chọn cấu hình Browsersync này đang làm gì?

touch index.js

5

Ủy quyền ứng dụng Node/Express được cung cấp trên

npm init -y

19 vì Browsersync chỉ tạo một máy chủ tĩnh cho các trang web HTML/JS/CSS cơ bản. Bạn vẫn cần chạy riêng máy chủ với

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

7

touch index.js

6

Sử dụng các mẫu hình cầu>), chỉ định đường dẫn tệp để xem. Bạn sẽ xem các tệp CSS, Pug và JavaScript

touch index.js

7

Chỉ định các mẫu mà người theo dõi tệp cần bỏ qua. Bạn muốn bỏ qua

npm init -y

21 để Browsersync chạy nhanh

touch index.js

8

Thời gian tính bằng mili giây để trì hoãn sự kiện tải lại sau khi thay đổi tệp để ngăn Nodemon và Browsersync chồng chéo, điều này có thể gây ra hành vi thất thường

touch index.js

9

Không khởi động giao diện người dùng Browsersync, một trang nơi bạn có thể kiểm soát hành vi của Browsersync

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

20

Tắt thông báo gây mất tập trung thông báo cho bạn rằng Browsersync được kết nối với trình duyệt

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

21

Sử dụng một cổng cụ thể để lưu trữ trang web

Kiểm tra tài liệu "Tùy chọn đồng bộ hóa trình duyệt" để tìm hiểu thêm chi tiết về tất cả các tùy chọn cấu hình mà Browsersync cung cấp cho bạn để tối ưu hóa quy trình phát triển của bạn

🛠️ Tiếp theo, tạo tập lệnh npm để định cấu hình và chạy Browsersync để phục vụ các trang web của bạn. Mở và cập nhật

npm i express

8 bằng tập lệnh npm

npm init -y

23 sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

22

🛠️ Để phục vụ giao diện người dùng của ứng dụng Express, hãy chạy lệnh sau trong một cửa sổ đầu cuối riêng biệt

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

23

Thiết bị đầu cuối sẽ xuất thông tin về các vị trí cục bộ và bên ngoài phục vụ trang tĩnh

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

24

🛠️ Browsersync tự động mở một cửa sổ mới hiển thị giao diện của bạn. Nếu không, hãy mở

npm init -y

24. Thực hiện bất kỳ thay đổi nào trên tệp

npm i express

05, lưu tệp đó và xem cách trang web phục vụ trên cổng

npm init -y

26 tự cập nhật

"Tìm hiểu cách Browsersync cho phép bạn hợp lý hóa quy trình phát triển của mình khi tạo các ứng dụng được kết xuất phía máy chủ bằng Node và Express. "

Tweet cái này đi

Phục vụ nội dung tĩnh với Express

Để tích hợp biểu định kiểu và hình ảnh vào ứng dụng, bạn cần định cấu hình Express để truy cập và cung cấp các tệp tĩnh từ thư mục dự án — một quy trình tương tự như định cấu hình công cụ kết xuất

🛠️ Đối với ứng dụng của bạn, hãy tạo một thư mục có tên

npm init -y

27 trong thư mục dự án để phục vụ mục đích này

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

25

Bạn sẽ sử dụng , một chức năng phần mềm trung gian tích hợp chỉ định đường dẫn thư mục để phục vụ nội dung tĩnh

🛠️ Quay trở lại

npm i express

3 và cập nhật phần

npm i express

74 như sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

26

Để gắn chức năng phần mềm trung gian

npm init -y

28, bạn sử dụng. Bây giờ bạn có thể đặt bên trong thư mục

npm init -y

27 bất kỳ tệp CSS hoặc hình ảnh nào mà ứng dụng của bạn cần sử dụng

Các mẫu Style Express sử dụng CSS

🛠️ Trong thư mục

npm init -y

27, tạo tệp

npm init -y

35

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

27

🛠️ Điền nội dung của

npm init -y

36 như sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

28

🛠️ Lưu các thay đổi của bạn. Để sử dụng biểu định kiểu này, bạn cần liên kết với nó từ một tệp mẫu. Cập nhật

npm i express

02 như sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

29

🛠️ Lưu lại các thay đổi của bạn. Quan sát cách Browsersync tải lại trình duyệt và màu nền của trang chủ thay đổi. Đây là nền tảng của việc tạo kiểu cho mẫu Pug trong Express bằng CSS. Bạn có thể thêm bao nhiêu quy tắc và biểu định kiểu khác tùy thích

🛠️ Các mẫu Pug bạn đã tạo có các lớp CSS trong phần đánh dấu để xác định bố cục và cách trình bày của chúng. Thay thế nội dung của

npm init -y

35 bằng nội dung sau để sử dụng các lớp đó

Nhấn vào đây để xem nội dung của

npm init -y

35.

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

0

Biểu định kiểu mới sử dụng các biến CSS bằng cách sử dụng hàm

npm init -y

40 để giữ cho mã của bạn KHÔ. , nhưng Edge hỗ trợ chúng

Với biểu định kiểu mới này được áp dụng, trang chỉ mục trông đẹp hơn nhiều

"Tìm hiểu cách tạo kiểu mẫu Express bằng Pug cùng với các biến CSS. "

Tweet cái này đi

Thêm hình ảnh vào ứng dụng Express

Bạn có thể đặt các tệp hình ảnh trong thư mục

npm init -y

27 và sau đó tham chiếu đường dẫn tương đối của chúng từ bất kỳ phần tử nào mà bạn muốn sử dụng chúng. Sử dụng hình ảnh làm nền của vùng chứa

npm init -y

42 trong

npm i express

05

🛠️ Để bắt đầu, nhấp chuột phải vào hình ảnh sau và lưu nó với tên

npm init -y

44 bên trong thư mục

npm init -y

27

Ảnh của Caesar Aldhela trên Bapt

🛠️ Tiếp theo, mở

npm init -y

36 và thêm vào tệp một lớp

npm init -y

47 như sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

1

🛠️ Sau đó, mở

npm i express

06 và thêm lớp mới này vào vùng chứa

npm init -y

42. Bây giờ nó sẽ trông như thế này

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

2

Đừng quên rằng thụt lề là rất quan trọng đối với cấu trúc mẫu phù hợp với Pug. Thụt lề tạo một phần tử HTML con

Dựa trên cấu hình của ứng dụng Express này, giá trị

npm init -y

50 của thuộc tính

npm init -y

51 tham chiếu hình ảnh bằng đường dẫn tệp liên quan đến thư mục

npm init -y

27. Bạn cũng chỉ định vị trí hình ảnh, ________ 753, và cách trình bày của nó, ________ 754, giúp ngăn kéo giãn

Bây giờ bạn sẽ có hình ảnh hấp dẫn này làm nền của trang chỉ mục

🛠️ Tiếp theo lưu file icon này với tên

npm init -y

55 trong thư mục

npm init -y

27 để lấy logo trong tab trình duyệt. Khó tải lại trình duyệt của bạn để xem thay đổi cụ thể này

Tạo thêm lượt xem với Pug và Express

🛠️ Để thực hành, hãy tạo một trang hồ sơ người dùng. Trong thư mục

npm i express

01, tạo tệp mẫu Pug có tên

npm init -y

58

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

3

Điền vào mẫu mới này với nội dung sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

4

🛠️ Biến cục bộ

npm init -y

59 sẽ được cung cấp cho chế độ xem này bởi bộ điều khiển hiển thị nó. Để tạo bộ điều khiển đó, hãy mở

npm i express

3 và cập nhật phần

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

84 như sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

5

Một lần nữa, bạn sử dụng tham số thứ hai của

npm init -y

62 để truyền dữ liệu từ bộ điều khiển sang mẫu. Trong trường hợp này, bạn đang chuyển thông tin người dùng giả tới mẫu hồ sơ người dùng

🛠️ Sử dụng lớp

npm init -y

63 được xác định trong mẫu người dùng để tạo kiểu cho nó. Mở

npm init -y

36 và thêm quy tắc sau

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

6

🛠️ Để thay thế cho việc tham khảo hình ảnh trong thư mục

npm init -y

27, bạn có thể sử dụng URL của hình ảnh được lưu trữ. Truy cập

npm init -y

66 và xem chế độ xem người dùng được hiển thị bằng hình nền và chứa đầy dữ liệu người dùng giả

Ảnh của Helena Lopes trên Bapt

Tóm tắt lại

Bạn đã sử dụng Nút. js, Express, Pug và CSS để tạo ứng dụng web hiển thị giao diện người dùng phong cách với dữ liệu động bằng cách giao tiếp với API. Bạn cũng đang cung cấp nội dung tĩnh từ máy chủ lưu trữ API

Bước tiếp theo, bạn có thể tìm hiểu cách thêm xác thực vào Express bằng Hộ chiếu. js và Auth0. Nút bảo mật. js với Auth0 rất dễ dàng và mang lại nhiều tính năng tuyệt vời cho bảng

Sau khi bạn đăng ký tài khoản Auth0 miễn phí, bạn chỉ cần viết một vài dòng mã để có được giải pháp quản lý danh tính vững chắc với sự hỗ trợ cho đăng nhập một lần, nhà cung cấp danh tính xã hội (như Facebook, GitHub, Twitter, v.v. ) và nhà cung cấp danh tính doanh nghiệp (như Active Directory, LDAP, SAML, tùy chỉnh, v.v. )

Làm cách nào để đưa HTML và CSS vào nút JS?

Nút JS có sử dụng HTML và CSS không?

Làm cách nào để sử dụng HTML với Node js?

Làm cách nào để hiển thị tệp HTML trong nút js?