Express+ejs搭建小小网站

发现jade实在是不好看,最后转入ejs的行当。
现在是边学边做。

一、EJS的安装

首先需要node环境,然后就是下面的两行代码:

npm install express
npm install ejs

二、EJS的语法

var user=[{name:"Hawne"},{gender:"female"},{age:"21"}]
<% if (user) { %>
  <h2><%= user.name %></h2> 
<% } %>

编译出来是

<h2>Hawne</h2>

ejs的渲染

var template = ejs.compile(str, options);
template(data);
// => Rendered HTML string

ejs.render(str, data, options);
// => Rendered HTML string

这句话表示用“文章列表”渲染index.ejs的tittle,用items渲染index.ejs的items:

res.render("index",{tittle:"文章列表",items:items})

三、EJS在Express中的使用

Express+ejs搭建小小网站_第1张图片

app.js

/** * Created by Administrator on 2016/2/26. */
var express=require("express");
var routes=require("./routes");
var app=express();

app.set("view engine",'ejs');
app.use(express.static(__dirname+"/static"))

app.get("/",routes.index);
app.get("/form",routes.form);
app.post("/form",routes.create);
app.listen(1337,'127.0.0.1',function(){
  console.log("开始监听..........")
})

routes/index.js

/** * Created by Administrator on 2016/2/26. */
var items=[{tittle:"文章1"},{tittle:"文章2"}]
exports.index=function(req,res){
    res.render("index",{tittle:"文章列表",items:items})
}
exports.form= function (req,res) {
    res.render("form",{tittle:"发表文章",message:"你好厉害啊"})
}
exports.create=function(req,res){
    res.redirect("/")
}

views /index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文章列表页面</title>
    <link rel="stylesheet" href="/css/style.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <h1><%= tittle%></h1>
    <p>
      <a href="/form">发表新文章</a>

      <ul>
        <% items.forEach(function(item){ %>
          <li><%- item.tittle %></li>
        <% }); %>
      </ul>
    </p>
  </body>
</html>

views /form.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%=tittle%></title>
  </head>
  <body>
    <form action="/form" method="post">
      <label>发表新文章</label>
      <textarea name="text" rows="5" cols="100"></textarea>
      <input type="submit" value="发表">
    </form>
    <div class="">
      <%=message%>
    </div>
  </body>
</html>

你可能感兴趣的:(express,ejs)