跳到主要内容

开始使用Express.JS

Get started with Express.JS

使用Node.JS创建面向浏览器的应用程序变得乏味。Express.JS是一个JavaScript框架致力于Node.JS环境中托管的单页和多页应用程序。

它提供了一层薄薄的基本Web应用程序功能,这些功能不会掩盖您已经熟悉的Node.JS功能,因此您可以确保完成的应用程序在性能方面具有优势。由于可以使用一堆HTTP实用程序方法和中间件,它也非常适合创建健壮的API。

想要开始?这是你需要知道的。

01.生成可行的结构

Get started with Express.JS: Generate a workable structure

介绍正确的工作选项以开始使用

Express.JS以“不受欢迎”为傲 - 也就是说,该框架允许开发人员在架构,模板和标记引擎方面进行混合和匹配。可悲的是,强大的力量带来了巨大的责任。

Express开发团队试图通过引入项目生成器来缓解这一打击。它以NPM包的形式出现在您的工作站上,并将通过以下框架帮助我们进行实验:

tamhan @ tamhan-thinkpad:〜/ Desktop / Stuff / 2018Aug / FutureExpressJS / workspace $ sudo npm install express-generator -g

该生成器还包含许多项目选项 - 此步骤附带的图显示了完整的帮助输出。为简单起见,我们将自己限制为基于默认设置的项目。通过以下方式启动其生成过程:

tamhan @ tamhan-thinkpad:〜/ Desktop / Stuff / 2018Aug / FutureExpressJS / workspace $ express futuretest

警告:在将来的版本中,默认视图引擎不会是Jade。

完成后,当前工作目录包含一个名为“futuretest”的新文件夹。它是我们测试项目的所在地,必须使用NPM的软件包下载命令进行配置。在撰写本文时,生成器包括Jade视图生成器 - 项目计划在不久的将来更改它,您必须传入一个选择预期视图引擎的参数。或者,请求使用Pug - 它是Jade引擎的官方继承者:

cd futuretest / npm install

02.了解应用程序结构

现在项目生成器完成了它的工作,让我们在选择的编辑器中打开App.js。它的 - 很少删节 - 结构呈现如下:

var indexRouter = require('./ routes / index'); var usersRouter = require('./ routes / users'); var app = express(); //查看引擎设置app.set('views',path.join(__ dirname,'views')); app.set('view engine','jade'); app.use(记录器( 'dev的')); app.use(express.json()); app.use(express.urlencoded({extended:false})); app.use(cookieParser()); app.use(express.static(path.join(__ dirname,'public')));

Express.JS是高度模块化的。 App.js用作入口点,其中一个或多个'use()'函数允许添加旨在处理各种请求的组件。 'set()'的调用允许您调整引擎中的参数 - 其中之一是安装上一步中提到的Jade视图引擎。

Web内容的实际发送在路由器类中进行。为简洁起见,我们将自己局限于Index.js:

var express = require('express'); var router = express.Router(); router.get('/',function(req,res,next){res.render('index',{title:'Express'});}); module.exports = router;

'get()'提供了一个匹配器字符串和一个事件处理程序,只要发生相应的事件就会调用它。在我们的例子中,被告知所选模板引擎的render方法将内容返回给登录用户的浏览器。

03.运行网页

此时,我们已准备好首次访问该网站。返回包含Express.JS安装的终端,并在设置调试标志的情况下调用NPM start:

DEBUG = myapp:* npm start

完成后,在所选的浏览器中输入http:// Localhost:3000 /,以查看项目生成器创建的脚手架。完成后,按CTRL+C关闭窗口并将控制权返回给命令行解释器 - 请记住,这也会关闭调试Web服务器。

04.这都是关于路由和端点的

Get started with Express.JS: Routing and endpoints

对正确的入口点进行排序,添加新路径并引入正则表达式支持

为简单起见,我们同意Web应用程序通常由一系列入口点组成。 Express.JS通过路由器类处理这些 - 将其视为响应传入请求而被调用的方法的存储库。

