javascript - 如何在 node.js 中创建路由并包含 html 代码

Question

我带着一些关于 Node.Js 的问题回来了。我是 Node 的新手，我正在尝试编写一些代码来创建服务器，然后在页面之间创建一些路由。

为了创建路由，我是否必须将 html 文件转换为 hbs？

所以基本上，有没有可能包含 html 页面或文件而不是 html 标签？

此外，对于 CSS，我需要做些什么还是应该自动包含它？

我认为，为了在页面之间创建路由，我需要检查 URL 吗？

我是否需要单独的文件来为 GET 和 POST 方法创建一些代码？我不太确定。

如果我使用 WebStorm 并创建一个 Node.Js Express 项目，它会创建一个文件夹“bin”，其中有一个文件“www”。这是什么文件？

亲切的问候，G

//code for the server:

var http = require('http');
const express = require('express')
const app = express()
const port = 3000

http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html' }); // http header
    var url = req.url;

    if (url === '/'){
        res.write(`<h1>home page</h1>`); //write a response
        res.end(); //end the response
    } else if (url === '/index') {
        res.write('<h1>index page<h1>'); //write a response
        res.end(); //end the response
    } else if (url === '/test') {
        res.write('<h1>test page<h1>'); //write a response
        res.end(); //end the response
    } else if (url ==='/contact'){
        res.write('<h1>contact page<h1>'); //write a response
        res.end(); //end the response
    } else if (url ==='/about'){
        res.write('<h1>about page</h1>'); // write a response
        res.end(); //end the response
    }
}).listen(port, function () {
    console.log(`server start at portL ${port}`); //the server object listens on port 3000
}); 

Answer 1

我感觉你需要的是渲染引擎。您可以使用 hbs npm module ，这是一个基于 handlebars.js 的小型且易于使用的 View 引擎.

您需要先安装hbs。

$ npm install hbs --save

然后确保你的文件夹结构是这样的:

├── package-lock.json
├── package.json
├── server.js
└── views
    ├── about.hbs
    ├── contact.hbs
    └── home.hbs

还有你的server.js 文件，像这样:

const path = require('path')
const express = require('express')
const hbs = require('hbs')

const app = express()
const port = 3000

// Configure view engine and set views folder

app.set('view engine', 'hbs')
app.set('views', path.join(__dirname, 'views'))

// Manage the routes

app.get('/', (req, res) => {
    res.render('home')
})

app.get('/about', (req, res) => {
    res.render('about')
})

app.get('/contact', (req, res) => {
    res.render('contact')
})

// Start the server

app.listen(port, () => {
    console.log(`The server is running on port ${port}.`)
})

这样，使用hbs View 引擎，您还可以将数据从服务器传递到您的 HTML 内容，如下所示:

app.get('/about', (req, res) => {
    const data = { name: 'John Doe' }
    res.render('about', data)
})

按照这个示例，您将在 /views/about.hbs 文件中捕获从服务器发送的数据，如下所示:

<div>
    <h1>Hello, {{name}} how are you today?</h1>
</div>

希望对你有帮助。

编辑:

要引用 CSS 文件，您必须在 Node.js 服务器上创建一个静态目录。为此，请将其添加到您的 server.js 文件中:

app.use('/public', express.static(__dirname + '/public'));

然后确保创建一个 /public 文件夹并将您的 Assets 移到那里，如下所示:

├── server.js
└── public
    ├── bundle.css
    └── logo.png

之后，您现在可以从 View 中引用所有静态内容。例如在您的 home.hbs 中:

<!-- Reference static CSS files -->
<link href="/public/bundle.css" rel="stylesheet">

<!-- Reference static images -->
<img src="/public/logo.png" alt="" />

如果您不想使用 View 引擎而只想呈现纯 HTML 文件，您也可以这样做:

app.get('/contact', (req, res) => {
    res.sendFile(path.join(__dirname + '/views/contact.html'));
});