zoukankan      html  css  js  c++  java
  • Express下ejs的视图模板引擎的建立

     写在前面

    由于Express升级到4.0,将ejs的用法忽略,改为用户自定义形式,所以要引入库index.js作为引擎,来支持ejs的模板引擎(点击下载)。

    首先是建立一个名字叫nodeitem,引擎为ejs的express模板

    $ express  -e nodeitem

    $     cd nodeitem

    自动安装所指定的依赖

    $     npm install                 

    $     ls

    把index.js文件上传到expand_modules/ejs里面去,上传文件可安装lrzsz

    $     tree  expand_modules/

    $     vim  app.js

    因为我使用的的express3,我的app.js不是入口文件,退出vim

    $    cat package.json

    我的入口文件是 ./bin/www,想要修改也不难,只需要在app.js文件里添加如下代码即可

     app.set("port",process.env.PORT || 3000);
      http.createServer(app).listen(app.get("port"),function (){
      console.log("this is"+app.get("port"));
      })

        $    node app.js 

       建立模板

     $     vim  app.js

    //引入引擎
    var engine = require("./expand_modules/ejs/index.js");
    //改变中间量及参数
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    app.set("port",process.env.PORT  || 2000);
    app.use(favicon());
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded());
    app.use(cookieParser()); 
    app.use(express.static(path.join(__dirname, 'public')));
    app.use(app.router);
    //在app中调用engine函数改造引擎,模板引擎在显示层的名字叫layout.ejs
    app.engine("ejs",engine);
    app.locals._layoutFile="layout";
    //路由控制w
    app.get('/', routes.index);
    app.get("/abc",routes.abc);
    app.get("/u/:user",routes.user);
    app.get("/post",routes.post)
    app.get("/reg",routes.reg);
    app.get("/doReg",routes.doReg);
    app.get("/login",routes.login);
    app.get("/doLogin",routes.doLogin);
    app.get("/logout",routes.logout);
    app.get('/users', users.list);

        路由选择

           $     cd routes && vim index.js

      

      查看显示层

      $     cd views  &&  ls 

          

       $    vim layout.js

       ejs文件类似于html文件,只需要在html文件的<body>标签里面加入自己设置的模板元素即可。下面是一个例子,最关键的是要在<body>标签里面加入<%-body%>  为了显示原始HTML内容

       

      $     vim  login.ejs

          

       只需要把你想要添加到layout模板里面的html文件的<body>标签内容写入ejs文件即可   模板layout中<%-body%> 会自动解析为html,并予以显示。上面文件只是一个例子。

      写在最后

         ejs引擎书写方式特别像html,但是他有一个缺点就是不支持模板继承,想要模板继承可以使用jada引擎。要想知道两者更加详细的区别,这是飞机票

       

  • 相关阅读:
    javascript-类型、值和变量
    词法结构
    前端js保存页面为图片下载到本地
    js生成带log的二维码(qrcodejs)
    工具函数
    css 水平垂直居中
    vue中的keep-alive
    vuex 的使用
    Spring源码解析
    Spring源码解析
  • 原文地址:https://www.cnblogs.com/dirkhe/p/6847407.html
Copyright © 2011-2022 走看看