理解Express express.static 和 __direname 及 __firename的含义

一:理解 app.use(express.static(__direname + '/public'));
将静态资源文件所在的目录作为参数传递给 express.static中间件就可以提供静态资源文件的访问,比如在public目录放了css,images, 和 javascript文件,我们就可以如上的写法。
当然我们也可以如下写法:
app.use(express.static(path.join(__dirname, 'public')));

先看下项目的目录结构如下:

### 目录结构如下:
demo # 工程名
| |--- public
| | |---js
| | | |-- index.js
| | |--- index.css
| | |--- index.html
| |--- server.js
| |--- .gitignore

server.js 代码如下:

var express = require('express');

var app = express();

var path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
res.send("aaa");
}); app.listen(3000, (req, res) => {
console.log('app is running at port 3000');
});

使用命令行,进入项目的根目录后,输入命令 node server.js 后,启动服务器;

那么现在我们就可以这样访问文件了;
http://127.0.0.1:3000/js/index.js
http://127.0.0.1:3000/index.css

如果我们的静态资源放在多个目录下面,我们可以多次调用express.static中间件;如:

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'common')));

如果我们希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目录(即目录根本不存在)下面,
可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:

app.use('/static', express.static(path.join(__dirname, 'public')));

那么现在访问资源文件变成如下:

http://127.0.0.1:3000/static/index.css
http://127.0.0.1:3000/static/js/index.js

二:理解__filename变量
在任何文件模块内部,可以使用__filename变量获取当前模块文件的带有完整路径的文件名。

比如现在在 server.js 代码加入如下代码:
var tt = require('./js/index.js');

然后在js/index.js 代码加入如下代码:

console.log(__filename);

在项目的根目录继续输入 node server.js , 在命令行中会显示完整的路径文件名:

/Users/tugenhua/个人demo/node0420/express-static/public/js/index.js

三: 理解__dirname变量
在任何模块文件内部,可以使用__direname变量获取当前模块文件所在目录的完整绝对路径。操作和上面一样,在index.js继续加入如下代码:
console.log(__dirname);
如下打印结果:

/Users/tugenhua/个人demo/node0420/express-static/public/js

github中demo

理解Express express.static 和 __direname 及 __firename的含义的更多相关文章

  1. 深入理解final和static关键字

    深入理解final和static关键字 参考:http://blog.csdn.net/qq1028951741/article/details/53418852 final关键字 final关键字可 ...

  2. 理解 php new static

    今天在看 Laravel 的容器(Container)实现时,发现了这么一段突然不能理解的代码: ** * Set the globally available instance of the con ...

  3. nodejs-日常练习记录-使用express搭建static服务器.

    cd C:\wxg\test\node_demo\myapp nvmw use 0.12.1 node static.js var express = require('express'); var ...

  4. 深入理解java的static关键字

    static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列 ...

  5. 简单理解JVM与static{}

    参考如下 http://www.cnblogs.com/lao-liang/p/5110710.html http://blog.csdn.net/newjerryj/article/details/ ...

  6. [Node.js]24. Level 5: Express, Express routes

    Create an express route that responds to GET requests at the URL /tweets that responds with the file ...

  7. 内联函数:static inline 和 extern inline 的含义

    引入内联函数的目的是为了解决程序中函数调用的效率问题. 函数是一种更高级的抽象.它的引入使得编程者只关心函数的功能和使用方法,而不必关心函数功能的具体实现:函数的引入可以减少程序的目标代码,实现程序代 ...

  8. C#中static void Main(string[] args)的含义

    static:是将main方法声明为静态的. void:说明main方法不会返回任何内容. String[]args:这是用来接收命令行传入的参数,String[]是声明args是可以存储字符串数组. ...

  9. Express static 托管静态文件 理解

    今天偶尔看了一下服务端渲染,遇到了express.static, 在以前学习webpack配置服务端渲染时,也使用express.static 中间件,两者配置不太一样,由于当时也没有认真学,所以 一 ...

随机推荐

  1. 23种设计模式+J2EE设计模式学习笔记-初识设计模式

    设计模式简介: 设计模式是一套被反复使用的.多数人知晓的.经过分类编目的.代码设计经验的总结.(个人理解:设计模式是不关乎业务,逻辑实现,针对普遍问题的一种解决方案). 设计模式的类型: 传统23种设 ...

  2. Spark调优_性能调优(一)

    总结一下spark的调优方案--性能调优: 一.调节并行度 1.性能上的调优主要注重一下几点: Excutor的数量 每个Excutor所分配的CPU的数量 每个Excutor所能分配的内存量 Dri ...

  3. canvas-star3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. idea vue.js插件安装

    Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...

  5. 1788:Pell数列

    1788:Pell数列 查看 提交 统计 提问 总时间限制:  3000ms 内存限制:  65536kB 描述 Pell数列a1, a2, a3, ...的定义是这样的,a1 = 1, a2 = 2 ...

  6. React中使用百度地图API

    今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用 ...

  7. 【工具相关】Web-Sublime Text2新建立文件夹(二)

    紧接着上文. 一,打开Sublime Text2. 二,在桌面上新建立一个文件夹,html5. 三,打开html5如图所示.里面有我们刚刚建立好的文件. 四,把html5文件夹拖动到sublime2中 ...

  8. javascript选项卡切换样式

    HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> &l ...

  9. 转发:tomcat的acess_log打印post请求参数,分析日志

    转载自:https://blog.csdn.net/qq_30121245/article/details/52861935 1) 在项目中加入相应的包和类,加载那里无所谓,只要web.xml配置正确 ...

  10. 《Inside C#》笔记(十一) 运算符重载

    运算符重载与之前的索引器类似,目的是为了让语言本身使用起来更方便直接,也是一种语法糖. 一 运算符重载(Operator Overloading) 运算符重载的存在,使得现有的各种运算符可以被重新定义 ...