🌟前言
哈喽小伙伴们,新的专栏 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包配置文件,工程信息以及模块依赖
🌟写在最后
更多Node知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!