Express.js 入门教程之使用 express-generator 脚手架

阅读时长 5 分钟读完

Express.js 是一个非常流行的 Node.js 的 web 应用程序框架,它能帮助我们快速地搭建 web 应用程序。使用 Express.js 能有效地简化我们的开发流程,并且它是一个非常灵活的框架,可以根据不同的需求进行扩展和自定义。

在本文中,我将介绍如何使用 express-generator 脚手架快速生成一个 Express.js 应用程序,并且通过示例代码演示如何使用这个应用程序搭建一个简单的 web 页面。

安装 Express.js 和 express-generator

在开始之前,请确保你已经安装了 Node.js 和 npm(包管理器),如果没有请先下载安装 Node.js

安装完成 Node.js 和 npm 之后,我们就可以使用 npm 来安装 Express.js 和 express-generator 了。打开终端(或命令提示符),输入下面的命令:

这个命令会全局安装 Express.js 和 express-generator,-g 表示全局安装。

生成一个 Express.js 应用程序

安装完成 express-generator 后,我们就可以使用它来快速生成一个 Express.js 应用程序了。在终端输入下面的命令:

这个命令将在当前目录下生成一个名为 myapp 的 Express.js 应用程序。执行完命令后,终端会输出很多信息,其中包括应用程序的目录结构和依赖包等信息。

运行 Express.js 应用程序

完成应用程序的生成后,我们就可以运行它来查看效果了。在终端输入下面的命令:

这个命令会进入应用程序的目录,安装依赖包并启动应用程序。执行完命令后,在浏览器中输入 http://localhost:3000/ 即可访问这个应用程序。

修改 Express.js 应用程序

生成的应用程序是一个基础的 Express.js 应用程序,它包含了一些默认的路由和中间件。我们可以修改它来满足我们的需求。

修改路由

在应用程序的目录结构中,routes 文件夹下包含了默认的路由文件 index.js。这个文件中定义了一个根路由和一个 users 路由。

我们可以修改这个文件来定义自己的路由。例如,我们在 routes 文件夹下新建一个 test.js 文件,内容如下:

这个文件定义了一个根路由,访问 / 路径时返回一个 hello world from test! 的字符串。

然后在 app.js 文件中引入这个路由:

这个语句定义了一个 /test 路由,引用了我们刚才定义的 test.js 文件。运行应用程序并访问 http://localhost:3000/test ,你应该能看到 hello world from test! 字符串出现在页面上。

使用模板引擎

默认情况下,Express.js 使用的是 Jade 作为应用程序的模板引擎。我们也可以使用其他的模板引擎,例如 EJS(Embedded JavaScript)。

在应用程序的目录结构中,views 文件夹下包含了默认的 Jade 模板。

我们可以通过下面的命令来安装 EJS 模板引擎:

接着,在 app.js 文件中设置 EJS 模板引擎:

然后我们可以在 views 文件夹下新增一个 index.ejs 文件,内容如下:

-- -------------------- ---- -------
--------- -----
------
------
  ---------- ----- ----------
  ----- ---------------- ----------------------------- --
-------
------
  ------- ------- -------
-------
-------
展开代码

这个页面使用了 EJS 的语法,通过 <%= %> 输出了 titlemessage 变量。接着,在 routes 文件夹下的 index.js 文件中修改根路由:

这个代码中使用了 EJS 模板引擎的 render() 方法,将 index.ejs 文件渲染成 HTML 页面并返回到客户端。访问 http://localhost:3000/ ,你应该能看到一个包含 Hello World 文本的网页了。

总结

在本文中,我们介绍了如何使用 Express.js 和 express-generator 脚手架快速生成一个 Express.js 应用程序,并且演示了如何修改路由和使用模板引擎。

使用 Express.js 开发 web 应用程序非常方便,可以大大提高开发效率。如果你想深入了解 Express.js 的其他功能,请查看官方文档和 API 文档,这些文档非常详尽,可以让你更快地掌握 Express.js。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6492ace248841e9894078bc1

纠错
反馈

纠错反馈