Node.js使用Express创建Web项目详细教程

以下是关于如何使用Express创建Web项目的详细攻略：

什么是Express？

Express是Node.js的一个开源网络应用程序框架，它可以帮助我们方便快捷地创建Web应用程序。

步骤1：安装Node.js和npm

在使用Express之前，我们需要先安装Node.js和npm。具体安装方法可以参考官方文档：https://nodejs.org/。

步骤2：创建工程

在终端中，使用以下命令创建一个新的Express应用程序：

$ npm install -g express-generator
$ express myapp

其中，myapp是项目的名称，可以自己根据需要进行修改。

步骤3：启动应用程序

进入到myapp目录中，使用以下命令启动应用程序：

$ cd myapp
$ npm install
$ npm start

然后在浏览器中访问http://localhost:3000，就可以看到Express应用程序的欢迎页面了。

步骤4：路由

像大多数Web应用程序一样，Express应用程序也需要路由来决定如何响应客户端的请求。在Express中，可以使用路由来定义API和页面的路径。

下面是一个简单的示例，定义了一个“/”路径的路由，返回一个Hello World字符串：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('Hello World');
});

module.exports = router;

步骤5：模板引擎

在创建Web应用程序时，我们通常需要使用模板引擎将动态内容渲染到HTML页面中。在Express中，可以使用EJS、Handlebars等多种模板引擎。

下面是一个使用EJS的示例，将一个变量渲染到HTML页面中：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

// routes/index.js
var express = require('express');
var router = express.Router();

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

module.exports = router;

步骤6：静态文件

在Web应用程序中，有很多静态文件如CSS、JavaScript、图片等需要被加载，而这些文件通常都放在public目录下。

在Express中，可以通过以下方式来设置静态文件的目录：

app.use(express.static(path.join(__dirname, 'public')));

示例1：创建一个简单的API

接下来，我们以创建一个简单的API为例，说明如何使用Express。

在myapp目录中创建一个新的路由文件users.js，定义了一个简单的API。

// routes/users.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res) {
  res.send('respond with a resource');
});

module.exports = router;

在app.js中加载这个路由文件。

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

运行应用程序，并在浏览器中访问http://localhost:3000/users，就可以看到API的响应结果了。

示例2：使用EJS模板引擎

下面以使用EJS模板引擎为例，说明如何在Express中使用模板引擎。

在views目录下创建一个名为users.ejs的文件，定义了一个HTML页面。

<!-- views/users.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>User List</title>
  </head>
  <body>
    <ul>
      <% for(var i=0; i<users.length; i++) { %>
        <li><%= users[i] %></li>
      <% } %>
    </ul>
  </body>
</html>

在users.js中，定义了一个路由，返回一个包含用户列表的数组。

// routes/users.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('users', { users: ['Jack', 'Lucy', 'Tom'] });
});

module.exports = router;

运行应用程序，并在浏览器中访问http://localhost:3000/users，就可以看到渲染后的用户列表页面了。

以上就是使用Express创建Web项目的详细攻略。希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js使用Express创建Web项目详细教程 - Python技术站