Cách liên kết nút js với html

Đó là khi tôi thêm phần tử vào mẫu chuỗi, nút đó cố gắng NHẬN các kiểu. css thay vì chỉ ghi nó vào tài liệu html

const csvFilePath = "csv/FormSubmissions.csv";
const csv = require("csvtojson");

const PdfWriter = require("csv-converter-to-pdf-and-html/modules/PdfWriter");

const path = require("path");
const fs = require("fs");
const fsPromises = fs.promises;

const pdfFilePath = "./Form-Submissions.pdf";

const creatHtmlFile = async (data) => {
  const fileName = "./Form-Submissions.html";
  return await fsPromises.writeFile(fileName, data);
};

// CREATE HTML FROM JSON OBJECT
const createSubmissionHtml = async (JsonObj) => {
  try {
    return `
      
      
          
          Form Submissions
          
          
          
              ${Object.keys(JsonObj).map((key) => {
                let submission = JsonObj[key];
                return `
                  

                    

                      ${Object.entries(submission)
                        .map((entry) => {
                          let listItem;
                          const groups = [
                            "Contact",
                            "Founders",
                            "Progress",
                            "Idea",
                            "Equity",
                            "Legal",
                            "Curious",
                          ];
                          const [prop, value] = entry;
                          const propertyValue = `
${prop}:
${value}
`;
                          const sectionGroup = `
${prop}:
`;

                          groups.includes(prop)
                            ? (listItem = sectionGroup)
                            : (listItem = propertyValue);
                          return listItem;
                        })
                        .join("\n")}
                    
                  

                  `;
              })}
          
      
   `;
  } catch (error) {
    console.log(error);
  }
};

csv({
  delimiter: ",",
})
  .fromFile(csvFilePath)
  .then((JsonObj) => createSubmissionHtml(JsonObj))
  .then((html) => {
    creatHtmlFile(html);
    PdfWriter.WritePDF(pdfFilePath, html);
  })
  .catch((err) => err.message);

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 nhanh 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 kết xuất tệp HTML trong Máy chủ NodeJS và ExpressJS tùy chỉnh. Bạn không cần 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 đã sẵn sàng để đi

Bước 1. Cài đặt nhanh

Tạo một thư mục mới và khởi tạo một dự án Node mới bằng lệnh sau

npm init --y

Hãy cài đặt Express

cài đặt npm --save express

Tuyệt quá. hãy tiếp tục và tìm hiểu về chức năng chúng ta sẽ sử dụng để hiển thị tệp HTML trong Express

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

ExpressJS cung cấp chức năng sendFile() về cơ bản sẽ gửi các tệp HTML tới trình duyệt, sau đó trình duyệt sẽ tự động giải thích. Tất cả những gì chúng ta cần làm là trong mọi tuyến đường để phân phối một tệp HTML phù hợp

Dành cho. ví dụ.
Khi người dùng nhấn vào URL chính, hãy phân phối chỉ mục. html.

//giả sử ứng dụng là đối tượng rõ ràng.
ứng dụng. lấy('/',function(req,res) {
  res.sendFile('index. html');
});

Mã này là cho mục đích ví dụ. Nó sẽ gây ra lỗi phân giải thư mục

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

Tôi sẽ phát triển một trang web đơn giản bao gồm 3 trang tôi. e Trang chủ, trang giới thiệu, 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
---+ chỉ số. html
---+ giới thiệu. html
---+ chỉ mục. html
--- ứng dụng. js
----gói. json

bưu kiện. json

{
    "tên". "htmlKết xuất",
    "phiên bản": "1. 0. 0",
    "mô tả". "",
    "chính": "chỉ mục. js",
    "tập lệnh". {
        "kiểm tra". ""
    },
    < . "keywords": [],
      "tác giả . : "",
    "giấy phép": "ISC",
    "phụ thuộc": {
        "express". "^4. 16. 4"
    }
}

Đây là mã Máy chủ tốc hành của chúng tôi

ứng dụng. js

const express = yêu cầu ('express');
const app = express();
const path = require('path');
const router = express.Bộ định tuyến();

bộ định tuyến. lấy('/',function(req,res){
  res.gửiTệp( đường dẫn. tham gia( __dirname +' . html'));
  . Nó sẽ phân giải vào thư mục dự án của bạn.
});