通过向队列中添加新工作程序来完成向应用程序添加新端点。我们自动生成的示例创建了两种路由器类型,每种类型都使用'require'方法引发:

var indexRouter = require('./ routes / index'); var usersRouter = require('./ routes / users');

在下一步中,'app.use'注册路由器并将它们连接到请求字符串。我们的代码还添加了一个错误处理程序,如果在系统中输入了不存在的URL,则会调用该错误处理程序:

app.use('/',indexRouter); app.use('/ users',usersRouter); app.use(function(req,res,next){next(createError(404));});

05.创建一条新路线

打开Users.js,并修改其代码如下:

router.get('/ user1',function(req,res,next){res.send('Future say Hello 1');}); router.get('/',function(req,res,next){res.send('response with a resource');});

向Express.JS添加新路线是一个机械过程。获取所选的路由器对象,并调用与您要寻求处理的HTTP谓词对应的方法。接下来,传入一个字符串,该字符串将添加到使用'app.use'注册的'offset'。从那一刻开始,http:// localhost:3000 / users / user1和http:// localhost:3000 / users /都返回有效的响应。

请记住,Express.JS不仅限于处理'GET'资源。 'post()','put()'和'delete()'处理传统的四个HTTP请求,还有许多额外的动词方法可以满足更多不寻常的需求。最后,'req'对象提供对请求标头的访问 - 在解析参数或客户端信息时可以很好地使用它。

06.高级匹配

随着程序复杂性的增加,手动添加路径变得乏味。 Express.JS通过引入通配符和正则表达式支持来迎合这个问题。例如,查看以下声明,该声明使用正则表达式来匹配包含字符序列dog的各种字符串。

app.get(/.* dog $ /,function(req,res){...})

07.异常路由

虽然处理这四个HTTP请求对任何人来说应该足够了(比尔盖茨提示),Express.JS也可以使用其他协议。EXPRESS-WS对于本节来说,它是一个特别美味的候选者 - 它扩展了Express.JS的范围,包括WebSocket通信。

将插件添加到主Express.JS项目后,通过“require”调用即可启用它。它返回一个包含除一个方法之外的所有方法的辅助对象 - 调用它来建立路由器和插件之间的连接:

var expressWs = require('express-ws')app);之后,可以调用一个名为'ws()'的新方法来添加基于WebSocket技术的新路由:app.ws('/',function(ws,req){ws.on('message',function(msg) ){console.log(msg);}); console.log('socket',req.testing);});

由于存在'ws'对象,它们的原型与正常路由不同 - 它提供对连接到负责连接的客户端的底层WebSocket实例的访问。

08.集成数据库和模板引擎

Get started with Express.JS: Integrate databases and templating engines

一定要利用丰富的插件生态系统的力量

基于Node.JS意味着在处理基于Web的应用程序时,您可以使用丰富的插件生态系统。例如,访问SQL和NoSQL数据库 - 通常是一项非常繁琐的任务 - 可以使用数据库供应商提供的插件来处理。实际部署就像安装所需的NPM模块一样简单 - 如果您的代码是访问Redis数据库,只需添加以下内容:

var redis = require('redis')var client = redis.createClient()client.set('stringKey','aVal',redis.print)。 。 。

当然,也支持内存中的SQLite:

