Đường dẫn tương đối của nodejs

Ở bài trước, chúng ta đã hoàn thiện phần nhúng Bootstrap vào dự án kết hợp với Bố cục mẫu. Trên thực tế, dự án của chúng tôi hoàn toàn có thể có thêm các tệp tĩnh (tệp tĩnh). Các tệp tĩnh này có thể là tệp ảnh, tệp CSS, JS,. Nó sẽ được sử dụng trên các trang HTML của chúng tôi, hoặc lưu các tài liệu ở định dạng word, excel, pdf,. to allow user download

Ở bài học hôm nay, chúng ta sẽ tìm hiểu về cách lưu tập tin tĩnh và sử dụng nó

Đầu tiên, mình sẽ tạo 1 thư mục có tên là "assets" trong thư mục "nodeapp". Bên trong thư mục này, mình tạo thư mục "hình ảnh" tiếp theo để lưu các ảnh của dự án. Trong thư mục "hình ảnh", mình sẽ tạo thêm 1 thư mục "người dùng" để quản lý các liên quan ảnh đến "người dùng"

|--nodeapp
|----assets
|------images
|--------users

Bài toán đặt ra hôm nay, là mỗi người dùng sẽ có thêm 1 thuộc tính có tên là "hình đại diện" để lưu ảnh đại diện. Mình sẽ sửa lại mảng thông tin user tại file "controllers/user. js" as after

var users = [
	{id: 1, name: "User111", email: "[email protected]", age: 31, avatar: 'assets/images/users/user1.png'}, 
	{id: 2, name: "User2", email: "[email protected]", age: 20, avatar: 'assets/images/users/user2.png'},
	{id: 3, name: "User1", email: "[email protected]", age: 25, avatar: 'assets/images/users/user3.png'}
];

Ở trên, mình đã thêm 1 thuộc tính avatar lưu đường dẫn ảnh cho mỗi người dùng. Các bạn hãy lấy 3 bức ảnh bất kỳ và lưu vào thư mục "nội dung/hình ảnh/người dùng" và đặt tên như mảng trên nhé

Tiếp theo, mình sẽ điều chỉnh lại code HTML trong phẩn table hiển thị danh sách user ở file "users/index.pug" một chút bằng cách thêm 1 thẻ

Đức Phúc @NHDPhucIT

Theo dõi

2. 3K 136 20

Đã đăng vào ngày 5 tháng 19 năm 2020 12. 42 CH 5 phút đọc

6. 3k

5

4

NodeJS Bài 12. Tệp tĩnh (Tập tin tĩnh) trong NodeJS

• Report
• Add to series of me

Bài đăng này đã không được cập nhật trong 2 năm

Series NodeJS căn bản cho người mới bắt đầu

Ở bài trước, chúng ta đã hoàn thiện phần nhúng Bootstrap vào dự án kết hợp với Bố cục mẫu. Trên thực tế, dự án của chúng tôi hoàn toàn có thể có thêm các tệp tĩnh (tệp tĩnh). Các tệp tĩnh này có thể là tệp ảnh, tệp CSS, JS,. Nó sẽ được sử dụng trên các trang HTML của chúng tôi, hoặc lưu các tài liệu ở định dạng word, excel, pdf,. to allow user download

Ở bài học hôm nay, chúng ta sẽ tìm hiểu về cách lưu tập tin tĩnh và sử dụng nó

Đầu tiên, mình sẽ tạo 1 thư mục có tên là "assets" trong thư mục "nodeapp". Bên trong thư mục này, mình tạo thư mục "hình ảnh" tiếp theo để lưu các ảnh của dự án. Trong thư mục "hình ảnh", mình sẽ tạo thêm 1 thư mục "người dùng" để quản lý các liên quan ảnh đến "người dùng"

|--nodeapp
|----assets
|------images
|--------users

Bài toán đặt ra hôm nay, là mỗi người dùng sẽ có thêm 1 thuộc tính có tên là "hình đại diện" để lưu ảnh đại diện. Mình sẽ sửa lại mảng thông tin user tại file "controllers/user. js" as after

var users = [
	{id: 1, name: "User111", email: "[email protected]", age: 31, avatar: 'assets/images/users/user1.png'}, 
	{id: 2, name: "User2", email: "[email protected]", age: 20, avatar: 'assets/images/users/user2.png'},
	{id: 3, name: "User1", email: "[email protected]", age: 25, avatar: 'assets/images/users/user3.png'}
];

Ở trên, mình đã thêm 1 thuộc tính avatar lưu đường dẫn ảnh cho mỗi người dùng. Các bạn hãy lấy 3 bức ảnh bất kỳ và lưu vào thư mục "nội dung/hình ảnh/người dùng" và đặt tên như mảng trên nhé

Tiếp theo, mình sẽ điều chỉnh lại code HTML trong phẩn table hiển thị danh sách user ở file "users/index.pug" một chút bằng cách thêm 1 thẻ để có thể hiển thị avatar cho từng user nhé