bộ định tuyến. lấy('/về',function(req,res){
  res.gửiTệp( đường dẫn. tham gia( __dirname +' . html'));
});

router.lấy('/sitemap',function(req,res){
  res.gửi tệp( đường dẫn. tham gia( __dirname +' . html'));
});

//add the router
app.sử dụng('/', < );
app.lắng nghe( xử lý. vi . cổng . 3000);

bảng điều khiển. log('Đang chạy tại cảng 3000');

Đây là các tệp HTML của chúng tôi. Tôi sẽ hiển thị chỉ số. chỉ html

mục lục. html

< html >
< đầu>
  <title>Express HTML</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" >< /tập lệnh >
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" >
  < liên kết . //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 1/css/bootstrap-theme. tối thiểu. css"="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" >
  < tập lệnh . //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 1/js/khởi động. tối thiểu. js"="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" >< /tập lệnh >
</head>
<body>
  <div style="margin:100px;" >
    lớp="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a class="navbar-brand" href="/">Express HTML</a>
    <ul class="nav navbar-nav">
      <li class="active">
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/about">About</a>
      </li>
      <li>
        <a href="/sitemap">Sitemap</a>
      </li>
    </ul>
  </div>
</nav>
    <div class="jumbotron"  style="padding:40px;" >
        < h1>Hello, world!< /h1 >
      < . <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.< /p >
      < <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
  </div>
</body>
</html>

Đây là đầu ra

Bước 4. Kết xuất HTML động bằng cách sử dụ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 trường hợp chúng ta cần hiển thị các mẫu HTML động. Trước khi bạn nhầm lẫn giữa các mẫu tĩnh và mẫu động, hãy để tôi giải thích nhanh về sự khác biệt

Trong các mẫu tĩnh, chúng tôi không thể chuyển 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ể chuyể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 khuôn mẫu trong Express. Tôi sẽ sử dụng công cụ tạo khuôn mẫu pug cũng rất phổ biến và được Express khuyên dùng. Chúng tôi cũng sử dụng Pug cho trang web này, trên thực tế, trang này được hiển thị bằng các mẫu Pug

Hãy cài đặt các phụ thuộc của chúng tôi

npm i --S express pug

Đây là mã máy chủ Express của chúng tôi

ứng dụng. js

const express = yêu cầu ("express");
const app = express();
const path = require("path");
const router = express.Bộ định tuyến();

ứng dụng. đặt("công cụ xem", "pug");
app.đặt("lượt xem", path.tham gia( __dirname , " . ));

router.lấy("/", (req, res) => {
  res.render("index");
});

router.lấy("/về", (req, res) => {
  res.render("about", { title: Thông báo "Xin chào", message. "Chào bạn. " });
} . ;

app.sử dụng("/", < );
app.lắng nghe( xử lý. vi . cổng . 3000);

bảng điều khiển. log("Đang chạy ở cổng 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. Đây là mã của các mẫu Pug nằm trong thư mục lượt xem

mục lục. pug

html
  đầu
  tiêu đề Kết xuất HTML bằng PUG
  nội dung
    h1

xung quanh. pug

html
  đầu
    tiêu đề= title
  body
    h1= message

Sau khi chạy mã này, hãy điều hướng trình duyệt của bạn đến localhost. 3000/khoảng, bạn sẽ thấy đầu ra HTML được hiển thị bằng các mẫu Pug

Thật tuyệt vời. 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

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 trong Express bằng Middleware
• Express Hoàn thành hướng dẫn. Phần 1
• Hướng dẫn Node js cho người mới bắt đầu từng bước với các ví dụ

Phần kết luận

Có những tình huống mà bạn cần phát triển một máy chủ web cung cấp các tệp HTML giống như cách apache của bạn làm. Tuy nhiên, đây không phải là cách sử dụng tối ưu của Node. js nhưng bạn có thể sử dụng một tính năng như vậy để đạt được máy chủ web tùy chỉnh cho ứng dụng của riêng mình

Làm cách nào để kết nối nút js và html?

Làm cách nào để chạy trang html trong nút js?

Làm cách nào để viết mã nút js trong html?

Làm cách nào để lấy dữ liệu từ nút js sang html?