Nodejs ejsに基づく単純なdemo
1ファイル概略ディレクトリ
2.プロジェクトファイルを作成し、まずejsを作成する.demoフォルダ、ejs_demoは次のコマンドを実行し、倉庫を初期化し、車に戻ります.
3.2つのejsとexpressプラグインをインストールします.
4.ファイルappを作成する.js、次のコードを書きます.
5.indexを書く.htmlファイル
7.footerを書く.htmlファイル:
8.mainを書く.cssファイル:
9.ejs_demoフォルダで次のコマンドを実行します.
10.ブラウザに次のドメイン名を入力します.
11.最終効果図:
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.最終効果図: