node.js express，ejs后端模板

前端页面，用模板的形式和后台交接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .header{
            width: 850px;
            height: 200px;
            margin:0 auto;
            background: #ccc;
            margin-bottom: 20px;

        }
        .content{
            width:850px;
            margin:0 auto;
        }
        .main{
            float: left;
            width:400px;
            margin-right: 10px;
            border-right: 1px solid red;
        }
        .aside{
            float: left;
            width:400px;
            height: 300px;
            background: #ccc;

        }
    </style>
</head>
<body>
    <div class="header">    
    </div>
    <div class="content">
        <div class="main">
            <h1><%=biaoti%></h1>
            <p>时间：<%=shijian%> 作者：<%=zuozhe%></p>
            <%=neirong%>
        </div>
        <div class="aside"></div>
    </div>
    
</body>
</html>

后台，没有数据库的，自己模拟一个数据库

var express=require("express");

var app= express();


var shujuku=[
    {
        "biaoti":"1暗黑破啊苏打绿",
        "shijian":"2017-03-16 06:08:34",
        "zuozhe":"khairi",
        "neirong":"<p>苏打绿咖啡壶呕IE为人父公开查看皮肤来个好人品都改好后皮肤和购票高峰胖乎乎的法规和认购</p>"

    },{
        "biaoti":"2暗黑破啊苏打绿",
        "shijian":"2017-03-16 06:08:34",
        "zuozhe":"khairi",
        "neirong":"<p>苏打绿咖啡壶呕IE为人父公开查看皮肤来个好人品都改好后皮肤和购票高峰胖乎乎的法规和认购</p>"

    },{
        "biaoti":"3暗黑破啊苏打绿",
        "shijian":"2017-03-16 06:08:34",
        "zuozhe":"khairi",
        "neirong":"<p>苏打绿咖啡壶呕IE为人父公开查看皮肤来个好人品都改好后皮肤和购票高峰胖乎乎的法规和认购</p>"

    },{
        "biaoti":"4暗黑破啊苏打绿",
        "shijian":"2017-03-16 06:08:34",
        "zuozhe":"khairi",
        "neirong":"<p>苏打绿咖啡壶呕IE为人父公开查看皮肤来个好人品都改好后皮肤和购票高峰胖乎乎的法规和认购</p>"

    }
];
app.set("view engine","ejs");

app.get("/news/:id",function(req,res){
    var id=parseInt(req.params.id);
    res.render("content",shujuku[id-1]);//因为下标是从0开始，想要ID编号号对应文章内容编号就要减1
});
app.listen(3000);

app.set(name,value)
app.use([path], function)
app.get(name)
路由文件content.js

　ejs结尾的文件就是模版文件，可以看到在文件中我们用了三种标签方式（这种标签方式有过其它web开发经验的应该很好看懂）

　　1.<%= %>

　　这个标签在接到收到title: '<h1>Express</h1>'时，从显示效果来看，他直接输出HTML标签到页面上，输出的是转义后的变量值

　　2.<%- %> 　　

　　而这个标签，从显示效果上看，他没有直接输出HTML代码到页面上，输出的是没有转义后的变量值

　　3.<% %>

　　而这个标签，从显示上看，他循环了出来参数中的值，标签中是javascript逻辑代码，注意括号的开闭合

注意：后台人员要把对应模块安装好，否则人不会生效，

把前端的静态页面拓展名改为.ejs 放在view文件夹下

创建一个 npm 的 package.json 配置文件

npm init

安装 express 并将其保存到依赖列表中

npm install express --save

查看 express 的版本

express --version

快速创建Express应用骨架

使用全局方式安装 Express 应用生成器

npm install express-generator -g

在安装了 express 的文件夹中快速生成 Express 应用

express appName