express框架项目搭建实训报告

实训报告：使用 Express 框架搭建 Web 项目

一、实验目的

通过本次实训，学生应该掌握以下技能：

1. 使用 Express 框架搭建 Web 项目；
2. 使用路由来处理不同的 HTTP 请求；
3. 使用模板引擎来渲染页面；
4. 使用中间件来处理请求和响应；
5. 实现基本的用户认证和授权。

二、实验环境

1. 操作系统：Windows 或 macOS；
2. 开发工具：Visual Studio Code；
3. 语言：Node.js 和 JavaScript。

三、实验步骤

1. 创建新项目

在 Visual Studio Code 中创建一个新的文件夹并打开终端。在终端中使用 `npm init` 命令初始化项目，并根据提示输入项目信息。接着，使用 `npm install express --save` 命令安装 Express 框架。

2. 创建主文件

在项目根目录下创建一个名为 `app.js` 的文件，并添加以下代码：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

在这个例子中，我们创建了一个简单的 Express 应用程序，并在根路径上添加了一个路由，响应一个字符串。然后，我们使用 `app.listen()` 方法来监听端口 3000。

3. 添加路由

我们可以使用路由来处理不同的 HTTP 请求。在 `app.js` 文件中，添加以下代码：

// 处理 GET 请求
app.get('/users', (req, res) => {
  res.send('Get a list of users');
});

// 处理 POST 请求
app.post('/users', (req, res) => {
  res.send('Create a new user');
});

// 处理 PUT 请求
app.put('/users/:id', (req, res) => {
  res.send(`Update a user with ID ${req.params.id}`);
});

// 处理 DELETE 请求
app.delete('/users/:id', (req, res) => {
  res.send(`Delete a user with ID ${req.params.id}`);
});

在这个例子中，我们定义了四个路由来处理 GET、POST、PUT 和 DELETE 请求。其中，PUT 和 DELETE 请求通过 URL 中的参数来指定要操作的资源的 ID。

4. 使用模板引擎

Express 框架支持多种模板引擎，如 EJS、Pug、Handlebars 等。在本次实训中，我们使用 EJS 模板引擎来渲染页面。首先，使用 `npm install ejs --save` 命令安装 EJS 模板引擎。然后，在 `app.js` 文件中添加以下代码：

// 设置模板引擎
app.set('view engine', 'ejs');

// 渲染页面
app.get('/users', (req, res) => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
  res.render('users', { users });
});

在这个例子中，我们使用 `app.set()` 方法来设置模板引擎为 EJS。然后，在 `/users` 路由中，我们定义了一个数组 `users`，并将其传递给 EJS 模板引擎进行渲染。最后，我们使用 `res.render()` 方法来渲染页面，并将渲染后的 HTML 响应给客户端。

5. 使用中间件

Express 框架允许我们使用中间件来处理请求和响应。在 `app.js` 文件中，添加以下代码：

// 记录请求日志
app.use((req, res, next) => {
  console.log(`${new Date().toISOString()}: ${req.method} ${req.url}`);
  next();
});

// 处理静态文件
app.use(express.static('public'));

在这个例子中，我们定义了两个中间件。第一个中间件用来记录请求日志，它会在每个请求到达时输出请求的时间、请求方法和 URL。第二个中间件用来处理静态文件，它会将请求的 URL 映射到项目根目录下的 `public` 文件夹中。

6. 实现用户认证和授权

在本次实训中，我们使用 Passport.js 库来实现用户认证和授权。首先，使用 `npm install passport passport-local passport-local-mongoose express-session --save` 命令安装所需的库和插件。然后，在 `app.js` 文件中添加以下代码：

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session');
const mongoose = require('mongoose');
const User = require('./models/user');

// 连接 MongoDB 数据库
mongoose.connect('mongodb://localhost/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => {
  console.log('Connected to MongoDB');
}).catch((err) => {
  console.error('Failed to connect to MongoDB', err);
});

// 配置 Passport.js
const strategy = new LocalStrategy({
  usernameField: 'email',
  passwordField: 'password'
}, async (email, password, done) => {
  try {
    const user = await User.findOne({ email });
    if (!user) {
      return done(null, false, { message: 'Incorrect email or password.' });
    }
    const isMatch = await user.comparePassword(password);
    if (!isMatch) {
      return done(null, false, { message: 'Incorrect email or password.' });
    }
    return done(null, user);
  } catch (err) {
    return done(err);
  }
});
passport.use(strategy);
passport.serializeUser((user, done) => {
  done(null, user.id);
});
passport.deserializeUser(async (id, done) => {
  try {
    const user = await User.findById(id);
    done(null, user);
  } catch (err) {
    done(err);
  }
});

// 配置 Express.js
app.use(express.urlencoded({ extended: true }));
app.use(session({
  secret: 'myapp',
  resave: false,
  saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());

// 处理登录请求
app.get('/login', (req, res) => {
  res.render('login');
});
app.post('/login', passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/login',
  failureFlash: true
}));

// 处理注销请求
app.get('/logout', (req, res) => {
  req.logout();
  res.redirect('/');
});

// 处理用户信息请求
app.get('/profile', (req, res) => {
  if (!req.user) {
    return res.redirect('/login');
  }
  res.render('profile', { user: req.user });
});

在这个例子中，我们使用 `mongoose` 库连接到 MongoDB 数据库，并定义了一个名为 `User` 的模型来表示用户。然后，我们使用 Passport.js 配置了本地认证策略，并将其添加到 Express.js 应用程序中。接着，我们使用中间件来处理登录请求、注销请求和用户信息请求。在登录请求中，我们使用 `passport.authenticate()` 方法来验证用户的邮箱和密码，并在验证成功时重定向到首页。在注销请求中，我们使用 `req.logout()` 方法来注销用户。在用户信息请求中，我们检查用户是否已登录，如果未登录，则重定向到登录页面，否则渲染用户信息页面。

四、实验总结

通过本次实训，我们学习了使用 Express 框架搭建 Web 项目的基本步骤，并实现了路由、模板引擎、中间件和用户认证和授权等功能。这些技能在 Web 开发中都非常重要，可以帮助我们更加高效地开发 Web 应用程序。