zoukankan      html  css  js  c++  java
  • Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板。

    关于Jade的用法,网上有很多,本篇参考:Jade语法

    安装相关模块

    在实验代码前,应该先安装express和jade:

    npm install express
    npm install jade

    简单介绍本篇使用的api

    1 为了使用jade,先要设置express默认的模板引擎,用法如下:

    app.set('view engine', 'jade');//设置默认的模板引擎

    2 如果要进行样式的定义,就要创建静态文件目录,该目录中的内容,可以直接在浏览器中获取到:

    app.use(express.static(路径));

    比如路径为public,那么我们在访问localhost:3000/pubic/xxxx就可以得到相应的文件。

    3 设置视图的对应目录

    app.set('views',xxxx);

    4 向特定路径的视图返回数据

    res.render('视图的路径', { 返回的数据名称:返回的数据内容});

    代码预览

    创建index.js文件:

    var express = require('express');//引入express模块
    var app = express();//创建应用
    
    //定义public路径
    var pub = __dirname + '/public';
    app.use(express.static(pub));//设置静态目录为pubic
    app.set('views', __dirname + '/views');//设置views路径映射到views文件夹
    
    app.set('view engine', 'jade');//设置默认的模板引擎
    
    function User(name, email) {
      this.name = name;
      this.email = email;
    }
    
    var users = [
        new User('tj', 'tj@vision-media.ca'), 
        new User('ciaran', 'ciaranj@gmail.com'),
        new User('aaron', 'aaron.heckmann+github@gmail.com')
    ];
    
    app.get('/', function(req, res){
      res.render('users/test', { users: users });
    });
    
    app.use(function(err, req, res, next) {
      res.send(err.stack);
    });
    
    app.listen(3000);
    console.log('Express started on port 3000');

    这段代码首先创建了express的应用实例,然后设置相关的静态目录、视图目录、模板引擎等等。

    然后创建了几个user对象,返回给特定的视图。

    创建模板

    创建模板index.jade,注意创建的模版中,只能使用空格来进行格式化。不能同时使用制表符和空格。

    doctype html
    html
      head
      title Jade Example
      link(rel="stylesheet", href="/stylesheets/style.css")
    
      body
        h1 Users
        #users
        for user in users
          h2= user.name
          .email= user.email

    语法参考其他的Jade语法说明即可。

    添加样式文件

    在静态目录中,添加样式文件style.css:

    body {
      padding: 50px 80px;
      font: 14px "Helvetica Nueue", "Lucida Grande", Arial, sans-serif;
    }
    .email{
        color: blue;
    }

    文件目录

    根目录myqq
        ------node_modules
        |    -------express
        |    -------jade
        |
        ------public
        |    ------stylesheets
        |         -------style.css
        ------views
        |    ------test
        |          ------index.jade
        index.js

    执行node index既可运行样例。

  • 相关阅读:
    深度之眼PyTorch训练营第二期 --- 8、权值初始化
    深度之眼PyTorch训练营第二期 ---7、nn网络层--卷积层
    深度之眼PyTorch训练营第二期 ---6、nn.Module与网络模型构建
    C#数据库部分复习
    【jzoj1481】偷懒的西西
    【2020.12.03提高组模拟】黎明卿 (bondorudo)
    【2020.11.30提高组模拟】剪辣椒(chilli)
    引流
    【高精度】加减乘+组合数+比较大小(结构体)
    【易懂】费用流【SDOI2009】晨跑
  • 原文地址:https://www.cnblogs.com/xing901022/p/5074561.html
Copyright © 2011-2022 走看看