zoukankan      html  css  js  c++  java
  • express 4.x 模板引擎与express.static

    前提:要在express中使用模块引擎需要将要使用的模板引擎安装在本项目,当然,express也是要安装的。在下面实例中,我使用的模板引擎是pug(一起叫做jade)

    我的目录结构如下:

    根目录为static,根目录下的public文件夹,是静态文件(如图片文件,css文件,js文件de)根目录。根目录下的view是模板文件的根目录。根目录中的app.js是启动文件,

    代码如下:

    //引入必要的模块
    //express.static是express 4.0中唯一的内置中间件,不需要额外引入
    var express = require('express');
    
    var app = express();
    
    //将模板引擎设置为pug,也可以设置为其他的,在这里我已经安装了pug
    app.set('view engine','pug');
    
    //设置模板文件存放的目录,我将所以的模板文件存在在view文件夹
    //它的意思是将模板文件放在与当前文件相同目录级的view文件夹中
    app.set('views','view');
    
    //将express.static作为一个中间件
    //它的意思是在public中去加载静态文件,public位于与当前文件相同目录级
    app.use(express.static('public'));
    
    app.get('/',function(req,res){
        //渲染view文件夹中index.pug模板,由于前面已经设置了模板引擎为pug,所以这里可以不加后缀名
        res.render('index');
    });
    app.listen(3000,function(){
        console.log('reading');
    });

    index.pug文件的代码如下

    doctype html
    html
        head(lang='en')
            title index
            meta(charset='utf-8')
            //- 由于在app.js中将express.static()的第一个参数设置为了public,
            //- 所以会在public中去找css/test/css,就算写成./../css/test.css等,也是
            //- 在public中去找css/test.css,不管在css/test.css前加多少个点,req.url都是css/test.css
            link(type='text/css',rel='stylesheet',href='css/test.css')
        body
            | index
            script(type='text/javascript',src='js/index.js')
  • 相关阅读:
    css笔记图
    C#基础(四)条件、循环和判断
    C#基础(三)引用类型和预定义值类型
    C#基础(二)变量和常量
    C#基础(一)
    jquery实现全选和取消全选
    jquery easyUI datagrid自动计算两列的值
    纯CSS竖直菜单
    easyui被activeX控件挡住的解决方法
    jquery实现WIN7本地磁盘容量条效果
  • 原文地址:https://www.cnblogs.com/QxQstar/p/6188363.html
Copyright © 2011-2022 走看看