Express入门介绍

[TOC]

## Express入门介绍
官网：https://www.expressjs.com.cn/
### NPM安装
+ 创建工作目录

```Shell
mkdir Express
```

+ 创建项目入口文件app.js
 - 如果没有创建入口文件安装Express时会报错`npm ERR! code ERR_SOCKET_TIMEOUT ……`
+ 初始化package.json文件

```Shell
npm init -y
```

+ 安装Express

```Shell
npm install express --save
```

### Express 第一个程序
使用Express相对原生的nodejs要简洁多了，一些基础库不要在引用了，编码也默认支持中文了，require('express')引用返回的是一个函数，直接require('express')()调用，即可得到Express对象

```js
let app = require('express')()
app.get('/', (req, res) => {
    res.send("exprss 第一个程序")
})
let server = app.listen("3000", 'localhost', () => {
    console.log(server.address().address + server.address().port + "：服务已启动")
})
```

### 托管静态文件
#### express.static(path)
一个目录下静态资源的中间件，有点像一个委托函数

+ path：静态文件存放的根目录
+ 返回一个函数

```js
function serveStatic (req, res, next) {
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      if (fallthrough) {
        return next()
      }
      // method not allowed
      res.statusCode = 405
      res.setHeader('Allow', 'GET, HEAD')
      res.setHeader('Content-Length', '0')
      res.end()
      return
    }
    var forwardError = !fallthrough
    var originalUrl = parseUrl.original(req)
    var path = parseUrl(req).pathname
    // make sure redirect occurs at mount
    if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
      path = ''
    }
    // create send stream
    var stream = send(req, path, opts)

// add directory handler
    stream.on('directory', onDirectory)

// add headers listener
    if (setHeaders) {
      stream.on('headers', setHeaders)
    }
    // add file listener for fallthrough
    if (fallthrough) {
      stream.on('file', function onFile () {
        // once file is determined, always forward error
        forwardError = true
      })
    }
    // forward errors
    stream.on('error', function error (err) {
      if (forwardError || !(err.statusCode < 500)) {
        next(err)
        return
      }

next()
    })
    // pipe
    stream.pipe(res)
  }
```

#### express().use('/static',express.static(path))
使用中间件，将static()委托函数绑定到事件上，访问到静态文件时触发

+ 虚拟目录：/static是虚拟文件前缀，实际项目中不存在,添加了虚拟目录之后访问路径需要带上虚拟目录，例如未加之前使用`http://localhost:3000/index.html`，添加后访问地址为`http://localhost:3000/index.html`
+ 可以指定多个目录，示例中就添加了content和js两个目录

##### 文件目录

```html
content
   index.html 
css
   style.css 
mode_modules
app.js
package-lock.json
package.json
```

##### app.js文件
访问content目录下的index.html文件地址为 http://localhost:3000/index.html 不需要带content目录，访问css目录下的style.css文件地址为 http://localhost:3000/static/style.css 这里代码 `use` 调用了带虚拟目录的方法，虚拟目录为`/static`

```js
const express = require('express')
const app = express();
app.get('/', (req, res) => {
    res.send("exprss 第一个程序")
})
app.use(express.static('content'))
app.use("/static", express.static('css'))
let server = app.listen("3000", 'localhost', () => {
    console.log(server.address().address + server.address().port + "：服务已启动")
})
```

##### index.html文件
<mark>这里文件里面引用css文件的路径需要注意style.css的访问路径，不需要真实目录 `css` 用了虚拟目录 `static`</mark>

```html
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    
    <link rel="stylesheet" href="/static/style.css" />
</hred>
<div id="app">
    访问静态文件
</div>
<script type="text/javascript">
</script>
</html>
```

### 路由
根据请求路径和请求方式进行路径分发处理，路由从上而下匹配，知道匹配到可进入的规则，app.get，app.post，app.put，app.delete都需要路径完全匹配才能进入

常用的路由方式有以下几类

+ post 添加
+ get 查询
+ put 更新
+ delete 删除
+ use 所有请求都可以进入

``` js
const express = require('express')
const app = express();
//跟目录：http://localhost:3000 get请求进入
app.get('/', (req, res) => {
    res.send("exprss get路由")
})
//content目录：http://localhost:3000/content post请求进入
app.get('/content', (req, res) => {
    res.send("exprss get路由")
})
//user目录：http://localhost:3000/user post请求进入
app.post('/user', (req, res) => {
    res.send("exprss post路由")
})
//根目录：http://localhost:3000 post请求进入
app.post('/', (req, res) => {
    res.send("exprss post路由")
})
//根目录：http://localhost:3000 put请求进入
app.put('/', (req, res) => {
    res.send("exprss put路由")
})
//根目录：http://localhost:3000 delete请求进入
app.delete('/', (req, res) => {
    res.send("exprss delete路由")
})
//以上规则匹配不到进入这里
app.use((req, res) => {
    res.send("exprss use路由")
})
let server = app.listen("3000", 'localhost', () => {
    console.log(server.address().address + server.address().port + "：服务已启动")
})
```
<mark>restful api (一种URL的格式，没有文件后缀的URL路径)}</mark>