使用 Express 渲染原始 html - Javascript (1)

📌 相关文章

📜 使用 Express 渲染原始 html - Javascript (1)

📅 最后修改于: 2023-12-03 14:49:39.196000 🧑 作者: Mango

使用 Express 渲染原始 html - Javascript

在web应用程序中，通常需要使用模板引擎来组织和呈现动态的HTML。而在一些特殊的情况下，我们需要在前端使用原始的HTML和JavaScript，这个时候，我们可以使用Express来渲染原始的HTML页面。

安装 Express

首先，我们需要安装 Express：

npm install express --save

创建 Express 应用程序

在安装 Express 后，我们可以通过如下代码来创建一个简单的 Express 应用程序：

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
})

渲染原始的 HTML 页面

接下来，我们可以创建一个 HTML 文件，并将其放到 Express 应用的 public 目录下。

例如，我们可以创建一个名为 index.html 文件，并将其放到 public 目录下：


<!DOCTYPE html>
<html>
  <head>
    <title>Express HTML Rendering</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

接着，我们需要告诉 Express 如何来渲染这个 HTML 文件。为此，我们需要添加如下代码到 Express 应用程序中：

app.use(express.static('public'))

这行代码告诉 Express 从 public 目录下加载静态文件，包括我们的 index.html 文件。

最后，我们可以使用如下代码来启动 Express 应用程序：

app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
})

现在，我们可以在浏览器中访问 http://localhost:3000/ 来查看已经渲染好的 HTML 页面了。

结论

使用 Express 来渲染原始的 HTML 页面非常简单。我们只需要将 HTML 文件放到 public 目录下，并告诉 Express 如何来加载这个文件即可。这样，我们就可以在前端使用原始的 HTML 和 JavaScript 了。

Markdown 代码片段

# 使用 Express 渲染原始 html - Javascript

在web应用程序中，通常需要使用模板引擎来组织和呈现动态的HTML。而在一些特殊的情况下，我们需要在前端使用原始的HTML和JavaScript，这个时候，我们可以使用Express来渲染原始的HTML页面。

## 安装 Express

首先，我们需要安装 Express：

```javascript
npm install express --save