if users.length > 0
  table.table.table-bordered
    thead
      tr.bg-info.text-white
        th Avatar
        th  Name
        th  Email
        th  Age 
        th  Action 
    tbody
      each user in users
        tr
          td.text-center
            img(src=user.avatar, width="50px", height="50px")
          td=  user.name 
          td=  user.email
          td=  user.age 
          td
            a.btn.btn-info(href="/users/" + user.id) View
else
  p No user to display

Lúc này, khi các bạn tải lại trang index. pub, các bạn sẽ thấy các ảnh không được hiển thị dù đường dẫn đã đúng. Lý do, là Express không hiểu được rằng đường dẫn mà bạn cung cấp 1 tập tin tĩnh, Do đó, nó sẽ hiểu rằng đó là 1 route bình thường, trong khi bạn không hề định nghĩa route cho nó. Do vậy, kết quả không được trả lại

Với Express JS, ta cần phải khai báo thư mục chứa các tập tin tĩnh của chúng ta, để nó có thể gửi đúng dữ liệu mà ta muốn. Để khai báo 1 thư mục chứa tệp tĩnh, Express cung cấp cú pháp sau

const app = express();
app.use(express.static('folder_name'))

Trong đó, biến 'tên_thư mục' ở đây chính là tên thư mục chứa file tĩnh

Ở đây, mình lưu các tệp tĩnh trong thư mục "nội dung", làm như vậy, mình sẽ điều chỉnh tệp "ứng dụng. js" as after

const express = require('express'); // Require module express vào project
const app = express(); // Tạo một app mới
const port = 8080; // Định nghĩa cổng để chạy ứng dụng NodeJS của bạn trên server

// Require user route
const userRoute = require('./routes/user')

app.set('views', './views'); // Thư mục views nằm cùng cấp với file app.js
app.set('view engine', 'pug'); // Sử dụng pug làm view engine

app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

// Khai báo static file
app.use(express.static('assets'))

// Dùng userRoute cho tất cả các route bắt đầu bằng '/users'
app.use('/users', userRoute);

app.get('/', function(req, res){
	res.send("
This is my first app
");
})


app.listen(port, function(){
    console.log('Your app running on port '+ port);
})

Các bạn có thể thấy, mình đã thêm dòng lệnh "ứng dụng. sử dụng (thể hiện. static('assets'))" để chỉ định thư mục lưu tệp tin tĩnh

Các bạn cần lưu ý rằng, Express sẽ tìm kiếm các tập tin tĩnh bên trong thư mục được khai báo, do đó, trong URL của tập tin, bạn không cần phải đính kèm tên của thư mục được thông báo. Như vậy, mình sẽ bỏ phần "assets/" trong URL của các avatar ở mảng người dùng

var users = [
	{id: 1, name: "User111", email: "[email protected]", age: 31, avatar: 'images/users/user1.png'}, 
	{id: 2, name: "User2", email: "[email protected]", age: 20, avatar: 'images/users/user2.png'},
	{id: 3, name: "User1", email: "[email protected]", age: 25, avatar: 'images/users/user3.png'}
];

Oke, bây giờ, hãy tải lại trang "index. pug" xem sao nhé

Vậy là chúng ta đã thành công trong việc sử dụng các tệp tĩnh trong dự án của mình rồi

Nếu bạn muốn sử dụng nhiều thư mục để lưu các tệp tĩnh, bạn hoàn toàn có thể định nghĩa thêm cho chúng bằng cú pháp đã nêu ở trên. Ví dụ

var users = [
	{id: 1, name: "User111", email: "[email protected]", age: 31, avatar: 'assets/images/users/user1.png'}, 
	{id: 2, name: "User2", email: "[email protected]", age: 20, avatar: 'assets/images/users/user2.png'},
	{id: 3, name: "User1", email: "[email protected]", age: 25, avatar: 'assets/images/users/user3.png'}
];

2

Các bạn cũng lưu ý rằng, khi các bạn định nghĩa nhiều thư mục chứa tệp tĩnh, thì Express sẽ ưu tiên cao hơn các thư mục được khai báo trước đó. Tức là tập tin nào được tìm thấy trước đó thì sẽ được ưu tiên hiển thị nếu các tập tin có cùng đường dẫn (do đường dẫn không chứa thư mục khai báo nên chuyện các đường dẫn trùng nhau giữa các thư mục là hoàn toàn có

Cuối bài học này sẽ là một bài tập nhỏ cho các bạn. Hãy tạo thêm các tệp CSS, JS tĩnh tùy ý trong dự án của bạn. Viết 1 vài dòng code vào file đó. Sau đó, nhúng các tệp này vào các trang HTML sao cho nó hoạt động như những gì bạn viết trong các tệp CSS, JS. Làm xong bài này, hãy thư giãn và chờ bài học tiếp theo nhé. Hẹn gặp lại các bạn