Tôi mới đến Node.js và đây là dự án đầu tiên của tôi với nó. Tôi đã tạo một tệp Node.js có tên Test.js. Nó có một mảng nói a.
Bây giờ tôi muốn tạo một tệp HTML gọi Test.js trên nút Nhấp vào sự kiện. Sau đó lấy dữ liệu từ tệp đó và xuất bản nó trên bảng trong tệp HTML.
Tôi đã viết tệp Node.js và tôi có thể thấy kết quả trên Console.log [A]. Nhưng tôi không thể hiểu làm thế nào để gửi mảng này đến HTML khi nó sẽ yêu cầu nó.
Trong khi đó, tôi googled và tạo ra một số mã. Yêu cầu đến máy chủ nhưng tôi luôn nhận được phản hồi lỗi từ máy chủ. Tại sao như vậy?
Phía khách hàng -
function fetch[] {
$.ajax[{
type: 'POST',
url: "//127.0.0.1:8888",
data: 'China',
datatype: 'json',
success: function [data] {
alert["hi"];
var ret = jQuery.parseJSON[data];
$['#q'].html[ret.msg];
},
error: function [xhr, status, error] {
alert["hii"];
}
}];
Phía máy chủ:
http.createServer[function[request, response] {
console.log["Request received"];
response.writeHeader[200, {"Content-Type": "application/json"}];
request.on['data', function [chunk] {
console.log[chunk.toString['utf8']];
consol.log[result];
response.write[JSON.stringify[{data : result}]];
}];
response.end[];
}].listen[8888];
Tôi có thể thấy Trung Quốc trên bảng điều khiển. Nhưng tôi không lấy lại được mảng kết quả cho khách hàng. Đây là kết quả là một mảng và tôi nhận được giá trị của nó trên bảng điều khiển. Chỉ là tôi không lấy lại cho khách hàng. Bất kỳ trợ giúp?
ExpressJS là một khung web NodeJS phổ biến. ExpressJS cho phép bạn phát triển một máy chủ web tùy chỉnh theo yêu cầu dự án của bạn. Dự án Express có thể được mở rộng bằng cách cài đặt các mô -đun nút khác nhau. Tuy nhiên, bạn không cần phải cài đặt nhiều gói để xử lý các tệp HTML và hiển thị chúng trong phản hồi. Trong hướng dẫn ngắn này, tôi sẽ giải thích cho bạn cách hiển thị các tệp HTML trong máy chủ NodeJS và ExpressJS tùy chỉnh. Bạn không cần phải cài đặt bất kỳ mô -đun bổ sung nào để hiển thị tệp HTML trong Express. Chỉ cần cài đặt Express và bạn tốt để đi. Tạo một thư mục mới và khởi tạo một dự án nút mới bằng lệnh sau. Hãy để cài đặt Express Express. NPM Cài đặt -Save Express Tuyệt quá. Hãy để tiến về phía trước và tìm hiểu về chức năng mà chúng tôi sẽ sử dụng để hiển thị tệp HTML trong Express. ExpressJS cung cấp hàm sendFile [] về cơ bản sẽ gửi các tệp HTML đến trình duyệt, sau đó tự động được trình duyệt giải thích. Tất cả những gì chúng ta cần làm là trong mọi tuyến đường để cung cấp một tệp HTML thích hợp.sendFile[] function which will basically send HTML files to browser which then automatically interpreted by browser. All we need to do is in every route to deliver an appropriate HTML file. For.eg: Khi người dùng nhấn URL Main Deling Index.html:Bước 1: Cài đặt Express
Bước 2: Sử dụng hàm sendFile []
When user hit main URL deliver index.html :
// Ứng dụng giả sử là đối tượng Express. app.get ['/', function [req, res] {& nbsp; res.sendfile ['index.html'];}];
app.get['/',function[req,res] {
res.sendFile['index.html'];
}];
Mã này là mục đích ví dụ. Nó sẽ gây ra lỗi phân giải thư mục.
Tôi sẽ phát triển một trang web đơn giản bao gồm 3 trang tức là trang chủ, về trang, trang liên kết trang web. Tôi sẽ sử dụng bootstrap để thiết kế và jQuery để xử lý sự kiện.
Cấu trúc thư mục :
----- node_modules |-+ express ---+ index.html ---+ about.html ---+ index.html --- app.js ---- pack.json
|--+express
---+ index.html
---+ about.html
---+ index.html
--- app.js
----package.json
package.json
{& nbsp; & nbsp; "Tên": "htmlrender", & nbsp; & nbsp; "Phiên bản": "1.0.0", & nbsp; & nbsp; "Mô tả": "", & nbsp; & nbsp; "Chính": "index.js", & nbsp; & nbsp; "tập lệnh": {& nbsp; & nbsp; & nbsp; & nbsp; "Kiểm tra": "" & nbsp; & nbsp; }, & nbsp; & nbsp; "Từ khóa": [], & nbsp; & nbsp; "Tác giả": "", & nbsp; & nbsp; "Giấy phép": "ISC", & NBSP; & nbsp; "phụ thuộc": {& nbsp; & nbsp; & nbsp; & nbsp; "Express": "^4.16.4" & nbsp; & nbsp; }}
"name": "htmlRender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
Đây là mã máy chủ Express của chúng tôi.
app.js
const express = yêu cầu ['express']; const app = express []; const path = abor ['path']; const router = express.router []; express =
require['express'];
const app = express[];
const path = require['path'];
const router = express.Router[];
router.get ['/', function [req, res] {& nbsp; res.sendfile [path.join [__ dirname+'/index.html']]; & nbsp; // __ dirname: nó sẽ giải quyết cho thư mục dự án của bạn.} ];get['/',function[req,res]{
res.sendFile[path.join[__dirname+'/index.html']];
//__dirname : It will resolve to your project folder.
}];
router.get ['/about', function [req, res] {& nbsp; res.sendfile [path.join [__ dirname+'/about.html']];}];get['/about',function[req,res]{
res.sendFile[path.join[__dirname+'/about.html']];
}];
router.get ['/stemap', function [req, res] {& nbsp; res.sendfile [path.join [__ dirname+'/sitemap.html']];}];get['/sitemap',function[req,res]{
res.sendFile[path.join[__dirname+'/sitemap.html']];
}];
// Thêm ứng dụng bộ định tuyến.use ['/', bộ định tuyến]; app.listen [Process.Env.Port || 3000];
app.use['/',
router];
app.listen[process.env.port || 3000];
Console.log ['Chạy tại cổng 3000'];log['Running at Port 3000'];
Đây là tệp HTML của chúng tôi. Tôi sẽ chỉ hiển thị index.html.
index.html
& nbsp; Thể hiện HTML & NBSP; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; class = "Navbar Navbar-inverse-inverse-static-top"> & nbsp; & nbsp; & nbsp; Thể hiện HTML & NBSP; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Nhà & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Về & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; SITEMAP & NBSP; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Chào thế giới! & nbsp; & nbsp; & nbsp; Đây là một đơn vị anh hùng đơn giản, một thành phần kiểu Jumbotron đơn giản để kêu gọi chú ý thêm đến nội dung hoặc thông tin đặc trưng. & nbsp; & nbsp; & nbsp; Tìm hiểu thêm & NBSP; & nbsp; & nbsp;html>
Express HTML
class="navbar navbar-inverse navbar-static-top">
Express HTML
Home
About
Sitemap
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or
information.
Learn more
Đây là đầu ra.
Bước 4: Kết xuất HTML động bằng công cụ tạo khuôn mẫu
Trong mã được hiển thị ở trên, chúng tôi hiển thị các tệp HTML tĩnh. Tuy nhiên, có những kịch bản mà chúng ta cần hiển thị các mẫu HTML động. Trước khi bạn bị nhầm lẫn giữa các mẫu tĩnh và động, hãy để tôi giải thích một cách nhanh chóng.
Trong các mẫu tĩnh, chúng tôi không thể vượt qua các biến tùy chỉnh và tùy chỉnh mẫu dựa trên nhu cầu của chúng tôi. Trong các mẫu động, chúng ta có thể truyền các biến động và hiển thị các tệp HTML với các giá trị khác nhau.
Hãy để xây dựng một dự án đơn giản để hiểu về khuôn mẫu trong Express. Tôi sẽ sử dụng công cụ tạo khuôn viên PUG rất phổ biến và được giới thiệu bởi Express. Trên thực tế, chúng tôi cũng sử dụng PUG cho trang web này, trang này được hiển thị bằng các mẫu PUG.pug templating engine which is very popular and recommended by Express as well. We use Pug for this website as well, in fact, this page is rendered using Pug templates.
Hãy để cài đặt các phụ thuộc của chúng tôi.
Đây là mã máy chủ Express của chúng tôi.
app.js
const express = yêu cầu ["express"]; const app = express []; const path = abor ["path"]; const router = express.router []; express = require["express"];
const app =
express[];
const path = require["path"];
const router = express.Router[];
app.set ["Xem động cơ", "pug"]; app.set ["lượt xem", path.join [__ dirname, "lượt xem"]];set["view engine", "pug"];
app.set["views",
path.join[__dirname, "views"]];
router.get ["/", [req, res] => {& nbsp; res.Render ["index"];}];get["/", [req, res] => {
res.render["index"];
}];
router.get ["/about", [req, res] => {& nbsp; res.render ["Giới thiệu", {title: "hey", tin nhắn: "Xin chào!"}];}];get["/about", [req, res] => {
res.render["about", { title: "Hey", message: "Hello there!" }];
}];
app.use ["/", bộ định tuyến]; app.listen [Process.Env.Port || 3000];use["/", router];
app.listen[process.env.port || 3000];
Console.log ["Chạy tại cổng 3000"];log["Running at Port 3000"];
Quan sát trong các bộ định tuyến, chúng tôi đang chuyển các giá trị động cho các mẫu pug. Dưới đây là mã của các mẫu pug cư trú trong thư mục chế độ xem.
index.pug
HTML & NBSP; đầu & nbsp; & nbsp; Tiêu đề HTML kết xuất bằng PUG & NBSP; cơ thể & nbsp; & nbsp; H2 Chào mừng
head
title Render HTML using PUG
body
h2 Welcome
about.pug
HTML & NBSP; đầu & nbsp; & nbsp; Tiêu đề = Tiêu đề & NBSP; cơ thể & nbsp; & nbsp; H2 = Tin nhắn
head
title= title
body
h2= message
Sau khi chạy mã này, điều hướng trình duyệt của bạn đến localhost: 3000/về, bạn sẽ thấy đầu ra HTML được hiển thị bằng các mẫu PUG.
Đáng kinh ngạc. Các giá trị này có thể được tìm nạp từ cơ sở dữ liệu hoặc bất kỳ nguồn nào khác và được hiển thị bằng các mẫu PUG.
Các bài viết liên quan về cơ sở dữ liệu: Hướng dẫn cơ sở dữ liệu
đọc thêm
Đọc một số hướng dẫn tốt nhất của chúng tôi.
- Cách phát hiện loại thiết bị trong Express
- Xử lý lỗi bằng cách sử dụng phần mềm trung gian
- Hướng dẫn hoàn chỉnh Express: Phần 1
- Hướng dẫn của Node JS cho người mới bắt đầu từng bước với các ví dụ
Conclusion:
Có những kịch bản mà bạn cần phát triển một máy chủ web cung cấp các tệp HTML như cách Apache của bạn làm. Tuy nhiên, đây không phải là việc sử dụng tối ưu Node.js nhưng bạn có thể sử dụng một tính năng như vậy để đạt được một máy chủ web tùy chỉnh cho ứng dụng của riêng bạn.