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 了。打开终端(或命令提示符),输入下面的命令:
npm install express express-generator -g
这个命令会全局安装 Express.js 和 express-generator,-g
表示全局安装。
生成一个 Express.js 应用程序
安装完成 express-generator 后,我们就可以使用它来快速生成一个 Express.js 应用程序了。在终端输入下面的命令:
express myapp
这个命令将在当前目录下生成一个名为 myapp
的 Express.js 应用程序。执行完命令后,终端会输出很多信息,其中包括应用程序的目录结构和依赖包等信息。
运行 Express.js 应用程序
完成应用程序的生成后,我们就可以运行它来查看效果了。在终端输入下面的命令:
cd myapp
npm install
npm start
这个命令会进入应用程序的目录,安装依赖包并启动应用程序。执行完命令后,在浏览器中输入 http://localhost:3000/
即可访问这个应用程序。
修改 Express.js 应用程序
生成的应用程序是一个基础的 Express.js 应用程序,它包含了一些默认的路由和中间件。我们可以修改它来满足我们的需求。
修改路由
在应用程序的目录结构中,routes
文件夹下包含了默认的路由文件 index.js
。这个文件中定义了一个根路由和一个 users 路由。
我们可以修改这个文件来定义自己的路由。例如,我们在 routes
文件夹下新建一个 test.js
文件,内容如下:
var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.send('hello world from test!'); }); module.exports = router;
这个文件定义了一个根路由,访问 /
路径时返回一个 hello world from test!
的字符串。
然后在 app.js
文件中引入这个路由:
var testRouter = require('./routes/test'); app.use('/test', testRouter);
这个语句定义了一个 /test
路由,引用了我们刚才定义的 test.js
文件。运行应用程序并访问 http://localhost:3000/test
,你应该能看到 hello world from test!
字符串出现在页面上。
使用模板引擎
默认情况下,Express.js 使用的是 Jade 作为应用程序的模板引擎。我们也可以使用其他的模板引擎,例如 EJS(Embedded JavaScript)。
在应用程序的目录结构中,views
文件夹下包含了默认的 Jade 模板。
我们可以通过下面的命令来安装 EJS 模板引擎:
npm install ejs --save
接着,在 app.js
文件中设置 EJS 模板引擎:
// 设置 EJS 模板引擎 app.set('view engine', 'ejs');
然后我们可以在 views
文件夹下新增一个 index.ejs
文件,内容如下:
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ----- ---------------- ----------------------------- -- ------- ------ ------- ------- ------- ------- -------展开代码
这个页面使用了 EJS 的语法,通过 <%= %>
输出了 title
和 message
变量。接着,在 routes
文件夹下的 index.js
文件中修改根路由:
router.get('/', function(req, res, next) { res.render('index', { title: 'Express', message: 'Hello World' }); });
这个代码中使用了 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