Node【Express框架【二】】

文章目录

🌟前言
🌟中间件
🌟中间件函数
- 🌟什么是中间件函数
- 🌟中间件函数可以做什么
🌟Express中间件的类型
- 🌟应用级中间件
- 🌟路由器级中间件
- 🌟错误处理中间件
- 🌟内置中间件
- 🌟静态资源托管 express.static 中间件
- 🌟第三方中间件
- - 🌟cookie-parser
  - 🌟express-session
🌟Express应用生成器
- 🌟安装应用生成器
- 🌟基本使用
- 🌟目录结构
🌟写在最后

🌟前言

哈喽小伙伴们，新的专栏 Node 已开启；这个专栏里边会收录一些Node的基础知识和项目实战；今天我们带领大家初识一下 Express框架 ；让我们一起来看看吧🤘

🌟中间件

Express 是一个路由和中间件组成的Web框架。

中间件是排列到管道中的处理程序，用于处理请求和响应。

在这里插入图片描述

🌟中间件函数

🌟什么是中间件函数

Express 应用程序本质上是一系列中间件函数调用。

中间件函数是可以访问请求对象 (req)、响应对象(res) 和next应用程序请求-响应周期中的函数的函数。该next函数是 Express 路由器中的一个函数，当被调用时，它会在当前中间件之后执行中间件。

function (req, res, next) {
    // 通过req操作请求对象
    // 通过res操作响应对象
    next() // 调用next()函数，可以调用下一个中间件
}

🌟中间件函数可以做什么

中间件函数可以执行以下任务：

执行任何代码。
更改请求和响应对象。
结束请求-响应周期。
调用堆栈中的下一个中间件。

中间件就是处理HTTP请求的函数，用来完成各种特定的任务，比如：

检查用户是否登录
添加公共方法。

🌟Express中间件的类型

如果当前中间件函数没有结束请求-响应循环，它必须调用next()以将控制权传递给下一个中间件函数。否则，请求将被挂起。

Express 应用程序可以使用以下类型的中间件：

应用级中间件
路由器级中间件
错误处理中间件
内置中间件
第三方中间件

🌟应用级中间件

在Express程序中，使用 app.use() 和 app.METHOD() 方法将中间件绑定到应用程序对象(app)。
在 Express 程序中，通过调用 app.use() 向管道中插入中间件。

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

app.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
})

在 Express 程序中，通过调用 app.METHOD(PATH,MiddleWare,…,HANDLER) 向管道中插入中间件。

app.get('/user', function (req, res, next) {
    console.log('Request URL:', req.originalUrl)
    next()
}, function (req, res, next) {
    res.send('USER')
})

🌟路由器级中间件

**路由器级中间件的工作方式与应用级中间件相同，只是它绑定到 express.Router() **

var router = express.Router()

使用router.use()和router.METHOD()函数绑定路由器级中间件。

var express = require('express')
var app = express()
var router = express.Router()

router.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
})

router.get('/user/:id', function (req, res, next) {
    console.log('Request URL:', req.originalUrl)
    next()
}, function (req, res, next) {
    console.log('Request Type:', req.method)
    next()
})

🌟错误处理中间件

与其他中间件函数相同的方式定义错误处理中间件函数，但是使用四个参数(err, req, res, next)：

app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

🌟内置中间件

Express 具有以下内置中间件功能：

express.static提供静态资源，例如 HTML 文件、图像等。
express.json使用 JSON 有效负载解析传入请求。注意：可用于 Express 4.16.0+
express.urlencoded解析带有 URL 编码负载的传入请求。注意：可用于 Express 4.16.0+

🌟静态资源托管 express.static 中间件

express.static 是 Express 内置的一个中间件,负责托管 Express 应用内的静态资源。如果要在网页中加载静态文件(css、js、img)，就需要另外指定一个存放静态文件的目录

项目目录下添加一个存放静态文件的目录为 public
在public目录下在添加三个存放 js 、 css 、 img 的目录,把相关文件放到相应的目录下
当浏览器发出文件请求时，服务器端就会到这个目录下去寻找相关文件

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

🌟第三方中间件

🌟cookie-parser

npm install --save cookie-parser
app.use(require(cookie-parser)(秘钥放在这里);)

提供对 cookie 的支持。

🌟express-session

npm install --save express-session
app.use(require(express-session)());)

提供会话 ID(存在 cookie 里)的会话支持。默认存在内存里，不适用于生产环境，并且可以配置为使用数据库存储。

🌟Express应用生成器

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

🌟安装应用生成器

你可以通过 npx （包含在 Node.js 8.2.0 及更高版本中）命令来运行 Express 应用程序生成器(无需安装)。

$ npx express-generator

对于较老的 Node 版本，请通过 npm 将 Express 应用程序生成器安装到全局环境中并使用：

$ npm install express-generator -g

-h 选项可以列出所有可用的命令行选项：

$ express -h

  Usage: express [options] [dir]


  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

🌟基本使用

例如，如下命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建，并且设置为使用 ejs 模板引擎（view engine）：

$ express --view=ejs myapp       
**或者简写**
$ express -e myapp

  warning: option `--ejs' has been renamed to `--view=ejs'

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

   change directory:
     $ cd myapp

   install dependencies:
     $ npm install

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

然后安装所有依赖包：

$ cd myapp
$ npm install

启动这个应用（MacOS 或 Linux 平台）：

$ DEBUG=myapp:* npm start

Windows 平台使用如下命令：

set DEBUG=myapp:* & npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。

🌟目录结构

/
├── app.js                              入口文件
│
├── bin
│   └── www
│  
├── views                               # 存放视图文件 如jade,ejs,html等
│   ├── admin                           # 后台视图文件
│   │   ├── login.html
│   │   └── reg.html              
│   └── index                           # 前台视图文件
│       ├── index.html
│       ├── header.html
│       └── footer.html
│
├── controllers/                        # 控制器文件
│   
├── models/                             # 模型文件
│     
├── routes                              # 存放路由文件
│   ├── index.js                       
│   └── user.js                       
│
├── public                              # 存放image , css , js 等静态文件
│   ├── images/
│   ├── css/
│   └── js/
│
├── node_modules                        # 存放npm包  
│
└── package.json                        # npm包配置文件，工程信息以及模块依赖