【Node.js】Node.js入门（三）：Express安装、测试、使用

1、简述

Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。官网地址如下：

https://www.expressjs.com.cn/
1

Nodejs和Express的区别
Nodejs本身其实只提供了文件、网络端口监听、字符集等基本的操作。
Express提供了BS架构服务端的基本框架，比如路由功能、异常处理等等。
Express.js是一个基于Node.js的框架，用于使用Node.js的原理和方法开发Web应用程序。

2、安装步骤

2.1 安装环境

系统环境：ubuntu18.04
依赖包：先安装Node.js，参考【Node.js】Node.js入门（一）：安装、编辑、编译运行

2.2 安装Express

创建目录：

$ mkdir mypp
$ cd myqpp
1
2

创建 package.json 文件

$ npm init
1

一路回车即可
下载保存Express包

$ npm install express --save
1

2.3 查看安装的模块

安装完毕，是不是想看看都安装了哪些模块、文件，它们都在当前目录node_modules下，使用tree命令查看：

myapp$ tree -L 2
.
├── node_modules
│   ├── accepts
│   ├── array-flatten
│   ├── body-parser
│   ├── bytes
│   ├── call-bind
│   ├── content-disposition
│   ├── content-type
│   ├── cookie
│   ├── cookie-signature
│   ├── debug
│   ├── depd
│   ├── destroy
│   ├── ee-first
│   ├── encodeurl
│   ├── escape-html
│   ├── etag
│   ├── express
│   ├── finalhandler
│   ├── forwarded
│   ├── fresh
│   ├── function-bind
│   ├── get-intrinsic
│   ├── has
│   ├── has-symbols
│   ├── http-errors
│   ├── iconv-lite
│   ├── inherits
│   ├── ipaddr.js
│   ├── media-typer
│   ├── merge-descriptors
│   ├── methods
│   ├── mime
│   ├── mime-db
│   ├── mime-types
│   ├── ms
│   ├── negotiator
│   ├── object-inspect
│   ├── on-finished
│   ├── parseurl
│   ├── path-to-regexp
│   ├── proxy-addr
│   ├── qs
│   ├── range-parser
│   ├── raw-body
│   ├── safe-buffer
│   ├── safer-buffer
│   ├── send
│   ├── serve-static
│   ├── setprototypeof
│   ├── side-channel
│   ├── statuses
│   ├── toidentifier
│   ├── type-is
│   ├── unpipe
│   ├── utils-merge
│   └── vary
├── package.json
└── package-lock.json

57 directories, 2 files
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

3、Hello World测试

创建Hello World web服务器，在浏览器页面中打印出：Hello World。只需简单的三步：

3.1 创建app.js

在myapp目录中创建app.js文件，内容如下

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

1
2
3
4
5
6
7
8
9
10
11
12

3.2 运行

$ node app.js
1

3.3 测试

在浏览器中输入 http://localhost:3000/，将会看到打印输出“Hello World!”

4、使用Express创建应用骨架

4.1 创建应用骨架

创建目录

$ mkdir generator
1

进入目录

$ cd generator
1

生成应用目录结构

$ npx express-generator
1

输出打印信息：

$ npx express-generator
Need to install the following packages:
  express-generator@4.16.1
Ok to proceed? (y) y
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : public/
   create : public/javascripts/
   create : public/images/
   create : public/stylesheets/
   create : public/stylesheets/style.css
   create : routes/
   create : routes/index.js
   create : routes/users.js
   create : views/
   create : views/error.jade
   create : views/index.jade
   create : views/layout.jade
   create : app.js
   create : package.json
   create : bin/
   create : bin/www

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=generator:* npm start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

4.2 安装依赖包

使用npm命令安装所有依赖包

$ npm install
1

输出打印信息：

npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade

added 99 packages, and audited 100 packages in 10s

1 package is looking for funding
  run `npm fund` for details

5 vulnerabilities (1 low, 4 critical)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.3 运行

$ DEBUG=generator:* npm start
1

输出打印信息：

> generator@0.0.0 start
> node ./bin/www

  generator:server Listening on port 3000 +0ms
1
2
3
4

4.4 测试

在浏览器中输入：http://localhost:3000/，可见如下信息

Express
Welcome to Express
1
2

5 基本路由

路由使用方法

app.METHOD(PATH, HANDLER)
1

参数说明：

app 是express的实例化：var app = express();
METHOD是HTTP方法，GET,、POST、PUT、DELETE
PATH是相对服务的路径
HANDLER是个函数，执行相应的路由请求
1
2
3
4

常用路由举例

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.post('/', function (req, res) {
  res.send('Got a POST request')
})

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user')
})

app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6、静态文件浏览

想要查看图像、CSS 文件或者 JavaScript 文件之类的静态文件，推荐使用 Express 中的 express.static 内置中间件函数。

express.static(root, [options])
1

示例一：

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

现在，可以访问 public 目录中的所有文件了：

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
1
2
3
4
5

示例二

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

现在，可以通过带有 /static 前缀地址来访问 public 目录中的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
1
2
3
4
5

示例三：
上面都是相对路径，相对于执行程序的路径，下面的方法可以使用绝对路经，推荐使用这个方法，比较安全

const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))
1
2