Tôi muốn nói với bạn rằng nền tảng của tôi Các khóa học mẫu về web vừa mới ra mắt. Thưởng thức các khóa học video dễ theo dõi về phát triển web trong Go. Đảm bảo kiểm tra ưu đãi đặc biệt mà tôi dành cho những người ủng hộ sớm.
Hẹn gặp lại chúng ta ở đó. . ]
Ở đây, tôi trình bày một ví dụ khác mà tôi đã thực hiện để theo dõi bài viết trước của mình về “Cách sử dụng các mẫu trong Golang”. Tôi sẽ sử dụng một số kỹ thuật cơ bản khi sử dụng các mẫu Golang [Ngôn ngữ Go] từ bài viết đó. Ngoài dự án này, tôi cũng quyết định sử dụng các mẫu lồng nhau và viết các hàm đơn giản của riêng mình để sử dụng bên trong các mẫu
Vì đây là một bài tập sử dụng các mẫu Golang chứ không phải trong thiết kế web, tôi quyết định tìm kiếm một thiết kế trang hiện có. Do đó, tất cả hình ảnh, CSS và JS đều được giữ nguyên văn từ Mr. Video hướng dẫn của Web Designer [mã được sử dụng miễn phí]. Mặt khác, HTML từ hướng dẫn rõ ràng đã được điều chỉnh để sử dụng trong các mẫu
Tại đây, bạn có thể xem trang web mà chúng tôi sẽ tạo, dựa trên dữ liệu sản phẩm đã cho
Trang web phản hồi nhanh, do đó, nó thích ứng với các độ rộng màn hình khác nhau và khi bạn nhấp vào một trong các 'sản phẩm', bạn sẽ thấy một cửa sổ bật lên có mô tả và một số nút
Trong ví dụ ban đầu từ Mr. Nhà thiết kế web, các sản phẩm và mô tả của chúng được mã hóa cứng trong tệp HTML. Sử dụng các mẫu và hiển thị chúng với dữ liệu [khác nhau] có thể tránh mã hóa cứng các sản phẩm và mô tả của chúng
Trong phần tiếp theo, trước tiên tôi sẽ chỉ cho bạn chương trình thực tế sẽ phân tích cú pháp và hiển thị các mẫu, sau đó xuất tệp HTML đã tạo. Sau đó, tôi sẽ cho bạn thấy các mẫu khác nhau trông như thế nào và thảo luận về một số kỹ thuật tôi đã sử dụng trong các mẫu đó.
Chương trình Golang thực tế
Đây là chương trình Golang sẽ thực hiện tất cả công việc
Trong dòng 3–8, chúng tôi nhập các gói cần thiết. Các gói bufio
, bytes
và os
cần thiết để xuất tệp HTML. Gói html/template
được sử dụng để xử lý các mẫu
Trong các dòng 10–17, chúng tôi xác định product
là struct
để lưu trữ dữ liệu sản phẩm. Đảm bảo rằng tất cả các thuộc tính được viết bằng chữ in hoa, i. e. , rằng chúng có thể xuất khẩu được. Điều này là cần thiết khi sử dụng một cấu trúc bên trong các mẫu Golang
Ngoài ra, lưu ý rằng số sao là số dấu phẩy động trong khoảng từ 0 đến 5. Lý do chúng tôi sử dụng loại float64
cho số này là vì các mẫu sử dụng float64
cho tất cả các số dấu phẩy động
Ở dòng 19–25, tôi đã tạo hai hàm vì tôi không hài lòng với những hàm do gói sprig
cung cấp. Hàm đầu tiên có tên là subtr[]
là một hàm trừ đơn giản cho các số có dấu phẩy động và hàm thứ hai có tên là bytes
0 được sử dụng để tạo danh sách các số có dấu phẩy động
Trong các dòng 29–36, chúng tôi xác định dữ liệu sẽ được hiển thị trong các mẫu. Trong ví dụ này, dữ liệu được mã hóa cứng. Trong một cài đặt thực tế hơn, dữ liệu này có thể sẽ được lưu trữ trong một loại cơ sở dữ liệu nào đó. Lưu ý rằng dữ liệu tuân theo định nghĩa của cấu trúc product
Trong dòng 38, chúng tôi thêm tên tệp của tất cả các mẫu vào một lát
Trong các dòng 40–43, tên thư mục bytes
2 được thêm vào tất cả các tên tệp
Trong dòng 45, chúng tôi phân tích cú pháp các mẫu bằng bytes
3, đảm bảo thêm hai hàm bytes
4 và bytes
5 bằng cách sử dụng bytes
6 và kiểm tra tính chính xác của các mẫu bằng bytes
7
Trong các dòng 47–48, chúng tôi kết xuất các mẫu thành bộ đệm byte. Để đảm bảo rằng trình kết xuất bắt đầu với mẫu bytes
8, chúng tôi sử dụng bytes
9 với os
0 làm đối số. Ở đây, chúng tôi cũng cung cấp dữ liệu mà chúng tôi đã xác định cho trình kết xuất
Trong các dòng 50–54, bộ đệm byte được hiển thị được xuất ra tệp HTML có tên là os
1 trong thư mục os
2
Ở đây tôi thảo luận về tất cả các mẫu được sử dụng cho dự án này
Mẫu “trang”
Đây là mẫu xác định một trang web hoàn chỉnh. Nó gọi ba mẫu khác;
Ở dòng 1, điều cần thiết là xác định bytes
8 bên trong mẫu này, nếu không thì bytes
9 sẽ không tìm thấy nó
Trong dòng 3, lưu ý rằng một dấu chấm được thêm vào khi mẫu os
4 được gọi. Điều này báo hiệu cho trình kết xuất mẫu rằng dữ liệu được cung cấp sẽ được gửi cùng với mẫu os
4. Điều này giống như việc cung cấp các tham số cho một chức năng. Cho rằng các mẫu os
3 và os
5 không cần dữ liệu;
Mẫu “tiêu đề”
Mẫu này được sử dụng để hiển thị tiêu đề HTML điển hình tải phông chữ, kiểu và mã JavaScript
Lưu ý rằng chúng tôi sử dụng các từ khóa html/template
2 và html/template
3 để xác định mẫu là mẫu os
3
Ngoài ra, hãy lưu ý dấu '-' trước dấu ngoặc kép kết thúc. Dấu hiệu này báo cho trình kết xuất xóa khoảng trắng và dòng mới. Theo kinh nghiệm của tôi, bạn sẽ cần thử nghiệm với vị trí của các dấu '-' này
Để đạt được đầu ra mong muốn, đôi khi bạn cần đặt dấu '-' sau dấu ngoặc kép bắt đầu, đôi khi trước dấu ngoặc kép kết thúc và đôi khi ở cả hai vị trí
Mẫu “nội dung”
Đây là mẫu hiển thị phần thân của tệp HTML
Lý do để xác định nội dung riêng biệt với đầu trang và chân trang là chúng ta có thể nhanh chóng tạo các trang khác có nội dung khác nhưng có cùng đầu trang và chân trang—i. e. , tải cùng CSS, JS, phông chữ, v.v.
Như đã đề cập trước đây, tôi đã tạo các phiên bản hàm Sprig ________ 15 và ________ 36 của riêng mình, vì tôi không hài lòng với những phiên bản trong gói đó. Điều này là do tôi có một số lỗi mà tôi không thể loại bỏ. Tôi cũng quyết định gọi hàm trừ của mình là bytes
4 thay vì html/template
6
Trong các dòng 5–12, chúng tôi lặp lại tất cả các sản phẩm trong dữ liệu của mình. Đối với mỗi sản phẩm, chúng tôi tạo các biến mẫu nội bộ html/template
9 và product
0. Chúng tôi sử dụng html/template
9 cho thuộc tính product
2. Từ product
0, chúng tôi trích xuất các thuộc tính product
4, product
5 và product
6 để sử dụng trong HTML
Ở các dòng 16–42, chúng ta làm tương tự như trên, nhưng chúng ta cũng trích xuất các thuộc tính product
7 và product
8 từ product
0
Ngoài ra, ở dòng 22, chúng ta tạo một danh sách có tên là struct
0. Danh sách này chứa các số dấu phẩy động từ 1. 0 đến 5. 0. Chúng tôi sẽ cần những thứ này để hiển thị các ngôi sao. Những con số này đại diện cho giá trị ngưỡng để hiển thị từng ngôi sao
Sau đó, ở các dòng 23–32, chúng tôi tạo một vòng lặp để hiển thị các ngôi sao. Về cơ bản, chúng tôi có ba loại sao mà chúng tôi có thể hiển thị. sao đầy đủ, nửa sao và sao trống
Sử dụng câu điều kiện, chúng ta xác định xem số sao của một mục [struct
1] có nhỏ hơn số sao trong danh sách struct
0 trừ đi 0 hay không. 5 hoặc nhỏ hơn số sao hoặc cao hơn. Trong trường hợp đầu tiên, chúng tôi hiển thị một ngôi sao trống. Trong trường hợp thứ hai, chúng tôi hiển thị một nửa sao. Cuối cùng, trong trường hợp cuối cùng, chúng tôi hiển thị một ngôi sao đầy đủ
Mẫu “chân trang”
Không có gì đặc biệt xảy ra ở đây ngoại trừ việc xác định mẫu là os
5
Chạy trình tạo HTML và xem kết quả
Đảm bảo rằng tệp struct
4 nằm trong một thư mục cũng chứa hai thư mục con có tên là struct
5 và struct
6. Tất cả các mẫu trên cần phải có trong thư mục struct
5. CSS, JS và hình ảnh từ mã gốc cần nằm trong thư mục con tương ứng của chúng trong thư mục struct
6
Chỉ cần gõ struct
9 từ đúng thư mục trong thiết bị đầu cuối của bạn để chạy trình tạo. Sau đó, tệp HTML sẽ được tạo và ghi vào thư mục struct
6 dưới dạng os
1
Bây giờ bạn có thể mở tệp os
1 trong trình duyệt của mình và bạn sẽ nhận được kết quả hiển thị ở đầu bài viết này