var sqlite3 = require('sqlite3')。 verbose()var db = new sqlite3。数据库(':memory:')db.serialize(function(){db.run('CREATE TABLE lorem(info TEXT)')

请记住,Node.JS集成不仅限于数据库插件。喜欢冒险的开发人员可以包括像Tessel这样的产品,从而创建可以与之交互的Web应用程序物联网设备。

09.模仿风格

简单和真实程序不同的一个领域是视图的创建。虽然一个小的示例项目通常使用手工制作的字符串,但是用一串连接的东西组装大量的HTML是非常烦人的。

模板引擎提供了一个简洁的解决方法。它们允许创建预定义的模式文件,可以在执行时以编程方式填充。

对于我们的示例程序,视图位于.jade文件中。开盘指数显示以下结构:

扩展布局块内容h1 = title p欢迎来到#{title}

括在大括号中的表达式充当模板字段,其值将在运行时替换。 Index.js使用参数对象调用render,从而导致呈现此步骤附带的图中所示的起始页:

router.get('/',function(req,res,next){res.render('index',{title:'Express'});});

大多数模板引擎在提供项模板时也可以解析数组。在这种情况下,数组的每一行都显示一个DOM模型实例 - 与Android中的列表显示模型的相似之处纯属巧合。 Express.JS不限于预定义的模板引擎。如果您想出于某种原因推出自己的产品,只需按照概述的步骤操作即可这里- 原则上,您必须覆盖除一个函数之外的所有函数。

10.处理静态内容

Express.JS应用程序往往包含CSS文件和图片。通过Render函数提供这些功能效率很低 - 更智能的方法是使用传统的HTTP请求以快乐的方式发送它们。这可以通过'express.static()'函数来实现,该函数可以标记整个文件夹以便导出:

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

11.修改事件流

最后,请允许我们稍后提及术语中间件。在Express.JS的说法中,中间件是一组一个或多个组件,它们将自身集成到相反的流程图中。然后,它们可用于在请求通过路由系统时对其进行修改 - 如果正确实施,则可以实现无限的功能。

此外,可以找到一些现成的组件这里- 在开始大规模开发项目之前访问该网站。

12.如何托管Express.JS应用程序

Get started with Express.JS: How to host an Express.JS app

考虑可以托管新创建的平台

测试基于Express.JS的应用程序很容易。一旦您希望第三方可以访问该页面,就会出现问题 - 由于它是由Node.JS环境生成的,因此无法获得适合FTP部署到Web托管服务的静态映像。

理论上,没有什么可以反对使用Raspberry Pi,OrangePi,专用服务器或从云服务租用的虚拟机或提供虚拟主机的Web主机提供商。但是,租用完整的虚拟机可能会使您承担保持执行环境和操作系统最新的责任。

如果这项任务不符合您的口味,那么平台即服务提供商可能更具吸引力(尽管在大多数情况下,价格相当昂贵)。

许多开发人员认为Heroku,其附带的图中显示的定价,是与Node.JS托管相关的所有内容的黄金标准。

然而,事实上这有点不公平 - 亚马逊的Elastic Beanstalk,谷歌的云平台和微软的Azure都为远程执行基于Node.JS的有效载荷提供了类似的支持。在所有这些系统中,主要问题是处理 - 虽然Azure以其缓慢的部署而闻名,但其他提供商却给开发人员带来了极其复杂的配置系统难以使用的后端服务。

此外,受支持的Node.JS环境版本因提供商而异。当然,我们没有足够的空间来深入讨论这个话题。访问Mozilla的部署教程和Express.JS'性能和可靠性安全涉及的一些问题的最佳实践页面。请务必查看提供商的文档,以收集更多最佳实践。

13.面向未来的应用程序

Get started with Express.JS: Future-proof your applications

需要注意许多新增内容

Express.JS的开发周期远非平稳:开发人员因频繁的API更改而闻名,需要重写客户端代码。从3.x切换到4.x特别痛苦,这就是为什么即将发布的5.x可能会让你感到很不舒服。

虽然Express.JS 5.0带来了一些重大变化,但它们的影响更为有限。首先,已经删除了一组已经弃用的函数 - 如果代码仍然使用它们,则升级到5.x需要维护。

视图引擎的设计者需要检查'res.render():'关于视图渲染器的排名增长,这导致一些同步实现滑落。该框架的第5版通过实施异步呈现来增强性能。

除此之外,还记录了一系列各种改进和变化这里看到以前版本中一些已经灭绝的功能的回归 - 此外,一些长期存在的错误将在新版本中得到修复。

最后,请注意您已经可以尝试新版本。只需创建源代码的副本,获取终端并输入以下命令即可下载档案中几乎没有经过测试的前沿JavaScript。注意安全。

$ npm install express @> = 5.0.0- alpha.1 --save

本文最初发表于创意网页设计杂志Web Designer的第279期。在这里购买问题279要么在这里订阅Web Designer

相关文章:



翻译字数超限