用ejs写网页模板
今天试着用ejs模板引擎写一些页面，虽然ejs写页面与平时html写页面基本一样，但是为了方便，一些相似的页面我们可以直接用模板。
这里有两个页面，index和login页面，这两个页面的头部与脚部是一样的内容，只有中间不一样。所以用一个模板做好头部与脚部，中间部分引入就可以了。
layout.ejs
//layout.ejs 模板页面
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><%=title%>title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/mystyle.css" rel="stylesheet">
head>
<body>
<%- include("./include/header.ejs") %>//引入头部部分
<% var page ="./page/"+pagename+".ejs"%>//定义一个变量，用来动态引入
<%- include(page)%>
<%- include("./include/footer.ejs") %>//引入脚部部分
body>
html>header.ejs
//header.ejs 头部部分
<div class="container min-height">
<nav class="navbar mynav navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="http://xiaochenghua.iego.cn">HOMEa>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav dis-right">
<li><a href="http://xiaochenghua.iego.cn">首页<span class="sr-only">(current)span>a>li>
<li><a id="myadmin" href="">管理a>li>
ul>
div>
nav>
footer.ejs
//footer.ejs 脚部部分
<div class="container min-height">
<nav class="navbar mynav navbar-default navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="http://xiaochenghua.iego.cn">HOMEa>
div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav dis-right">
<li><a href="http://xiaochenghua.iego.cn">首页<span class="sr-only">(current)span>a>li>
<li><a id="myadmin" href="">管理a>li>
ul>
div>
nav>
index.ejs
//index.ejs index页面内容
<div class="panel panel-info myDisplay text-center" >
<div class="panel-heading"><h3>展示台h3>div>
<div class="panel-body">
<h4>希望通过下面这个表格，你能够简单地认识我^.^h4>
div>
<div class="table-responsive">
<table class="table">
<tr>
<td class="warning"><h3>姓名:肖承华h3>td>
tr>
table>
<table class="table .table-hover">
<tr>
<td class="active"><h4>出生年月：1996.01.09h4>td>
<td class="success"><h4>专业：软件工程h4>td>
tr>
table>
<table class="table ">
<tr>
<td class="warning"><h4>毕业院校：聊城大学东昌学院h4>td>
<td class="danger"><h4>学历：本科h4>td>
tr>
table>
<table class="table ">
<tr>
<td class="danger" ><h4>联系电话：13734472101h4>td>
<td class="active"><h4>邮箱：[email protected]/h4>td>
tr>
table>
<table class="table ">
<tr>
<td><a href="http://blog.csdn.net/qq_34149935/" target="_blank"><h4>博客h4>a>td>
<td class="info"><a href="https://github.com/1091214370" target="_blank"><h4>githubh4>a>td>
tr>
table>
<table class="table ">
<tr>
<td class="warning">HTML/HTML5td>
<td>CSS/CSS3td>
<td class="info ">Javascripttd>
<td class="success ">jquerytd>
<td class="active ">bootstraptd>
<td class="danger ">node.jstd>
tr>
table>
<table class="table">
<tr><td><a href="http://119.29.199.85/ownweb" target="_blank"><h4>更多信息点这里h4>a>td>tr>
table>
div>
div>
<div class="well">div>
<div class="page-header">
<h1>网站作品 <small><a href="webdis.html" target="_blank">更多>>a>small>h1>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/web1.png" alt="web1">
<div class="caption">
<h3>个人网站h3>
<p>主要使用bootstrap搭建的一款响应式网站。p>
<p><a href="http://119.29.199.85/webroot/" class="btn btn-primary" role="button" target="_blank">在线预览a> <a href="https://github.com/1091214370/webroot" class="btn btn-default" role="button" target="_blank">GitHub源码a>p>
div>
div>
div>
div>
<div class="page-header">
<h1>插件展示<small><a href="takein.html" target="_blank">更多>>a>small>h1>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/js-img-run1.png" alt="js-img-run1">
<div class="caption">
<h3>JS图片轮播h3>
<p>通过js设置margin值，实现图片轮播。p>
<p><a href="http://119.29.199.85/js-imgrun01/tplb1.html" class="btn btn-primary" role="button" target="_blank">在线预览a> <a href="https://github.com/1091214370/js-imgrun01" class="btn btn-default" role="button" target="_blank">GitHub源码a>p>
div>
div>
div>
div>
<div class="page-header">
<h1>博客列表 <small><a href="">更多>>a>small>h1>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>敬请期待h3>
<p>建设好后台，开始上传，敬请期待。p>
<p><a href="#" class="btn btn-primary" role="button" target="_blank">查看a>p>
div>
div>
div>
div>
div>
div>login.ejs
//login.ejs login页面
<div class="panel panel-info myDisplay text-center" >
<div class="panel-heading"><h3>展示台h3>div>
<div class="panel-body">
<h4>希望通过下面这个表格，你能够简单地认识我^.^h4>
div>
<div class="table-responsive">
<table class="table">
<tr>
<td class="warning"><h3>姓名:肖承华h3>td>
tr>
table>
<table class="table .table-hover">
<tr>
<td class="active"><h4>出生年月：1996.01.09h4>td>
<td class="success"><h4>专业：软件工程h4>td>
tr>
table>
<table class="table ">
<tr>
<td class="warning"><h4>毕业院校：聊城大学东昌学院h4>td>
<td class="danger"><h4>学历：本科h4>td>
tr>
table>
<table class="table ">
<tr>
<td class="danger" ><h4>联系电话：13734472101h4>td>
<td class="active"><h4>邮箱：[email protected]/h4>td>
tr>
table>
<table class="table ">
<tr>
<td><a href="http://blog.csdn.net/qq_34149935/" target="_blank"><h4>博客h4>a>td>
<td class="info"><a href="https://github.com/1091214370" target="_blank"><h4>githubh4>a>td>
tr>
table>
<table class="table ">
<tr>
<td class="warning">HTML/HTML5td>
<td>CSS/CSS3td>
<td class="info ">Javascripttd>
<td class="success ">jquerytd>
<td class="active ">bootstraptd>
<td class="danger ">node.jstd>
tr>
table>
<table class="table">
<tr><td><a href="http://119.29.199.85/ownweb" target="_blank"><h4>更多信息点这里h4>a>td>tr>
table>
div>
div>
<div class="well">div>
<div class="page-header">
<h1>网站作品 <small><a href="webdis.html" target="_blank">更多>>a>small>h1>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/web1.png" alt="web1">
<div class="caption">
<h3>个人网站h3>
<p>主要使用bootstrap搭建的一款响应式网站。p>
<p><a href="http://119.29.199.85/webroot/" class="btn btn-primary" role="button" target="_blank">在线预览a> <a href="https://github.com/1091214370/webroot" class="btn btn-default" role="button" target="_blank">GitHub源码a>p>
div>
div>
div>
div>
<div class="page-header">
<h1>插件展示<small><a href="takein.html" target="_blank">更多>>a>small>h1>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/js-img-run1.png" alt="js-img-run1">
<div class="caption">
<h3>JS图片轮播h3>
<p>通过js设置margin值，实现图片轮播。p>
<p><a href="http://119.29.199.85/js-imgrun01/tplb1.html" class="btn btn-primary" role="button" target="_blank">在线预览a> <a href="https://github.com/1091214370/js-imgrun01" class="btn btn-default" role="button" target="_blank">GitHub源码a>p>
div>
div>
div>
div>
<div class="page-header">
<h1>博客列表 <small><a href="">更多>>a>small>h1>
div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>敬请期待h3>
<p>建设好后台，开始上传，敬请期待。p>
<p><a href="#" class="btn btn-primary" role="button" target="_blank">查看a>p>
div>
div>
div>
div>
div>
div>app.js页面
//app.js
//supervisor app.js 自动重启服务器
var express= require('express');
var path =require('path');
var _=require('underscore');
var mongoose=require('mongoose');
// var Movie=require('./models/mongodb');
var port =process.env.PORT||3000;
var bodyParser = require('body-parser');
var app =express();
app.set('views','./view');
app.set("view cache",true);
app.set('view engine','ejs');
app.use(bodyParser.json() );// 格式化表单提交
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('./public',{
maxAge:'0',//no cache
etag:true
}));
app.locals.moment=require('moment');
app.listen(port);
console.log('server start on port'+port);
app.get("/",function(req,res){//index页面
res.render('layout',{title:'我的首页',pagename:"index"});//传入参数index，表示在模板页面引入index.ejs文件
});
app.get("/login",function(req,res){//login页面
res.render('layout',{title:'登录页面',pagename:"login"});//传入参数login，表示在模板页面引入login.ejs文件
});
最终效果
index
login
这样，相同布局的页面，只需要单独写不同的部分，然后在app.js里面传入文件名pagename:"文件名"，就可以得到一个新的页面。