search

Hướng dẫn how do i include an html file in node js? - làm cách nào để đưa tệp html vào nút js?

1 năms trước
Trả lời: 0
Lượt xem: 137

Được rồi, tôi hiểu rồi ...

Show

server.js

 var express =      require('express');
 var server  =      express();
 var ejs = require('ejs'); 
 ejs.open = '{{'; 
 ejs.close = '}}';


 var oneDay = 86400000;
 server.use(express.compress());

 server.configure(function(){
   server.set("view options", {layout: false});  
   server.engine('html', require('ejs').renderFile); 
   server.use(server.router);
   server.set('view engine', 'html');
   server.set('views', __dirname + "/www");
 });


 server.all("*", function(req, res, next) {
     var request = req.params[0];

         if((request.substr(0, 1) === "/")&&(request.substr(request.length - 4) === "html")) {
         request = request.substr(1);
         res.render(request);
     } else {
         next();
     }

 });

 server.use(express.static(__dirname + '/www', { maxAge: oneDay }));

 server.listen(process.env.PORT || 8080);

và trong /www Tôi có các tệp .html sau:

index.html

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}

head.html

 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>

include_css.html

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">

header.html

 <div class="well">
      <h2>HEADER</h2>
 </div>

footer.html

         <div class="well">
             <h2>FOOTER</h2>
         </div>


         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
         <script src="js/bootstrap.min.js"></script>
         <script src="js/main.js"></script>

         <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
         <script>
             var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
             (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
             g.src='//www.google-analytics.com/ga.js';
             s.parentNode.insertBefore(g,s)}(document,'script'));
         </script>
     </body>
 </html>

Tất cả đi qua, thậm chí bao gồm trong bao gồm và nội dung tĩnh. Tất cả đều được thực hiện trên các tệp HTML và trong một bối cảnh cảm thấy giống như tác giả web vani.

++++ oops +++++ Tôi gần như tất cả. Tôi quên rằng tôi cũng muốn có thể truyền các biến vào bao gồm từ các mẫu. Tôi chưa thử điều đó ... bất kỳ ý tưởng nào?

++++Update+++++

Ok, tôi đã tìm ra nó.

Cuộc thảo luận này cho thấy rõ ràng, tôi đoán tôi chỉ không biết đủ về cách thức hoạt động của EJ.

Tôi đã thay đổi Index.html để bắt đầu với các khai báo biến:

 {{
    var pageTitle = 'Project Page';
    var projectName = 'Project Title';
 }}

Và sau đó bạn có thể gọi các biến này từ bên trong bao gồm, bất kể chúng được lồng sâu đến đâu.

Vì vậy, ví dụ, index.html bao gồm start.html bao gồm tiêu đề.html. Trong tiêu đề .html, tôi có thể gọi {{= projectName}} trong tiêu đề mặc dù nó đã được khai báo bên trong index.html.

Tôi đã đặt toàn bộ điều trên GitHub.

  1. Express cũng cho phép bạn làm việc với các công cụ mẫu như 
          <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
    5, 
          <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
    6 và 
          <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
    7, giúp thiết kế các trang HTML dễ dàng hơn.
  2. Bạn có thể sử dụng HTML trong Node JS không?
  3. Sử dụng phương thức 
          {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
    2 để hiển thị các tệp HTML trong Node.js
  4. Chúng tôi đã khám phá việc tạo một máy chủ Node.js đơn giản với một trang HTML đơn giản trong ví dụ này. Ngoài ra, chúng ta có thể sử dụng các luồng có thể đọc được trong Node.js được cung cấp bởi mô -đun luồng thay vì mô -đun 
     <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
    0 truyền thống.

Sử dụng phương thức 

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
2 để hiển thị các tệp HTML trong Node.js

Bạn có thể sử dụng HTML trong 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.

  1. Làm thế nào yêu cầu tệp HTML trong Node JS?
  2. Mô -đun hệ thống tệp Node.js cho phép bạn làm việc với hệ thống tệp trên máy tính của bạn. Để bao gồm mô -đun hệ thống tệp, hãy sử dụng phương thức yêu cầu (): var fs = yêu cầu ('fs');
  3. Tôi có thể bao gồm tệp HTML trong HTML không?

Đánh dấu đơn giản trong tiêu đề nhúng tệp HTML rất đơn giản. Tất cả những gì chúng ta cần làm là sử dụng phần tử „phổ biến. Sau đó, chúng tôi thêm giá trị nhập „Nhập vào thuộc tính„ rel. Sử dụng „href, chúng tôi đính kèm URL của tệp HTML, giống như chúng tôi đã quen khi nói đến các bảng kiểu và tập lệnh.

Bên trong kết xuất tệp HTML trong Node.js

Sử dụng phương thức 

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
1 để hiển thị các tệp HTML trong Node.js

Trong bài viết này, chúng tôi sẽ tạo một máy chủ Node.js đơn giản và khám phá các phương thức khác nhau mà chúng tôi có thể sử dụng để hiển thị trang HTML.

Node.js là thời gian chạy JavaScript nguồn mở cho phép chúng tôi sử dụng JavaScript trên máy chủ.

const http = require('http');
const port = 8080;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('<h2>Hello, User!</h2> <h3> Welcome Home</h3>\n');
});

server.listen(port, () => {
  console.log(`Server is running on port number::${port}`);
});

Nếu chúng tôi khởi động máy chủ và truy cập 

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
6, phản hồi bên dưới cho thấy tệp HTML đã được hiển thị thành công.

0 để đọc tệp này vào tệp chính 

 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
1 và kết xuất nó cho người dùng. Vì 
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
0 là một phương thức sẵn có, chúng ta cần đưa nó vào tệp chính bằng hàm 
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
3.

Mô -đun 

 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
0 cung cấp phương thức 
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
5 mà chúng ta có thể sử dụng để đọc các tệp bằng cách truyền trong đường dẫn, mã hóa và hàm gọi lại sẽ được gọi với tệp và xử lý lỗi (nếu có) dưới dạng tham số.

Chúng tôi vẫn sẽ sử dụng chức năng 

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
3 để tạo các đối tượng yêu cầu và phản hồi. Chúng tôi sẽ đính kèm tệp HTML vào đối tượng phản hồi, như được hiển thị ở đây.

let http = require('http');
let fs = require('fs');
let port = 8080;

const server = http.createServer((request, response) => {
    response.writeHead(200, {
        'Content-Type': 'text/html'
    });
    fs.readFile('./index.html', null, function (error, data) {
        if (error) {
            response.writeHead(404);
            respone.write('Whoops! File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
});

server.listen(port, () => {
    console.log(`Server is listening on port number: ${port}`);

});

Nếu chúng tôi khởi động máy chủ và truy cập 

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
6, phản hồi bên dưới cho thấy tệp HTML đã được hiển thị thành công.

0 truyền thống.

Các luồng Node.js đều hiệu quả bộ nhớ và tiết kiệm thời gian.

Không giống như cách đọc tệp truyền thống trong đó toàn bộ tệp phải được đọc trước khi xử lý nó, các luồng Node.js cho phép chúng tôi đọc từng phần nội dung mà không giữ nó trong bộ nhớ.

Mô -đun 

 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">

         {{include include.css.html}}

         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
     </head>
     <body>
0 cung cấp cho chúng tôi chức năng 
      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
2 chấp nhận tham số đường dẫn giữ đường dẫn đến tệp HTML của chúng tôi trong thư mục gốc.

Tham số thứ hai là một tham số tùy chọn chứa một đối tượng chuỗi. Hàm này cho phép chúng tôi mở một luồng có thể đọc được, sau đó chúng tôi có thể đặt từ nguồn đến đích bằng phương pháp 

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
2.

Đây là cách chúng ta có thể thực hiện điều này.

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
0

Nếu chúng tôi khởi động máy chủ và truy cập 

      {{include head.html}}
 {{include header.html}}

 <p class="well">Hello world!</p>

 {{include footer.html}}
6, phản hồi bên dưới cho thấy tệp HTML đã được hiển thị thành công.

fs createReadStream Method

Sự kết luận

Tóm lại, nếu bạn đang tìm cách phát triển các ứng dụng web, tại một số điểm, bạn có thể phải học một khung Node.js. Express.js là một trong những khung công tác được sử dụng phổ biến nhất.

Express.js là một khung tối giản cung cấp các tính năng mạnh mẽ để phát triển các ứng dụng web và di động. Express.js cung cấp các giải pháp tốt nhất để phục vụ các tệp tĩnh bằng hàm phần mềm trung gian 

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
4.

Hàm này chấp nhận các tham số gốc và tùy chọn, trong đó root chỉ định thư mục gốc mà chúng ta có thể phục vụ các tệp tĩnh như HTML và CSS.

Express cũng cho phép bạn làm việc với các công cụ mẫu như 

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
5, 
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
6 và 
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/bootstrap-responsive.css">
      <link rel="stylesheet" href="css/main.css">
7, giúp thiết kế các trang HTML dễ dàng hơn.

Bạn có thể sử dụng HTML trong 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 thế nào yêu cầu tệp HTML trong Node JS?

Mô -đun hệ thống tệp Node.js cho phép bạn làm việc với hệ thống tệp trên máy tính của bạn.Để bao gồm mô -đun hệ thống tệp, hãy sử dụng phương thức yêu cầu (): var fs = yêu cầu ('fs');var fs = require('fs');

Tôi có thể bao gồm tệp HTML trong HTML không?

Đánh dấu đơn giản trong tiêu đề nhúng tệp HTML rất đơn giản.Tất cả những gì chúng ta cần làm là sử dụng phần tử „phổ biến.Sau đó, chúng tôi thêm giá trị nhập „Nhập vào thuộc tính„ rel.Sử dụng „href, chúng tôi đính kèm URL của tệp HTML, giống như chúng tôi đã quen khi nói đến các bảng kiểu và tập lệnh.use the common „“ element. Then we add the value „import“ to the „rel“ attribute. Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts.

programming html Expressjs Express render HTML Express send file Static express nodejs

Bài Viết Liên Quan

Hướng dẫn success animation css - css hoạt hình thành công
Hướng dẫn success animation css - css hoạt hình thành công

Hướng dẫn is html or php better? - html hay php tốt hơn?
Hướng dẫn is html or php better? - html hay php tốt hơn?

2023 Chevy Blazer redesign
2023 Chevy Blazer redesign

Hướng dẫn expressjs mongodb - expressjs mongodb
Hướng dẫn expressjs mongodb - expressjs mongodb

Hướng dẫn int decimal python - con trăn thập phân int
Hướng dẫn int decimal python - con trăn thập phân int

Hướng dẫn what is the main advantage of css? - lợi thế chính của css là gì?
Hướng dẫn what is the main advantage of css? - lợi thế chính của css là gì?

Hướng dẫn python requests x509 certificate - python yêu cầu chứng chỉ x509
Hướng dẫn python requests x509 certificate - python yêu cầu chứng chỉ x509

Hướng dẫn php reflectionclass example - ví dụ lớp phản xạ php
Hướng dẫn php reflectionclass example - ví dụ lớp phản xạ php

Hướng dẫn php login set cookie - đặt cookie đăng nhập php
Hướng dẫn php login set cookie - đặt cookie đăng nhập php

Hướng dẫn net nodejs - chỉ cần nodejs
Hướng dẫn net nodejs - chỉ cần nodejs

MỚI CẬP NHẬP

1134 lê hoàn phường ba đình tp thanh hóa năm 2024
7 phúts trước . bởi MonogamousBrewer
Ổ cứng bị lỗi the disk is write protected năm 2024
8 phúts trước . bởi CorrespondingMemory
Cháu chắt ngoại theo hán nôm gọi là gì năm 2024
15 phúts trước . bởi DisgustedRecurrence
Bài tập excel về hàm countif có lời giải năm 2024
41 phúts trước . bởi FeaturelessWiring
Dân tộc kinh thuộc nhóm ngôn ngữ nào năm 2024
1 giờs trước . bởi EsotericFertilization
Lột xác tiếng anh là gì năm 2024
1 giờs trước . bởi HeartlessFolklore
Hcl có tính chất oxi hóa khử k năm 2024
1 giờs trước . bởi UrgentFlora
Cẩm hoa cẩm tú cẩm thủy thanh hóa năm 2024
1 giờs trước . bởi MonstrousScenery
Thương hiệu oem trên tiki là gì năm 2024
1 giờs trước . bởi AbashedAccuracy
Top 5 chòm sao điên cuồng khi yêu năm 2024
2 giờs trước . bởi DivorcedNucleus

Xem Nhiều

Co số điện thoại di động nào 9 đó năm 2024
6 ngàys trước . bởi SilverTo-day
Himax premium lub ts40 là gì năm 2024
6 ngàys trước . bởi DeepeningMirth
81 2 nguyễn văn giai quận 1 f dakao năm 2024
6 ngàys trước . bởi First-rateMedics
Cách mạng công nghiệp 4.0 cơ hội nào cho startup năm 2024
4 ngàys trước . bởi SinfulBoldness
Các dạng toán chương 1 kinh tế vĩ mô năm 2024
2 ngàys trước . bởi HeathenPolling
Khắc phục lỗi phần mềm fot làm bị out game năm 2024
6 ngàys trước . bởi OvercastOutfield
Bài tập tự luận unit 12 tiếng anh 8 năm 2024
1 ngàys trước . bởi Ten-yearCross-examination
724 22 lê văn lương.phước kiểng nhà bè năm 2024
10 giờs trước . bởi AcousticEnthusiasm
Top phim xuyen khong hay nhat trung quoc năm 2024
5 ngàys trước . bởi BlissfulAbstinence
Backtory nghĩa là gì câu chuyện hậu trường năm 2024
1 ngàys trước . bởi RipplingProcessor

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.