您的位置：首页 > 移动开发

appweb ejs_EJS布局

2020-08-02 16:05 681 查看

appweb ejs

Hi! Welcome. Today, we are going to look at EJS layouts. EJS Layouts make very important use of EJS. Have you ever tried to imagine if social media websites create a new webpage for every user?

嗨！欢迎。今天，我们将看一下EJS布局 。 EJS布局非常重要地使用了EJS 。您是否曾经想过，社交媒体网站是否会为每个用户创建一个新网页？

Some simply make use of layouts in template engines.

有些只是在模板引擎中使用布局。

We are going to see an example or possible use of layouts using express and the express-ejs-layouts module.

我们将看到一个示例或使用express和express-ejs-layouts模块的布局的可能用法。

Take Note! You should have Node.js installed in your before you can start using EJS in this article.

做记录！在开始使用EJS之前，您应该已经安装了Node.js。

To download Node JS, visit nodejs.org, then install.

要下载Node JS，请访问nodejs.org ，然后安装。

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

*需要基本NODE.JS /表达知识

To begin, ensure you have EJS and express installed via npm.

首先，请确保您已通过npm安装了EJS和express。

To install EJS, simply open a terminal/command prompt and type the following command:

要安装EJS，只需打开终端/命令提示符并键入以下命令：

npm install ejs
or
npm install ejs –save

[/code]

Equally, install the express-ejs-layouts module using the command npm install express-ejs-layouts.

同样，安装使用命令NPM安装快递-EJS的布局 快递-EJS-布局模块 。

We will create,

我们将创造，

Express server file
Express服务器文件
Home.ejs file
Home.ejs文件
About.ejs file
About.ejs文件
Layout.ejs file and all ejs file should be saved in the views folder found in your node.js project directory
Layout.ejs文件和所有ejs文件应保存在node.js项目目录下的views文件夹中

Layouts enable us to dynamically fix content or elements to a page in such a way that even if a different page is requested, the content remains but the page is successfully accessed.

布局使我们能够以某种方式动态地将内容或元素固定到页面，即使请求另一个页面，该内容或内容仍会保留，但该页面可以成功访问。

Open your text editor and type the following code, save as app.js.

打开文本编辑器，然后输入以下代码，另存为app.js。

var express = require('express');
var ejs = require('ejs');
var app = express();
var expressLayouts = require('express-ejs-layouts');

app.use(expressLayouts);
app.set('view engine', 'ejs');

app.get("/", function(req, res) {
res.render("home");
});

app.get("/about", function(req, res) {
res.render("about");
});
app.listen(3000, function() {
console.log("server is listening!!!");
});

[/code]

Now, let's create our ejs files:

现在，让我们创建我们的ejs文件：

Open a text editor and type the following code, save as home.ejs

打开文本编辑器，然后输入以下代码，另存为home.ejs

<h4> Home Page</h4>

[/code]

Open a text editor and type the following code, save as about.ejs

打开文本编辑器，然后输入以下代码，另存为about.ejs

<h5> hi!... I am born again and have been set free!! </h5>

[/code]

Open a text editor and type the following code, save as layout.ejs

打开文本编辑器，然后输入以下代码，另存为layout.ejs

<html>

<head>
<title> EJS</title>
</head>

<body>
<div style="background-color:yellow; padding:50;">
<h2> <center> EJS IS COOL!!</h2>
</div>
<%- body %>
</body>

</html>

[/code]

Finally, initiate the app.js file with node app.js in a terminal and view the port in a browser.

最后，在终端中使用节点app.js初始化app.js文件，并在浏览器中查看端口。

localhost:3000 and localhost:3000/about

[/code]

Output:

输出：

Thanks for coding with me! Feel free to drop a comment or question.

感谢您与我编码！随意发表评论或问题。

翻译自: https://www.includehelp.com/node-js/ejs-layouts.aspx

appweb ejs

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航