zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    howtoautomateyouriphoneappbuildswithhudson
    buildingiphoneappswithhudsonpart2
    Linux常用命令全集
    介绍
    Linux文件查找命令find,xargs详述
    Tomcat for Mac OS
    Jenkins在Mac平台安裝
    Linux下的shell与make
    buildingiosappsforovertheairadhocdistribution
    linux下u盘的使用
  • 原文地址:https://www.cnblogs.com/yek9520/p/6572330.html
Copyright © 2011-2022 走看看