创建ejs项目_节点和EJS项目(1)

创建ejs项目

Hello! In the last articles, we spoke much about EJS template engine. Let's take some time and see how it can be applicable in a small project?

你好! 在上一篇文章中,我们谈到了EJS模板引擎。 让我们花一些时间,看看如何将其应用于小型项目?

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

Let's begin by creating our server.js file.

让我们开始创建我们的server.js文件

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

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

// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page 
app.get('/', function(req, res) {
    res.render('pages/index');
});

// about page 
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

Now let's create our ejs files.

现在,让我们创建ejs文件

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

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

  • Next, Create a folder called Views.

    接下来,创建一个名为Views的文件夹。

  • In the views folder, create 2 new folders: the pages and partials folder.

    views文件夹中 ,创建2个新文件夹: pagespartials文件夹。

  • In the pages folder, create 2 new ejs files.

    在pages文件夹中,创建2个新的ejs文件

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

打开您的文本编辑器,然后输入以下代码, 另存为about.js

<!DOCTYPE html>
<html lang="en">

<head>
    <% include ../partials/head %>
</head>
<header>
    <% include ../partials/header %>
</header>

About Me!!!

<footer>
    <% include ../partials/footer %>
</footer>

</body>

</html>

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

打开文本编辑器,然后再次键入以下代码, 另存为index.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <% include ../partials/head %>
</head>
<header>
    <% include ../partials/header %>
</header>

About Me!!!

<footer>
    <% include ../partials/footer %>
</footer>

</body>

</html>

In the partials folder create the following ejs files, Footer.ejs

在partials文件夹中,创建以下ejs文件Footer.ejs

<div style="background-color:black; color:white; padding:8px;">
    <center><pre>Copyright 2019! Godwill Tetah || Tutor @ Includehelp.com
</div>

Head.ejs

Head.ejs

<html>

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

<body>

    <div style="background-color:yellow; padding:50;">

        <h2> <center> EJS IS COOL!!</h2>

    </div>

</body>

</html>

Header.ejs

Header.ejs

<center>
    <pre>
    	<a href="/about">About</a>  
        <a href="/">Home</a>
    </pre>
</center>

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

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

Output

输出量

Output | node.js and ejs project output image 1
Output | node.js and ejs project output image 2

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

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

翻译自: https://www.includehelp.com/node-js/node-and-ejs-project-1.aspx

创建ejs项目

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值