使用express+ejs構建node app

時間 2019-11-08

標籤使用 express+ejs express ejs 構建 node app 简体版

原文原文鏈接

node+express+ejs

假設此時你已經安裝了nodehtml

目錄結構

app
    --views
        --pages
            --index.ejs
        --partials
            --head.ejs
            --header.ejs
            --footer.ejs
    server.js
    package.json

首先確定是安裝express和ejs

package.json裏：

{
    "name": "app",
    "main":"server.js",
    "description": "hello world test app",
    "version": "0.0.1",
    "dependencies": {
        "ejs": "^1.0.0",
        "express": "^4.6.1"
    }
}

dependencies就是要依賴的包了
在命令行裏執行node

npm install

就會安裝項目所依賴的包了express

server.js：

//server.js
var express = require('express');
var app = express();

//設置模板引擎爲ejs
app.set('view engine','ejs');

//使用res.render 渲染 ejs 模板
//res.render 會去views目錄裏找對應的文件

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

//設置監聽端口
app.listen(8888);
console.log('8888 is the magic port');

而後，固然是npm

node server.js

如今能夠打開瀏覽器，輸入json

http://localhost:8888

來看看剛纔寫的東西了。
固然，它必須是個空白的頁面bootstrap

ejs partials

footer.ejs,head.ejs,header.ejs

其實這裏就是放的公共的文件，頭尾，因此你固然能夠把head.ejs和header.ejs合併成一個瀏覽器

herd.ejs

<!-- views/partials/head.ejs -->

<meta charset="UTF-8">
<title>Super Awesome</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    body    { padding-top:50px; }
</style>

header.ejs

<!-- views/partials/header.ejs -->

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon glyphicon-tree-deciduous"></span>
                EJS Is Fun
            </a>
        </div>

        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
  
    </div>
</nav>

footer.ejs

<!-- views/partials/footer.ejs -->

<p class="text-center text-muted">© Copyright 2014 The Awesome People</p>

那麼，如何使用這些公共部分呢，看下index.ejs的代碼app

index.ejs

<!-- views/pages/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body class="container">

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

    <main>
        <div class="jumbotron">
            <h1>This is great</h1>
            <p>Welcome to templating using EJS</p>
        </div>
    </main>

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

</body>
</html>

在ejs中，使用<% include FILENAME %>來引用ejs文件，不須要後綴。ui

如今再刷新瀏覽器，就能夠看到正常的頁面了

若是你已經完成了，能夠試着本身寫一下about頁面