Hướng dẫn node js change html content - nút js thay đổi nội dung html

Question

Bạn không thể sửa đổi từ phía nút theo cách mà tôi nghĩ rằng bạn đang cố gắng làm. Bạn có thể gửi lại phản hồi cho phía máy khách và trên phản hồi đó, bạn có thể kích hoạt một hàm (mà bạn có thể viết trong jQuery) sẽ thay đổi DOM và lưu những gì cần thay đổi trong bộ nhớ cục bộ ... Đây là một thí dụ ...

Nội dung chính Show

Tìm nạp dữ liệu từ biểu mẫu đến App.js: Để nhận các giá trị đầu vào của biểu mẫu, chúng tôi phải sử dụng gói nút có tên Body-Parser.
Làm cách nào để cập nhật tệp HTML nút JS?
Tôi có thể sử dụng HTML với Node JS không?
Làm cách nào để hiển thị tệp HTML nút JS?
Làm thế nào gửi dữ liệu từ nút JS đến HTML?

//server.js
router.post('/change',function(req,res){

    // the message being sent back will be saved in a localSession variable
    // send back a couple list items to be added to the DOM
    res.send({success: true, message: 'New list item number 1
New list item number 2'});
});

Đây là mặt trước ...

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

Trong bài viết này, bạn sẽ tìm hiểu về việc làm cho ứng dụng nút của mình phản hồi để nó sẽ tự động thay đổi nội dung HTML và cập nhật nó với nội dung mới được chèn vào bộ sưu tập. & NBSP;

Chúng tôi sẽ thiết lập một EJ phần mềm trung gian, EJ giúp dễ dàng gửi dữ liệu từ tệp máy chủ của bạn (App.js hoặc Server.js) đến một trang tĩnh (HTML). Sau đó, chúng tôi sẽ sử dụng trình phân tích cú pháp cơ thể mà theo đó chúng tôi có thể nắm bắt các giá trị đầu vào của người dùng từ biểu mẫu và lưu trữ chúng trong một bộ sưu tập, sau đó chúng tôi sẽ gửi dữ liệu của bộ sưu tập đến trang tĩnh. Theo cách này, khi bất kỳ dữ liệu nào được chèn vào biểu mẫu thì nó sẽ chèn vào bộ sưu tập và tự động cập nhật nội dung HTML. & nbsp;

Cài đặt EJS: Xác định vị trí thư mục dự án gốc của bạn vào thiết bị đầu cuối và nhập lệnh Locate your root project directory into the terminal and type the command

npm install ejs

Đặt EJS làm công cụ xem:

app.set('view engine', 'ejs');

Sắp xếp lại các thư mục của bạn: Cần phải đổi tên tệp của bạn từ .html thành .ejs để sử dụng EJ bên trong nó. Sau đó, bạn phải di chuyển mỗi tệp .ejs trong thư mục chế độ xem bên trong thư mục gốc của bạn.It is required to rename your file from .html to .ejs for using EJS inside it. Then you have to move every single .ejs file in the views directory inside your root directory.

Sử dụng biến EJS: Bên trong tệp .ejs được cập nhật của bạn, bạn phải sử dụng các biến EJS để nhận giá trị từ tệp máy chủ của bạn.Inside your updated .ejs file, you have to use EJS Variables to receive values from your server file.

HTML

<html

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

<

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

2

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4<

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

70

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

71

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

70____10

npm install ejs

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

2

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

<

npm install ejs

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

npm install ejs

7

npm install ejs

0

npm install ejs

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

npm install ejs

0html

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4<
//index.html //body Hello World List item 1 //li items with class change will be changed on button click List item 2
83
//index.html //body Hello World List item 1 //li items with class change will be changed on button click List item 2
84
//index.html //body Hello World List item 1 //li items with class change will be changed on button click List item 2
85
npm install body-parser
4
//index.html //body Hello World List item 1 //li items with class change will be changed on button click List item 2
87
//index.html //body Hello World List item 1 //li items with class change will be changed on button click List item 2
85
//index.html //body Hello World List item 1 //li items with class change will be changed on button click List item 2
89__Inside your server file ( app.js or index.js ), you can send an EJS file along with some data by using the render method.

JavaScript

app.set('view engine', 'ejs');

4

app.set('view engine', 'ejs');

5

app.set('view engine', 'ejs');

6

app.set('view engine', 'ejs');

7

app.set('view engine', 'ejs');

8

app.set('view engine', 'ejs');

9

npm install body-parser

0

npm install body-parser

1

app.set('view engine', 'ejs');

6

npm install body-parser

3

npm install body-parser

4

npm install body-parser

5

npm install body-parser

6

npm install body-parser

7

npm install body-parser

8

npm install body-parser

9

var bodyParser = require('body-parser')

0

var bodyParser = require('body-parser')

1

var bodyParser = require('body-parser')

1

var bodyParser = require('body-parser')

3

npm install body-parser

6

var bodyParser = require('body-parser')

5

var bodyParser = require('body-parser')

6

app.set('view engine', 'ejs');

6

var bodyParser = require('body-parser')

1

Tìm nạp dữ liệu từ biểu mẫu đến App.js: Để nhận các giá trị đầu vào của biểu mẫu, chúng tôi phải sử dụng gói nút có tên Body-Parser.To receive input values of a form, we have to use a node package named body-parser.

Cài đặt Body-Parser:

npm install body-parser

Yêu cầu mô-đun phân tích cơ thể:

var bodyParser = require('body-parser')

Và sau đó

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

Sau đó, chúng ta có thể xử lý dữ liệu biểu mẫu bằng đối tượng yêu cầu.

Ví dụ: Giả sử có một bộ sưu tập dữ liệu tên, dữ liệu bên trong, có các yếu tố chứa tiêu đề và nội dung. Vì vậy, chúng tôi phải gửi các yếu tố đó đến tệp nhà để nó hiển thị nó. Chúng tôi cũng đồng thời thực hiện một tuyến đường bài xử lý yêu cầu bài từ trang chủ, lưu trữ đầu vào biểu mẫu và chèn nó vào bộ sưu tập.Suppose there is a collection of name data, inside data, there are elements containing title and content. So we have to send those elements to the Home file so that it displays it. We also concurrently make a post route that handles the post request from the home page, stores the form input, and inserts it into the collection.

Tệp App.js

JavaScript

app.set('view engine', 'ejs');

4

app.set('view engine', 'ejs');

5

app.set('view engine', 'ejs');

6

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

2

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

3

app.set('view engine', 'ejs');

6

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

5

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

7

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

8

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

9

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

412

3

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

77

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

9

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

41<1

3

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

7<6

app.use( bodyParser.json() );      
    app.use(bodyParser.urlencoded({    
        extended: true
    })
)

9

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

41html0

html1

html2

app.set('view engine', 'ejs');

7

app.set('view engine', 'ejs');

8

app.set('view engine', 'ejs');

9

npm install body-parser

0

npm install body-parser

1

app.set('view engine', 'ejs');

6

html9

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

00

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

02

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

03

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

04

npm install body-parser

3

npm install body-parser

4

npm install body-parser

5

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

npm install body-parser

7

npm install body-parser

8

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

11

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

12

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

13

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

var bodyParser = require('body-parser')

1

var bodyParser = require('body-parser')

1

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

17

npm install body-parser

4

npm install body-parser

5

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

21

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

23

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

25

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

12

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

27

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

12

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

29

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

var bodyParser = require('body-parser')

1

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

npm install body-parser

7

npm install body-parser

8

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

11

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

12

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

13

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

var bodyParser = require('body-parser')

1

var bodyParser = require('body-parser')

1

var bodyParser = require('body-parser')

3

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

var bodyParser = require('body-parser')

5

var bodyParser = require('body-parser')

6

app.set('view engine', 'ejs');

6

var bodyParser = require('body-parser')

1

npm install body-parser

6
npm install body-parser
7
npm install body-parser
8
npm install body-parser
9
var bodyParser = require('body-parser')
0
var bodyParser = require('body-parser')
1We have to use For Each Loop to loop through every single object inside our collection and display the title and content. We also have to set up a form for submitting new titles and content.

Tìm nạp dữ liệu từ biểu mẫu đến App.js: Để nhận các giá trị đầu vào của biểu mẫu, chúng tôi phải sử dụng gói nút có tên Body-Parser.

<html

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

<

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

2

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4<

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

6

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

7

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

6

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

npm install ejs

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

2

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

<

npm install ejs

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

67

Cài đặt Body-Parser:

<

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

75

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

76

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

75

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

80

Yêu cầu mô-đun phân tích cơ thể:

Và sau đó

Sau đó, chúng ta có thể xử lý dữ liệu biểu mẫu bằng đối tượng yêu cầu.

Ví dụ: Giả sử có một bộ sưu tập dữ liệu tên, dữ liệu bên trong, có các yếu tố chứa tiêu đề và nội dung. Vì vậy, chúng tôi phải gửi các yếu tố đó đến tệp nhà để nó hiển thị nó. Chúng tôi cũng đồng thời thực hiện một tuyến đường bài xử lý yêu cầu bài từ trang chủ, lưu trữ đầu vào biểu mẫu và chèn nó vào bộ sưu tập.

Tệp App.js

npm install ejs

0

npm install ejs

4

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

npm install ejs

0html

//index.html
//body
Hello World
    
        List item 1
         //li items with class change will be changed on button click
        List item 2

0

Output:

Hướng dẫn node js change html content - nút js thay đổi nội dung html

Làm cách nào để cập nhật tệp HTML nút JS?

Chỉ cần cài đặt Express và bạn tốt để đi ...

Bước 1: Cài đặt Express. 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. ....

Bước 2: Sử dụng hàm sendFile (). ....

Bước 3: Kết xuất HTML trong Express. ....

Bước 4: Kết xuất HTML động bằng công cụ tạo khuôn ..

Tôi có thể sử dụng HTML với Node JS không?

Trong nút. Các ứng dụng JS và Express, Res.SendFile () có thể được sử dụng để cung cấp các tệp. Việc cung cấp các tệp HTML bằng cách sử dụng Express có thể hữu ích khi bạn cần một giải pháp để phục vụ các trang tĩnh.res. sendFile() can be used to deliver files. Delivering HTML files using Express can be useful when you need a solution for serving static pages.

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

Phương thức Res.SendFile () của mô -đun Express.js được sử dụng để hiển thị một tệp HTML cụ thể có trong máy cục bộ. sendFile() method of the express. js module is used to render a particular HTML file that is present in the local machine.

Làm thế nào gửi dữ liệu từ nút JS đến HTML?

Cách tiếp cận sau đây bao gồm cách truyền/truy cập nút.JS biến thành một tệp/mẫu HTML.Chúng tôi sẽ xây dựng một nút cơ bản ...

Nhập khẩu độ và khởi tạo thể hiện của nó ..

Tạo một tuyến đường sẽ phục vụ mẫu HTML và cũng truyền dữ liệu vào đó (tên và tuổi của người dùng) ..

Khởi động máy chủ ..

programming html Express render HTML