Express的简单使用

简介

因为使用vue-cli构建项目的时候接触了一点express，所以现在参照官网认真看一下比较简单的功能，之后再深入学习。

开始使用

安装

mkdir express //创建目录
cd express //进入目录
npm init //生成package.json文件
npm install express --save 或 npm install express

注意！在npm init这一步时，会让你指定入口文件，默认是index.js，可以修改为自定义的，我的是app.js。

创建实例

进入刚才创建的目录，新建入口文件app.js。此时文件目录如下：

在app.js中添加以下代码

var express = require('express');
var app = express();

app.get('/', function(req, res){
	res.send('Hello Express');
});

app.listen(3000, function(){
	console.log('Success');
});

运行app.js

1	node app.js

打开浏览器，访问地址，效果如下

路由

路由的定义由如下结构组成：app.METHOD(PATH, HANDLER)。其中，app 是一个 express 实例；METHOD 是某个 HTTP 请求方式中的一个；PATH 是服务器端的路径；HANDLER 是当路由匹配到时需要执行的函数。
以get为例，在刚才的app.js基础上添加

1
2
3

app.get('/a', function(req, res){
	res.send('This is a page');
});

重新运行app.js，效果如下

静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件，比如html、css、js、图片等。
假设我新建了一个public目录，在目录下我放了一张图片a.jpg。
使用

1	app.use(express.static('public'));

重新运行，访问http://localhost:3000/a.jpg，查看效果

如果静态资源存放在多个目录下面，你可以多次调用express.static 中间件。访问静态资源文件时，express.static中间件会根据目录添加的顺序查找所需的文件。
比如我在新增的public2目录下放了一张新图，我同样命名为a.jpg
在原来基础上使用

1 2	app.use(express.static('public2')); //放在public前 app.use(express.static('public'));

重新运行，访问http://localhost:3000/a.jpg，查看效果

可见的确是按顺序加载的。

如果你希望所有通过express.static访问的文件都存放在一个“虚拟（virtual）”目录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现。
假设虚拟目录名为vr，如下所示：

1	app.use('/vr', express.static('public'));

效果如第一张图所示。