下内容,基于 Express 4.x 版本
Express 估计是那种你第一次接触,就会喜欢上用它的框架。因为它真的非常简单,直接。
在当前版本上,一共才这么几个文件:
lib/ ├── application.js ├── express.js ├── middleware │ ├── init.js │ └── query.js ├── request.js ├── response.js ├── router │ ├── index.js │ ├── layer.js │ └── route.js ├── utils.js └── view.js
这种程度,说它是一个“框架”可能都有些过了,几乎都是工具性质的实现,只限于 Web 层。
当然,直接了当地实现了 Web 层的基本功能,是得益于 Node.js 本身的 API 中,就提供了 net 和 http 这两层, Express 对 http 的方法包装一下即可。
不过,本身功能简单的东西,在 package.json 中却有好长一串 dependencies 列表。
在跑 Express 前,你可能需要初始化一个 npm 项目,然后再使用 npm 安装 Express:
mkdir p cd p npm init npm install express --save
新建一个 app.js :
const express = require('express'); const app = express(); app.all('/', (req, res) => res.send('hello') ); app.listen(8888);
调试信息是通过环境变量 DEBUG 控制的:
const process = require('process'); process.env['DEBUG'] = 'express:*';
这样就可以在终端看到带颜色的输出了,嗯,是的,带颜色控制字符,vim 中直接跑就 SB 了。
Application 是一个上层统筹的概念,整合“请求-响应”流程。 express() 的调用会返回一个 application ,一个项目中,有多个 app 是没问题的:
const express = require('express'); const app = express(); app.all('/', (req, res) => res.send('hello')); app.listen(8888); const app2 = express(); app2.all('/', (req, res) => res.send('hello2')); app2.listen(8889);
多个 app 的另一个用法,是直接把某个 path 映射到整个 app :
const express = require('express'); const app = express(); app.all('/', (req, res) => { res.send('ok'); }); const app2 = express(); app2.get('/xx', (req, res, next) => res.send('in app2') ) app.use('/2', app2) app.listen(8888);
这样,当访问 /2/xx 时,就会看到 in app2 的响应。
前面说了 app 实际上是一个上层调度的角色,在看后面的内容之前,先说一下 Express 的特点,整体上来说,它的结构基本上是“回调函数串行”,无论是 app ,或者 route, handle, middleware这些不同的概念,它们的形式,基本是一致的,就是 (res, req, next) => {} ,串行的流程依赖 next() 的显式调用。
我们把 app 的功能,分成五个部分来说。
路由 - Handler 映射
app.all('/', (req, res, next) => {}); app.get('/', (req, res, next) => {}); app.post('/', (req, res, next) => {}); app.put('/', (req, res, next) => {}); app.delete('/', (req, res, next) => {});
上面的代码就是基本的几个方法,路由的匹配是串行的,可以通过 next() 控制:
const express = require('express'); const app = express(); app.all('/', (req, res, next) => { res.send('1 '); console.log('here'); next(); }); app.get('/', (req, res, next) => { res.send('2 '); console.log('get'); next(); }); app.listen(8888);
对于上面的代码,因为重复调用 send() 会报错。
同样的功能,也可以使用 app.route() 来实现:
const express = require('express'); const app = express(); app.route('/').all( (req, res, next) => { console.log('all'); next(); }).get( (req, res, next) => { res.send('get'); next(); }).all( (req, res, next) => { console.log('tail'); next(); }); app.listen(8888);
app.route() 也是一种抽象通用逻辑的形式。
还有一个方法是 app.params ,它把“命名参数”的处理单独拆出来了(我个人不理解这玩意儿有什么用):
const express = require('express'); const app = express(); app.route('/:id').all( (req, res, next) => { console.log('all'); next(); }).get( (req, res, next) => { res.send('get'); next() }).all( (req, res, next) => { console.log('tail'); }); app.route('/').all( (req, res) => {res.send('ok')}); app.param('id', (req, res, next, value) => { console.log('param', value); next(); }); app.listen(8888);
app.params 中的对应函数会先行执行,并且,记得显式调用 next() 。
Middleware
其实前面讲了一些方法,要实现 Middleware 功能,只需要 app.all(/.*/, () => {}) 就可以了, Express 还专门提供了 app.use() 做通用逻辑的定义:
const express = require('express'); const app = express(); app.all(/.*/, (req, res, next) => { console.log('reg'); next(); }); app.all('/', (req, res, next) => { console.log('pre'); next(); }); app.use((req, res, next) => { console.log('use'); next(); }); app.all('/', (req, res, next) => { console.log('all'); res.send('/ here'); next(); }); app.use((req, res, next) => { console.log('use2'); next(); }); app.listen(8888);
注意 next() 的显式调用,同时,注意定义的顺序, use() 和 all() 顺序上是平等的。
Middleware 本身也是 (req, res, next) => {} 这种形式,自然也可以和 app 有对等的机制——接受路由过滤, Express 提供了 Router ,可以单独定义一组逻辑,然后这组逻辑可以跟 Middleware一样使用。
const express = require('express'); const app = express(); const router = express.Router(); app.all('/', (req, res) => { res.send({a: '123'}); }); router.all('/a', (req, res) => { res.send('hello'); }); app.use('/route', router); app.listen(8888);
功能开关,变量容器
app.set() 和 app.get() 可以用来保存 app 级别的变量(对, app.get() 还和 GET 方法的实现名字上还冲突了):
const express = require('express'); const app = express(); app.all('/', (req, res) => { app.set('title', '标题123'); res.send('ok'); }); app.all('/t', (req, res) => { res.send(app.get('title')); }); app.listen(8888);
上面的代码,启动之后直接访问 /t 是没有内容的,先访问 / 再访问 /t 才可以看到内容。
对于变量名, Express 预置了一些,这些变量的值,可以叫 settings ,它们同时也影响整个应用的行为:
具体的作用,可以参考 https://expressjs.com/en/4x/api.html#app.set 。
(上面这些值中,干嘛不放一个最基本的 debug 呢……)
除了基本的 set() / get() ,还有一组 enable() / disable() / enabled() / disabled() 的包装方法,其实就是 set(name, false) 这种。 set(name) 这种只传一个参数,也可以获取到值,等于 get(name) 。
模板引擎
Express 没有自带模板,所以模板引擎这块就被设计成一个基础的配置机制了。
const process = require('process'); const express = require('express'); const app = express(); app.set('views', process.cwd() + '/template'); app.engine('t2t', (path, options, callback) => { console.log(path, options); callback(false, '123'); }); app.all('/', (req, res) => { res.render('demo.t2t', {title: "标题"}, (err, html) => { res.send(html) }); }); app.listen(8888);
app.set('views', ...) 是配置模板在文件系统上的路径, app.engine() 是扩展名为标识,注册对应的处理函数,然后, res.render() 就可以渲染指定的模板了。 res.render('demo') 这样不写扩展名也可以,通过 app.set('view engine', 't2t') 可以配置默认的扩展名。
这里,注意一下 callback() 的形式,是 callback(err, html) 。
端口监听
app 功能的最后一部分, app.listen() ,它完成的形式是:
app.listen([port[, host[, backlog]]][, callback])
注意, host 是第二个参数。
backlog 是一个数字,配置可等待的最大连接数。这个值同时受操作系统的配置影响。默认是 512 。
这一块倒没有太多可以说的,一个请求你想知道的信息,都被包装到 req 的属性中的。除了,头。头的信息,需要使用 req.get(name) 来获取。
GET 参数
使用 req.query 可以获取 GET 参数:
const express = require('express'); const app = express(); app.all('/', (req, res) => { console.log(req.query); res.send('ok'); }); app.listen(8888);
请求:
# -*- coding: utf-8 -*- import requests requests.get('http://localhost:8888', params={"a": '中文'.encode('utf8')})
POST 参数
POST 参数的获取,使用 req.body ,但是,在此之前,需要专门挂一个 Middleware , req.body才有值:
const express = require('express'); const app = express(); app.use(express.urlencoded({ extended: true })); app.all('/', (req, res) => { console.log(req.body); res.send('ok'); }); app.listen(8888); # -*- coding: utf-8 -*- import requests requests.post('http://localhost:8888', data={"a": '中文'})
如果你是整块扔的 json 的话:
# -*- coding: utf-8 -*- import requests import json requests.post('http://localhost:8888', data=json.dumps({"a": '中文'}), headers={'Content-Type': 'application/json'})
Express 中也有对应的 express.json() 来处理:
const express = require('express'); const app = express(); app.use(express.json()); app.all('/', (req, res) => { console.log(req.body); res.send('ok'); }); app.listen(8888);
Express 中处理 body 部分的逻辑,是单独放在 body-parser 这个 npm 模块中的。 Express 也没有提供方法,方便地获取原始 raw 的内容。另外,对于 POST 提交的编码数据, Express 只支持 UTF-8 编码。
如果你要处理文件上传,嗯, Express 没有现成的 Middleware ,额外的实现在 https://github.com/expressjs/multer 。( Node.js 天然没有“字节”类型,所以在字节级别的处理上,就会感觉很不顺啊)
Cookie
Cookie 的获取,也跟 POST 参数一样,需要外挂一个 cookie-parser 模块才行:
const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser()) app.all('/', (req, res) => { console.log(req.cookies); res.send('ok'); }); app.listen(8888);
请求:
# -*- coding: utf-8 -*- import requests import json requests.post('http://localhost:8888', data={'a': '中文'}, headers={'Cookie': 'a=1'})
如果 Cookie 在响应时,是配置 res 做了签名的,则在 req 中可以通过 req.signedCookies 处理签名,并获取结果。
来源 IP
Express 对 X-Forwarded-For 头,做了特殊处理,你可以通过 req.ips 获取这个头的解析后的值,这个功能需要配置 trust proxy 这个 settings 来使用:
const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser()) app.set('trust proxy', true); app.all('/', (req, res) => { console.log(req.ips); console.log(req.ip); res.send('ok'); }); app.listen(8888);
请求:
# -*- coding: utf-8 -*- import requests import json #requests.get('http://localhost:8888', params={"a": '中文'.encode('utf8')}) requests.post('http://localhost:8888', data={'a': '中文'}, headers={'X-Forwarded-For': 'a, b, c'})
如果 trust proxy 不是 true ,则 req.ip 会是一个 ipv4 或者 ipv6 的值。
Express 的响应,针对不同类型,本身就提供了几种包装了。
普通响应
使用 res.send 处理确定性的内容响应:
res.send({ some: 'json' }); res.send('<p>some html</p>'); res.status(404); res.end(); res.status(500); res.end();
res.send() 会自动 res.end() ,但是,如果只使用 res.status() 的话,记得加上 res.end() 。
模板渲染
模板需要预先配置,在 Request 那节已经介绍过了。
const process = require('process'); const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser()) app.set('trust proxy', false); app.set('views', process.cwd() + '/template'); app.set('view engine', 'html'); app.engine('html', (path, options, callback) => { callback(false, '<h1>Hello</h1>'); }); app.all('/', (req, res) => { res.render('index', {}, (err, html) => { res.send(html); }); }); app.listen(8888);
这里有一个坑点,就是必须在对应的目录下,有对应的文件存在,比如上面例子的 template/index.html ,那么 app.engine() 中的回调函数才会执行。都自定义回调函数了,这个限制没有任何意义, path, options 传入就好了,至于是不是要通过文件系统读取内容,怎么读取,又有什么关系呢。
Cookie
res.cookie 来处理 Cookie 头:
const process = require('process'); const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser("key")) app.set('trust proxy', false); app.set('views', process.cwd() + '/template'); app.set('view engine', 'html'); app.engine('html', (path, options, callback) => { callback(false, '<h1>Hello</h1>'); }); app.all('/', (req, res) => { res.render('index', {}, (err, html) => { console.log('cookie', req.signedCookies.a); res.cookie('a', '123', {signed: true}); res.cookie('b', '123', {signed: true}); res.clearCookie('b'); res.send(html); }); }); app.listen(8888);
请求:
# -*- coding: utf-8 -*- import requests import json res = requests.post('http://localhost:8888', data={'a': '中文'}, headers={'X-Forwarded-For': 'a, b, c', 'Cookie': 'a=s%3A123.p%2Fdzmx3FtOkisSJsn8vcg0mN7jdTgsruCP1SoT63z%2BI'}) print(res, res.text, res.headers)
注意三点:
头和其它
res.set() 可以设置指定的响应头, res.rediect(301, 'http://www.zouyesheng.com') 处理重定向, res.status(404); res.end() 处理非 20 响应。
const process = require('process'); const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser("key")) app.set('trust proxy', false); app.set('views', process.cwd() + '/template'); app.set('view engine', 'html'); app.engine('html', (path, options, callback) => { callback(false, '<h1>Hello</h1>'); }); app.all('/', (req, res) => { res.render('index', {}, (err, html) => { res.set('X-ME', 'zys'); //res.redirect('back'); //res.redirect('http://www.zouyesheng.com'); res.status(404); res.end(); }); }); app.listen(8888);
res.redirect('back') 会自动获取 referer 头作为 Location 的值,使用这个时,注意 referer为空的情况,会造成循环重复重定向的后果。
Chunk 响应
Chunk 方式的响应,指连接建立之后,服务端的响应内容是不定长的,会加个头: Transfer-Encoding: chunked ,这种状态下,服务端可以不定时往连接中写入内容(不排除服务端的实现会有缓冲区机制,不过我看 Express 没有)。
const process = require('process'); const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser("key")) app.set('trust proxy', false); app.set('views', process.cwd() + '/template'); app.set('view engine', 'html'); app.engine('html', (path, options, callback) => { callback(false, '<h1>Hello</h1>'); }); app.all('/', (req, res) => { const f = () => { const t = new Date().getTime() + '\n'; res.write(t); console.log(t); setTimeout(f, 1000); } setTimeout(f, 1000); }); app.listen(8888);
上面的代码,访问之后,每过一秒,都会收到新的内容。
大概是 res 本身是 Node.js 中的 stream 类似对象,所以,它有一个 write() 方法。
要测试这个效果,比较方便的是直接 telet:
zys@zys-alibaba:/home/zys/temp >>> telnet localhost 8888 Trying 127.0.0.1... Connected to localhost. Escape character is '^]'. GET / HTTP/1.1 Host: localhost HTTP/1.1 200 OK X-Powered-By: Express Date: Thu, 20 Jun 2019 08:11:40 GMT Connection: keep-alive Transfer-Encoding: chunked e 1561018300451 e 1561018301454 e 1561018302456 e 1561018303457 e 1561018304458 e 1561018305460 e 1561018306460
每行前面的一个字节的 e ,为 16 进制的 14 这个数字,也就是后面紧跟着的内容的长度,是 Chunk 格式的要求。具体可以参考 HTTP 的 RFC , https://tools.ietf.org/html/rfc2616#page-2 。
Tornado 中的类似实现是:
# -*- coding: utf-8 -*- import tornado.ioloop import tornado.web import tornado.gen import time class MainHandler(tornado.web.RequestHandler): @tornado.gen.coroutine def get(self): while True: yield tornado.gen.sleep(1) s = time.time() self.write(str(s)) print(s) yield self.flush() def make_app(): return tornado.web.Application([ (r"/", MainHandler), ]) if __name__ == "__main__": app = make_app() app.listen(8888) tornado.ioloop.IOLoop.current().start()
Express 中的实现,有个大坑,就是:
app.all('/', (req, res) => { const f = () => { const t = new Date().getTime() + '\n'; res.write(t); console.log(t); setTimeout(f, 1000); } setTimeout(f, 1000); });
这段逻辑,在连接已经断了的情况下,并不会停止,还是会永远执行下去。所以,你得自己处理好:
const process = require('process'); const express = require('express'); const cookieParser = require('cookie-parser'); const app = express(); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser("key")) app.set('trust proxy', false); app.set('views', process.cwd() + '/template'); app.set('view engine', 'html'); app.engine('html', (path, options, callback) => { callback(false, '<h1>Hello</h1>'); }); app.all('/', (req, res) => { let close = false; const f = () => { const t = new Date().getTime() + '\n'; res.write(t); console.log(t); if(!close){ setTimeout(f, 1000); } } req.on('close', () => { close = true; }); setTimeout(f, 1000); }); app.listen(8888);
req 挂了一些事件的,可以通过 close 事件来得到当前连接是否已经关闭了。
req 上直接挂连接事件,从 net http Express 这个层次结构上来说,也很,尴尬了。 Web 层不应该关心到网络连接这么底层的东西的。
我还是习惯这样:
app.all('/', (req, res) => { res.write('<h1>123</h1>'); res.end(); });
不过 res.write() 是不能直接处理 json 对象的,还是老老实实 res.send() 吧。
先说一下,我自己,目前在 Express 运用方面,并没有太多的时间和复杂场景的积累。
即使这样,作为技术上相对传统的人,我会以我以往的 web 开发的套路,来使用 Express 。
我不喜欢日常用 app.all(path, callback) 这种形式去组织代码。
首先,这会使 path 定义散落在各处,方便了开发,麻烦了维护。
其次,把 path 和具体实现逻辑 callback 绑在一起,我觉得也是反思维的。至少,对于我个人来说,开发的过程,先是想如何实现一个 handler ,最后,再是考虑要把这个 handle 与哪些 path 绑定。
再次,单纯的 callback 缺乏层次感,用 app.use(path, callback) 这种来处理共用逻辑的方式,我觉得完全是扯谈。共用逻辑是代码之间本身实现上的关系,硬生生跟网络应用层 HTTP 协议的 path 概念抽上关系,何必呢。当然,对于 callback 的组织,用纯函数来串是可以的,不过我在这方面并没有太多经验,所以,我还是选择用类继承的方式来作层次化的实现。
我自己要用 Express ,大概会这样组件项目代码(不包括关系数据库的 Model 抽象如何组织这部分):
./ ├── config.conf ├── config.js ├── handler │ ├── base.js │ └── index.js ├── middleware.js ├── server.js └── url.js
BaseHandler 的实现:
class BaseHandler { constructor(req, res, next){ this.req = req; this.res = res; this._next = next; this._finised = false; } run(){ this.prepare(); if(!this._finised){ if(this.req.method === 'GET'){ this.get(); return; } if(this.req.method === 'POST'){ this.post(); return; } throw Error(this.req.method + ' this method had not been implemented'); } } prepare(){} get(){ throw Error('this method had not been implemented'); } post(){ throw Error('this method had not been implemented'); } render(template, values){ this.res.render(template, values, (err, html) => { this.finish(html); }); } write(content){ if(Object.prototype.toString.call(content) === '[object Object]'){ this.res.write(JSON.stringify(content)); } else { this.res.write(content); } } finish(content){ if(this._finised){ throw Error('this handle was finished'); } this.res.send(content); this._finised = true; if(this._next){ this._next() } } } module.exports = {BaseHandler}; if(module === require.main){ const express = require('express'); const app = express(); app.all('/', (req, res, next) => new BaseHandler(req, res, next).run() ); app.listen(8888); }
要用的话,比如 index.js :
const BaseHandler = require('./base').BaseHandler; class IndexHandler extends BaseHandler { get(){ this.finish({a: 'hello'}); } } module.exports = {IndexHandler};
url.js 中的样子:
const IndexHandler = require('./handler/index').IndexHandler; const Handlers = []; Handlers.push(['/', IndexHandler]); module.exports = {Handlers};
后面这几部分,都不属于 Express 本身的内容了,只是我个人,随便想到的一些东西。
找一个日志模块的实现,功能上,就看这么几点:
Node.js 中,大概就是 log4js 了, https://github.com/log4js-node/log4js-node 。
const log4js = require('log4js'); const layout = { type: 'pattern', pattern: '- * %p * %x{time} * %c * %f * %l * %m', tokens: { time: logEvent => { return new Date().toISOString().replace('T', ' ').split('.')[0]; } } }; log4js.configure({ appenders: { file: { type: 'dateFile', layout: layout, filename: 'app.log', keepFileExt: true }, stream: { type: 'stdout', layout: layout } }, categories: { default: { appenders: [ 'stream' ], level: 'info', enableCallStack: false }, app: { appenders: [ 'stream', 'file' ], level: 'info', enableCallStack: true } } }); const logger = log4js.getLogger('app'); logger.error('xxx'); const l2 = log4js.getLogger('app.good'); l2.error('ii');
总的来说,还是很好用的,但是官网的文档不太好读,有些细节的东西没讲,好在源码还是比较简单。
说几点:
json 作配置文件,功能上没问题,但是对人为修改是不友好的。所以,个人还是喜欢用 ini 格式作项目的环境配置文件。
Node.js 中,可以使用 ini 模块作解析:
const s = ` [database] host = 127.0.0.1 port = 5432 user = dbuser password = dbpassword database = use_this_database [paths.default] datadir = /var/lib/data array[] = first value array[] = second value array[] = third value ` const fs = require('fs'); const ini = require('ini'); const config = ini.parse(s); console.log(config);
它扩展了 array[] 这种格式,但没有对类型作处理(除了 true false),比如,获取 port ,结果是 "5432" 。简单够用了。
Node.js 中的 WebSocket 实现,可以使用 ws 模块, https://github.com/websockets/ws 。
要把 ws 的 WebSocket Server 和 Express 的 app 整合,需要在 Express 的 Server 层面动手,实际上这里说的 Server 就是 Node.js 的 http 模块中的 http.createServer() 。
const express = require('express'); const ws = require('ws'); const app = express(); app.all('/', (req, res) => { console.log('/'); res.send('hello'); }); const server = app.listen(8888); const wss = new ws.Server({server, path: '/ws'}); wss.on('connection', conn => { conn.on('message', msg => { console.log(msg); conn.send(new Date().toISOString()); }); });
对应的一个客户端实现,来自: https://github.com/ilkerkesen/tornado-websocket-client-example/blob/master/client.py
# -*- coding: utf-8 -*- import time from tornado.ioloop import IOLoop, PeriodicCallback from tornado import gen from tornado.websocket import websocket_connect class Client(object): def __init__(self, url, timeout): self.url = url self.timeout = timeout self.ioloop = IOLoop.instance() self.ws = None self.connect() PeriodicCallback(self.keep_alive, 2000).start() self.ioloop.start() @gen.coroutine def connect(self): print("trying to connect") try: self.ws = yield websocket_connect(self.url) except Exception: print("connection error") else: print("connected") self.run() @gen.coroutine def run(self): while True: msg = yield self.ws.read_message() print('read', msg) if msg is None: print("connection closed") self.ws = None break def keep_alive(self): if self.ws is None: self.connect() else: self.ws.write_message(str(time.time())) if __name__ == "__main__": client = Client("ws://localhost:8888/ws", 5)
作者:zephyr
当今的前端开发中,了解后端技术对于全栈工程师来说至关重要。Express.js,作为Node.js的一个轻量级框架,以其简单、快速和灵活的特性受到了广大开发者的青睐。本文旨在通过15分钟的阅读,帮助你快速理解Express.js,掌握其基本用法,为全栈之路打下坚实基础。
一、Express.js简介
Express.js是一个基于Node.js平台的极简、灵活的web开发框架,它提供了一系列强大的特性,帮助开发者快速构建Web和移动应用程序。通过Express.js,我们可以轻松创建Web服务器,处理HTTP请求和响应,以及构建RESTful API等。
二、安装与设置
首先,确保你已经安装了Node.js。然后,通过npm(Node.js的包管理器)安装Express.js:
接下来,创建一个新的JavaScript文件(例如app.js),并引入Express模块:
三、基本路由
路由是Express.js的核心功能之一。它允许我们定义应用程序如何响应客户端发送的HTTP请求。下面是一个简单的路由示例:
上述代码定义了一个GET请求路由,当访问应用程序的根路径(/)时,服务器将返回"Hello World!"。
四、中间件
Express.js中的中间件是一种函数,它可以处理请求和响应,或者终止请求-响应周期。中间件在Express.js中扮演着非常重要的角色,用于执行各种任务,如日志记录、身份验证、错误处理等。
以下是一个简单的中间件示例,用于记录每个请求的URL:
app.use((req, res, next) => {
console.log(`Request URL: ${req.url}`);
next();
});
五、静态文件服务
Express.js还提供了静态文件服务功能,可以方便地为用户提供图片、CSS和JavaScript等静态资源。例如,以下代码将设置一个静态文件目录:
app.use(express.static('public'));
在上述设置中,Express.js将自动为public目录下的文件提供路由。
六、启动服务器
最后,我们需要监听一个端口以启动服务器。以下代码将启动一个监听3000端口的服务器:
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
七、总结
通过本文的介绍,你应该已经对Express.js有了一个初步的了解。当然,Express.js的功能远不止于此,还有更多高级特性和用法等待你去探索。不过,通过这15分钟的阅读,你已经迈出了全栈开发的重要一步。现在,你可以尝试使用Express.js构建一个简单的Web应用程序,将所学知识付诸实践。记住,全栈之路虽然充满挑战,但只要勇敢迈出第一步,就会发现其实并没有那么难。加油!
●express 是什么?
○是一个 node 的第三方开发框架
■把启动服务器包括操作的一系列内容进行的完整的封装
■在使用之前, 需要下载第三方
■指令: npm install express
1.基本搭建
// 0. 下载: npm install express
// 0. 导入
const express = express();
// 1. 创建服务器
const server = express();
// 2. 给服务器配置监听端口号
server.listen(8080, () => {
console.log("服务器启动成功");
});
2.配置静态资源
a.之前:
i.约定:
1.所有静态资源以 /static 开头
2.按照后面给出的文件名自己去组装的路径
ii.组装:
1.准备了初始目录 './client/'
2.按照后缀去添加二级目录
3.按照文件名去查找内容
iii.例子: /static/index.html
1.自动去 './client/views/index.html'
b.现在:
i.约定:
1.所有静态资源以 /static 开头
2.按照 /static 后面的路径去访问指定文件
3.要求: 在 /static 以后的内容需要按照 二级路径的正确方式书写
a. 假设你需要请求的是 './client/views/index.html' 文件
b.你的请求地址需要书写 '/static/views/index.html'
c.语法:
i. express.static('开放的静态目录地址')
ii.server.use('访问这个地址的时候', 去到开放的静态目录地址)
// 0. 下载: npm install express
// 0. 导入
// 1. 创建服务器
// 1.1 配置静态资源
server.use("/static", express.static("./client/"));
// 2. 给服务器配置监听端口号
3.配置接口服务器
// 0. 下载: npm install express
// 0. 导入
// 1. 创建服务器
// 1.1 配置静态资源
// 1.2 配置服务器接口
server.get("/goods/list", (req, res) => {
/**
* req(request): 本次请求的相关信息
* res(response): 本次响应的相关信息
*
* req.query: 对 GET 请求体请求参数的解析
* 如果有参数, req.query 就是 {a:xxx, b:yyy}
* 如果没有参数, req.query 就是 {}
*/
console.log(req.query);
// res.end(JSON.stringify({code: 1, msg: '成功'}))
res.send({ code: 1, msg: "成功" });
});
server.post("/users/login", (req, res) => {
console.log(req.query);
// 注意! express 不会自动解析 post 请求的 请求体
res.send({
code: 1,
msg: "接收 POST 请求成功, 但是还没有解析请求体, 参数暂时不能带回",
});
});
// 2. 给服务器配置监听端口号
●express 提供了一个方法能够让我们制作一张 "路由表"
●目的就是为了帮助我们简化 服务器index.js 内部的代码量
●服务器根目录/router/goods.js
// 专门存放于 goods 相关的路由表
const express = require("express");
// 创建一个路由表
const Router = express.Router();
// 向表上添加内容, 添加内容的语法, 向服务上添加的语法一样
Router.get("/info", (req, res) => {
res.send({
code: 1,
message: "您请求 /goods/list 成功",
});
});
// 导出当前路由表
module.exports.goodsRouter = Router
●服务器根目录/router/index.js
const express = require("express");
// 0. 导入处理函数
const { goodsRouter } = require("./goods");
// 创建路由总表
const Router = express.Router();
// 向路由总表上添加路由分表
Router.use("/goods", goodsRouter);
// 导出路由总表
module.exports = Router
●服务器根目录/index.js
// 0. 下载并导入 express
const express = require("express");
const router = require("./router"); // 相当于 ./router/index.js
// 1. 创建服务器
const server = express();
// 1.1 配置静态资源
server.use("/static", express.static("./client"));
// 1.2 配置接口
server.use("/api", router);
// 2. 给服务器监听端口号
server.listen(8080, () => {
console.log("服务启动成功, 端口号8080~~~");
});
express 的中间件
●概念
○在任意两个环节之间添加的一个环节, 就叫做中间件
●分类
○全局中间件
■语法: server.use(以什么开头, 函数)
●server: 创建的服务器, 一个变量而已
●以什么开头: 可以不写, 写的话需要是字符串
●函数: 你这个中间件需要做什么事
// 0. 下载并导入第三方模块
const express = require("express");
// 0. 引入路由总表
const router = require("./router");
// 0. 引入内置的 fs 模块
const fs = require("fs");
// 1. 开启服务器
const app = express();
// 1.1 开启静态资源
app.use("/static", express.static("./client/"));
// 1.2 添加一个 中间件, 让所有请求进来的时候, 记录一下时间与请求地址
app.use(function (req, res, next) {
fs.appendFile("./index.txt", `${new Date()} --- ${req.url} \n`, () => {});
next(); // 运行完毕后, 去到下一个中间件
});
// 1.3 开启路由表
app.use("/api", router);
// 2. 给服务添加监听
app.listen(8080, () => console.log("服务器开启成功, 端口号8080~"));
○路由级中间件
■语法: router.use(以什么开头, 函数)
●router: 创建的路由表, 一个变量而已
●以什么开头: 可以不写, 写的话需要是字符串
●函数: 你这个中间件需要做什么事
// 路由分表
const router = require("express").Router();
// 导入 cart 中间件
const cartMidd = require("../middleware/cart");
// 添加路由级中间件
router.use(function (req, res, next) {
/**
* 1. 验证 token 存在并且没有过期才可以
* 规定: 请求头内必须有 authorization 字段携带 token 信息
*/
const token = req.headers.authorization;
if (!token) {
res.send({
code: 0,
msg: "没有 token, 不能进行 该操作",
});
}
next();
});
router.get("/list", cartMidd.cartlist, (req, res) => {
res.send({
code: 1,
msg: "请求 /cart/list 接口成功",
});
});
router.get("/add", (req, res) => {
res.send({
code: 1,
msg: "请求 /cart/add 接口成功",
});
});
module.exports.cartRouter = router;
○请求级中间件
■直接在请求路由上, 在路由处理函数之前书写函数即可
// 路由分表
const router = require("express").Router();
// 导入 cart 中间件
const cartMidd = require("../middleware/cart");
router.get("/list", cartMidd.cartlist, (req, res) => {
res.send({
code: 1,
msg: "请求 /cart/list 接口成功",
});
});
router.get("/add", (req, res) => {
res.send({
code: 1,
msg: "请求 /cart/add 接口成功",
});
});
module.exports.cartRouter = router;
// ../middleware/cart.js
const cartlist = (req, res, next) => {
// 1. 判断参数是否传递
const { current, pagesize } = req.query;
if (!current || !pagesize) {
res.send({
code: 0,
msg: "参数current或者参数pagesize没有传递",
});
return;
}
if (isNaN(current) || isNaN(pagesize)) {
res.send({
code: 0,
msg: "参数current或者参数pagesize 不是 数字类型的, 请处理",
});
return;
}
next();
};
module.exports.cartlist = cartlist
○错误中间件
■本质上就是一个全局中间件, 只不过处理的内容
// 0. 下载并导入第三方模块
const express = require("express");
// 0. 引入路由总表
const router = require("./router");
// 0. 引入内置的 fs 模块
const fs = require("fs");
// 1. 开启服务器
const app = express();
// 1.1 开启静态资源
app.use("/static", express.static("./client/"));
// 1.2 开启路由表
app.use("/api", router);
// 1.3 注册全局错误中间件(必须接收四个参数)
app.use(function (err, req, res, next) {
if (err === 2) {
res.send({
code: 0,
msg: "参数current或者参数pagesize没有传递",
});
} else if (err === 3) {
res.send({
code: 0,
msg: "参数current或者参数pagesize 不是 数字类型的, 请处理",
});
} else if (err === 4) {
res.send({
code: 0,
msg: "没有 token, 不能进行 该操作",
});
}
});
// 2. 给服务添加监听
app.listen(8080, () => console.log("服务器开启成功, 端口号8080~"));
/*
* 4. 错误中间件
* 为了统一进行错误处理
*
* 例子:
* 接口参数少
* 请求 /goods/list 参数少
* 请求 /cart/list 参数少
* 请求 /news/list 参数少
* res.send({code: 0, msg: '参数数量不对'})
* 接口参数格式不对
* 请求 /users/login 格式不对
* 请求 /goods/list 格式不对
* res.send({code: 0, msg: '参数格式不对})
*
* 思考:
* 正确的时候, 直接返回结果给前端
* 只要出现了错误, 统一回到全局路径上
*
* 操作:
* 当你在任何一个环节的中间件内
* => 调用 next() 的时候, 表示的都是去到下一个环节
* => 调用 next(参数) 的时候, 表示去到的都是全局错误环节
* 参数:
* 参数的传递需要自己和自己约定一些暗号
* 2: 表示 接口参数少
* 3: 表示 接口参数格式不对
* 4: 表示没有token
* 5: XXXX....
*/
token 的使用
●token 的使用分为两步
○加密
■比如用户登陆成功后, 将一段信息加密生成一段 token, 然后返回给前端
○解密
■比如用户需要访问一些需要登陆后才能访问的接口, 就可以把登录时返回的token保存下来
■在访问这些接口时, 携带上token即可
■而我们接收到token后, 需要解密token, 验证是否为正确的 token 或者 过期的 token
1.加密
/**
* 使用一个 第三方包 jsonwebtoken
*/
const jwt = require("jsonwebtoken");
/**
* 1. 加密
* 语法: jwt.sign(你要存储的信息, '密钥', {配置信息})
*/
const info = { id: 1, nickname: "肠旺面" };
const token = jwt.sign(info, "XXX", { expiresIn: 60 });
// console.log(token);
/*
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJpZCI6MSwibmlja25hbWUiOiLogqDml7rpnaLliqDnjKrohJoiLCJpYXQiOjE2NzAxNTYwMDgsImV4cCI6MTY3MDE1NjA2OH0.
12-87hSrMYmpwXRMuYAbf08G7RDSXM2rEI49jaK5wMw
*/
2.解密
*请认真填写需求信息,我们会在24小时内与您取得联系。