Xin chào, Hôm nay chúng ta sẽ xem cách chúng ta có thể dễ dàng tạo một trang web viết blog chỉ bằng HTML, CSS và JS. Không có thư viện nào khác. Chúng tôi cũng sẽ sử dụng kho lưu trữ Firebase để lưu trữ/truy xuất dữ liệu blog
Đây là một dự án rất tốt để thực hành phát triển full-stack. Khi tôi bắt đầu phát triển web, tôi luôn nghĩ làm cách nào để tạo trang web viết blog của riêng mình. Và hôm nay, tôi tự hào rằng tôi đã cố gắng tạo ra trang blog. Trang web của chúng tôi rất đơn giản và có các tính năng như
- Các trang Blog động
- Có một trình soạn thảo dành riêng cho blog
- Bạn có thể thêm/tạo bao nhiêu blog tùy thích
- Bạn có thể thêm Tiêu đề, đoạn văn và Hình ảnh vào bài đăng trên blog
- Đã đọc thêm phần blog cũng
Để xem bản demo hoặc bạn muốn có video hướng dẫn mã hóa đầy đủ. Bạn có thể xem hướng dẫn bên dưới
Video hướng dẫnTôi đánh giá cao nếu bạn có thể ủng hộ tôi bằng cách đăng ký kênh youtube của tôi
Vì vậy, không lãng phí thêm thời gian, hãy xem cách viết mã này
Mã sốVì đây là một nút. ứng dụng web js. Chúng tôi cần NPM và Node. js để bắt đầu, vì vậy hãy đảm bảo rằng bạn đã cài đặt chúng trong hệ thống của mình
Vì vậy, hãy bắt đầu với cấu trúc thư mục của nó
Cấu trúc thư mục
Đây là cấu trúc thư mục của chúng tôi
Vì vậy, hãy làm cho máy chủ của chúng tôi
Người phục vụ
Mở tệp dự án [thư mục gốc] trong trình chỉnh sửa mã của bạn. Mở Terminal và chạy
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
5Điều này sẽ khởi tạo NPM cho dự án của chúng tôi. Sau đó cài đặt một số gói bằng cách này
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
6-
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
7 - là tạo máy chủ-
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
8 - là xử lý tải lên-
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
9 - là chạy máy chủ liên tụcmột khi gói được cài đặt. Bạn sẽ thấy một tệp
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
0 bên trong thư mục gốc của mình. Mở nó raVà thay đổi nó
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
1 thành"scripts": {
"start":"nodemon server.js"
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ chúng tôi đã sẵn sàng để tạo một máy chủ. Tạo một tệp mới bên trong thư mục gốc của bạn, đặt tên là
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
2. Và mở nóĐầu tiên nhập tất cả các gói mà chúng tôi cần
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và sau đó lưu trữ đường dẫn thư mục
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
3 của bạn bên trong một biếnconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó tạo máy chủ
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
4. Và đặt đường dẫn thư mục app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
3 thành đường dẫn tĩnh. Cũng sử dụng app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
6 để cho phép tải lên tệpconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó, tạo một tuyến đường về nhà và gửi phản hồi tệp
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
7. Và chạy máy chủ của bạn trên cổng 3000app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chạy máy chủ của bạn trước
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
8. Và máy chủ của chúng tôi đã hoàn thành. Hãy tạo trang chủ ngay bây giờTrang chủ
Viết cấu trúc HTML cơ bản và liên kết tệp
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
9. Sau đó bắt đầu bằng cách tạo một thanh điều hướngTrang Chủ. htmlconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raBây giờ tạo tiêu đề
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raBây giờ là yếu tố cuối cùng cho trang chủ của chúng tôi. Tạo phần thẻ blog và tạo một thẻ, khi chúng ta tạo những thẻ này bằng JS sau
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raBây giờ, bạn có thể nhận xét phần tử
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
00. Trang chủ của chúng tôi đã hoàn thành. Vào bên trong máy chủ và tạo tuyến đường const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
01Người phục vụ. jsconst express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau này, hãy tạo trình chỉnh sửa của chúng tôi
biên tập viên
Trong liên kết
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
02 cả tệp app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
9 và tệp const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
04. Và bên trong thẻ body bắt đầu bằng cách tạo biểu ngữ divconst express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raVà sau đó tạo các trường văn bản cho tiêu đề blog, bài viết
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raVà cuối cùng, hãy tạo nút xuất bản bằng nút tải lên hình ảnh
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raChúng tôi đã hoàn thành việc tạo kiểu cho trình chỉnh sửa của mình. Bây giờ hãy làm cho nó hoạt động. Liên kết
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
05 với tệp HTML. Và mở nóBắt đầu bằng cách chọn tất cả các yếu tố mà chúng ta cần
const express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau khi chọn tất cả các yếu tố. Thêm sự kiện
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
06 vào đầu vào tải lên của chúng tôi và xử lý tải lênconst express = require['express'];
const path = require['path'];
const fileupload = require['express-fileupload'];
9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ hãy tạo hàm
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
07const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
10Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Vì vậy, đây là cách chúng tôi có thể làm cho quá trình tải lên của mình hoạt động. Nhưng bây giờ nó sẽ không hoạt động vì chúng tôi chưa thực hiện lộ trình
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
08 của mình. Đối với app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
2 mở đó và tạo tuyến đường const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
08Người phục vụ. jsconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
11Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bằng cách này, chúng tôi đã hoàn thành. Bạn có thể kiểm tra tải lên của mình có hoạt động hay không. Như bạn có thể nhận thấy rằng chúng tôi đang gọi
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
11 nhưng chúng tôi vẫn chưa thực hiện điều đó. Vì vậy, hãy làm cho nóbiên tập viên. jsconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
12Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chức năng này sẽ cho phép bạn chèn định dạng văn bản cho hình ảnh của mình, ví dụ: nếu tôi tải lên
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
12 thì chức năng này sẽ chèn nội dung như thế này vào trường bài viết của chúng tôiVì vậy, cho đến bây giờ chúng tôi cũng đã hoàn thành việc tải lên của mình. Bây giờ, hãy truy cập firebase của bạn và tạo một dự án viết blog. Và thiết lập firebase cho bạn. Bạn có thể tham khảo video này để thiết lập
Sau khi thiết lập các biến firebase trong liên kết
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
14 với tệp bên trong const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
02 ở trên const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
05 như thế nàyconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
13Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó lại đi vào bên trong
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
05. Và làm cho nút xuất bản hoạt độngconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
14Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đây là cách chúng tôi tạo một tài liệu bên trong firebase firestore. Sau đó, trình chỉnh sửa của chúng tôi hoàn toàn hoạt động. Nếu bạn kiểm tra nó, bạn sẽ thấy bạn đang được chuyển hướng đến blog route. Nhưng chúng tôi đã không thực hiện tuyến đường đó. Đối với lần mở
app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
2 đó. Và thực hiện tuyến đường const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
19 và cả tuyến đường const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
20người phục vụ. jsconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
15Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ, bạn sẽ thấy tệp
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
21. Vì vậy, lần cuối cùng trước tiên chúng ta hãy tạo trang blog. lần này liên kết cả 3 tệp CSS với const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
21 và sao chép thanh điều hướng từ app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
7 sang trang nàyconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
16Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
17Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raTrang này có tất cả các cấu trúc phần tử. Chúng tôi sẽ cung cấp nội dung của nó một cách linh hoạt với JS
Liên kết các tập lệnh firebase,
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
14 và const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
25 với nó. Và mở const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
25Bắt đầu bằng cách trích xuất id blog từ URL. và lấy dữ liệu từ firestore
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
18Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Khi chúng tôi có dữ liệu blog. Làm cho
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
27const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
19Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong chức năng trên, chúng tôi đã chọn tất cả các phần tử chúng tôi cần và đặt nội dung của chúng.
Và cuối cùng. Chúng tôi đang gọi hàm
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
28 vì chúng tôi cần định dạng bài viết của mình. Tạo hàm ________ 228 và định dạng văn bản bài báo mà chúng tôi nhận được từ cửa hàng cứu hỏa
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó, hãy so sánh những gì chúng tôi nhập trong trình chỉnh sửa của mình và những gì chúng tôi sẽ thấy trong blog của mình
biên tập viênVậy là blog của chúng ta cũng xong. Bây giờ chúng tôi muốn có đề xuất hoặc đọc thêm yếu tố trong trang blog của chúng tôi
Vì vậy, hãy mở
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
21 và tạo một cáiconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó, sao chép phần tử
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
31 từ app.get['/', [req, res] => {
res.sendFile[path.join[initial_path, "home.html"]];
}]
app.listen["3000", [] => {
console.log['listening......'];
}]
7 sang const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
21const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và như bạn có thể thấy, chúng tôi đang sử dụng các yếu tố giống nhau để đọc thêm và viết blog. Vì vậy, chúng tôi sẽ sử dụng cùng một chức năng JavaScript để tạo cả hai yếu tố này. Vì vậy, đối với tệp liên kết
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
34 đến const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
21 ở trên const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
25Và điều cuối cùng là mở
const app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
34 và viết mã nàyconst app = express[];
app.use[express.static[initial_path]];
app.use[fileupload[]];
4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đó là cách chúng tôi làm thẻ blog của chúng tôi. Chúng ta xong rồi
Đầu ra - Trang chủ. htmlÀ chính nó đấy. Tôi hy vọng bạn hiểu mỗi và tất cả mọi thứ. Nếu bạn có nghi ngờ hoặc tôi đã bỏ lỡ điều gì đó, hãy cho tôi biết trong phần bình luận