使用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页面