如何在节点中创建路由.js并包含 html 代码



我带着一些关于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
}); 

我觉得你需要的是一个渲染引擎。您可以使用 hbs npm 模块,这是一个基于车把的小型且易于使用的视图引擎.js。

您首先需要安装hbs

$ npm install hbs --save

然后确保您的文件夹结构如下所示:

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

和你的服务器.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 视图引擎,您还可以将数据从服务器传递到 HTML 内容,如下所示:

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

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

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

希望这对你有帮助。

编辑:

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

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

然后确保创建一个/public文件夹并将资产移动到其中,如下所示:

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

之后,您现在可以从视图中引用所有静态内容。例如在你的家中.hbs

<!-- Reference static CSS files -->
<link href="/public/bundle.css" rel="stylesheet">
<!-- Reference static images -->
<img src="/public/logo.png" alt="" />

如果您不想使用视图引擎,而只想渲染纯HTML文件,也可以这样做:

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

相关内容

  • 没有找到相关文章

最新更新