Nodejs ejsに基づく単純なdemo


1ファイル概略ディレクトリ
nodejs基于ejs的一个简单demo_第1张图片
2.プロジェクトファイルを作成し、まずejsを作成する.demoフォルダ、ejs_demoは次のコマンドを実行し、倉庫を初期化し、車に戻ります.
npm init

3.2つのejsとexpressプラグインをインストールします.
npm install ejs --save
npm install express --save

4.ファイルappを作成する.js、次のコードを書きます.
var http=require("http");
var express=require("express");
var app=express();
var path = require('path');
// 1. app.js     ejs:
var ejs = require('ejs');
//    
var tem={
  message:"      "
};
//     
//      node app.js     
http.createServer(app).listen(8080,function(){
  console.log("      :http://localhost:8080");
});
//           ,  css  js         
app.use(express.static(__dirname+"/public"));
//          
// app.use(express.static(path.join(__dirname, 'public'), {maxAge: 36000}));
//         
app.set("views","./public/views");
//            ,            
app.set("view cache",true);
// 2.  html    :
app.engine('html',ejs.__express);
//                  
app.set("view engine","html");
//    
app.get("/index",function(req,res){
  res.render("index",{title:tem.message});
});

5.indexを書く.htmlファイル



    
    
    EJS
    
    
    



6.写header.html文件:




    
    
    
    Document


   


7.footerを書く.htmlファイル:



    
    
    
    Document


    


8.mainを書く.cssファイル:
h1{
  width:80%;
  height:100px;
  background:green;
  margin:20px auto;
  text-align: center;
  line-height:100px;

}

9.ejs_demoフォルダで次のコマンドを実行します.
node app.js

10.ブラウザに次のドメイン名を入力します.
http://localhost:8080/index

11.最終効果図:
nodejs基于ejs的一个简单demo_第2张图片