介绍
Express 是一个非常流行的 Node.js Web 框架。它提供了丰富的 API 和插件来帮助开发者快速构建高效、可靠和易于维护的 Web 应用程序。而 express-gen
则是一个可以快速生成基于 Express 的 Web 应用程序的 npm 包。在本文中,我们将细致地讲解如何使用 express-gen
创建 Express 应用程序,并使用一些示例代码来演示一些常见的用例。
安装
在开始之前,首先需要确保您已经成功安装了 Node.js 和 npm。如果您还没有安装,请先下载并安装。
接下来,打开终端或命令行工具,输入以下命令来全局安装 express-gen
:
npm install -g express-gen
当安装完成后,您可以验证其是否安装成功,可以输入以下命令查看版本号:
express-gen --version
如果输出版本号,则说明 express-gen
安装成功。
创建 Express 应用
在成功安装 express-gen
后,就可以使用它来创建新的 Express 应用程序。首先,进入您想要创建应用程序的目录,然后运行以下命令:
express-gen myapp
这里的 myapp
是指应用程序的名称,你可以随意更改它。当命令执行完成后,express-gen
将会在当前目录创建一个名为 myapp
的新目录。这个目录将包含用于启动新应用程序的所有必要文件和文件夹。
接下来,进入新创建的 myapp
目录,运行以下命令来安装 Express 应用程序所需的所有依赖项:
npm install
在安装完成后,您就可以在浏览器中通过访问 http://localhost:3000
来查看新创建的应用程序了。
添加用于请求处理的路由
新创建的 Express 应用程序包含一个默认的路由,用于响应来自根 URL 的请求。如果您想要添加其他路由来处理其他 URL,可以根据以下步骤来完成。
首先,打开 routes/index.js
文件,可以看到默认路由的代码:
-- -------------------- ---- ------- --- ------- - ------------------- --- ------ - ----------------- -- --- ---- ----- -- --------------- ------------- ---- ----- - ------------------- - ------ --------- --- --- -------------- - -------
这里的 router.get()
方法用于定义一个用于处理 get
请求的路由。它接受两个参数,第一个是要匹配的 URL(这里是根 URL),第二个是一个回调函数,用于处理这个 URL 的请求。在这个回调函数中,我们使用 res.render()
方法来呈现一个名为 index
的视图文件,同时还向视图中传递了一个标题参数。当用户访问根 URL 时,将显示这个视图。
要添加其他路由,只需向 routes/index.js
中添加其他 router.get()
或 router.post()
方法即可。例如,要添加一个用于处理 /users
URL 的路由,可以添加以下代码:
router.get('/users', function(req, res, next) { res.render('users', { title: 'Users' }); });
这里的回调函数与默认路由相同,只是 URL 发生了改变。当用户访问 /users
URL 时,将显示名为 users
的视图。
添加页面模板
默认情况下,Express 应用程序不包含任何页面模板文件。如果您想要呈现视图文件,并向其中传递数据,您需要为应用程序添加一个模板引擎。这里我们以 EJS(Embedded JavaScript Templates)为例,来演示如何添加模板引擎。
首先,在根目录下创建一个名为 views
的文件夹,在该文件夹中创建一个名为 index.ejs
的文件,内容如下:
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ----- ---------------- ----------------------------- -- ------- ------ ------- ----- ------- ---------- -- --- ----- ------ ------- -------
这里的 <%= title %>
将被实际的标题替换。为了让服务器知道该文件是一个 EJS 模板,需要在 app.js
文件中添加以下代码:
var ejs = require('ejs'); app.set('view engine', 'ejs');
这里,我们使用 app.set()
方法来设置 view engine
属性,并将其值设置为 ejs
。这告诉 Express 使用 EJS 作为视图引擎。接下来,把路由中 res.render()
的第一个参数改为 'index'
,用于告诉 Express 呈现 views/index.ejs
文件。
router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });
使用中间件
Express 中的中间件是一种可以处理请求和响应的函数。它们可以执行一些额外的操作,在请求到达处理请求的路由之前或之后执行。在 express-gen
中,我们可以使用默认的中间件或自定义中间件。接下来,我们看一下如何添加自定义中间件。
首先,在根目录下创建一个名为 middleware
的目录,然后在该目录中创建一个名为 logger.js
的文件,内容如下:
module.exports = function(req, res, next) { console.log(req.method, req.url); next(); };
这里,我们定义了一个名为 logger
的中间件函数,它会在每个请求到达服务器时记录请求的方法和 URL,然后调用 next()
函数。这个 next()
函数用于告诉 Express 继续处理请求,并将其传递给下一个中间件函数或路由处理器函数。
要在应用程序中使用这个中间件,只需在 app.js
文件中添加以下代码:
var logger = require('./middleware/logger'); app.use(logger);
这里,我们使用 app.use()
方法将 logger
中间件函数添加到应用程序的 middleware
中。现在,每当请求到达服务器时,都会在控制台中记录它。
结束语
通过使用 express-gen
,我们可以快速且轻松地构建基于 Express 的应用程序。我们在本文中讲解了如何安装、创建应用程序、添加路由、添加页面模板和使用中间件。这些知识可以帮助您快速入门 Node.js 和 Express,并帮助您构建更好的 Web 应用程序。如果您想要进一步学习 Node.js 和 Express,请查看官方网站,其中包含了丰富的参考文档和教程。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600555af81e8991b448d2c9f