Express入门

1. 安装Express

要使用Express，您首先需要使用npm或Yarn安装它。您可以使用以下命令在全局安装Express：

npm install -g express

1. 创建Express应用

安装完成后，您可以使用以下命令在新目录中创建一个Express应用程序：

express myapp

上面的命令将在名为myapp的新目录中生成Express应用程序的基本程序框架。

1. 运行Express应用

要运行Express应用，请进入生成的应用程序目录，然后使用以下命令：

cd myapp
npm install
npm start

1. 路由

在Express中，路由用于将URL映射到应用程序中的不同端点。该路由可使用HTTP方法（GET，POST，PUT等）和URL模式指定。

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

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

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

上面的例子展示有一个路由处理器定义，其中使用了GET HTTP方法和根URL模式（'/'）。当浏览器请求根路径（"/"）时，Express将调用该路由处理程序并发送“Hello World!”作为响应。

1. 中间件

Express中的中间件是在请求和响应之间处理请求的函数。在接下来的代码中，我们将介绍如何使用中间件，例如日志记录和处理URL编码等。

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

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use((req, res, next) => {
  console.log(`${Date.now()}: ${req.method} ${req.url}`);
  next();
});

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

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

在上面的代码中，我们使用express.json()中间件来解析JSON请求正文。还使用express.urlencoded()中间件处理URL编码，以便我们可以从POST请求中获取表单数据。最后，我们使用中间件记录请求信息以及其时间戳。

1. 模板引擎

Express支持许多模板引擎，例如EJS、Pug和Handlebars。这里，我们将展示如何使用EJS模板引擎。

首先，您需要使用以下命令来安装EJS：

npm install ejs --save

接下来，在app.js中配置EJS

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

app.set('view engine', 'ejs');
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.render('index', { title: 'Express' });
});

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

上面的代码中，我们首先设置“view engine”为“ejs”，这告诉Express将使用EJS来呈现视图。接下来，我们使用express.static()中间件提供公共静态文件（例如CSS文件）。

在路由中，通过使用res.render()方法呈现视图（index.ejs）。在这里，我们通过title变量将数据传递给视图。

1. 错误处理

在Express中，错误处理中间件处理从应用程序中抛出的任何类型的错误。您可以使用以下代码编写自己的错误处理中间件：

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

app.get('/', (req, res, next) => {
  const error = new Error('Something went wrong!');
  error.status = 500;
  next(error);
});

app.use((error, req, res, next) => {
  res.status(error.status || 500);
  res.send({
    error: {
      status: error.status || 500,
      message: error.message
    }
  });
});

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

在上面的代码中，我们首先在路由处理程序中生成一个错误对象。然后，我们使用next()方法将错误传递给错误处理中间件。最后，我们编写了一个错误处理中间件来处理416、404和500等错误，并将错误信息以JSON格式发送回客户端。

以上就是Express的简单教程。掌握这些知识将使您的Express开发更加高效和专业。希望我的解释对您有所帮助！

Express高级用法和技巧

1. 使用路由中间件

在之前的教程中，我们已经学习了如何使用Express路由进行URL映射和处理HTTP请求。对于一些大型应用程序来说，路由代码的数量可能很大，这将使代码难以维护。使用路由中间件可以更好地组织和管理路由。下面是一个例子：

// userRoutes.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.send('Get all users');
});

router.post('/', (req, res) => {
  res.send('Create a user');
});

router.get('/:id', (req, res) => {
  res.send(`Get user by id ${req.params.id}`);
});

router.put('/:id', (req, res) => {
  res.send(`Update user by id ${req.params.id}`);
});

router.delete('/:id', (req, res) => {
  res.send(`Delete user by id ${req.params.id}`);
});

module.exports = router;

然后，我们可以使用该路由中间件来处理用户请求：

// app.js
const express = require('express');
const userRoutes = require('./userRoutes');

const app = express();

app.use('/users', userRoutes);

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

在上面的代码中，我们使用app.use()方法将用户路由中间件绑定到路径“/users”中。现在，我们可以使用“localhost：3000/users”的URL路径来访问所有用户、创建用户、更新/删除用户等操作。

1. 使用MVC模式

MVC（Model-View-Controller）是一种常见的设计模式，用于创建更强大，更灵活和更可维护的应用程序。在Express中，我们可以使用MVC模式将代码进行分层，使代码更加清晰和可维护。下面是MVC的三个主要组成部分：

• 模型（Model）：处理与数据相关的操作（例如数据存储和检索）。
• 视图（View）：负责呈现数据给用户（例如HTML页面）。
• 控制器（Controller）：处理用户请求并协调模型和视图之间的通信。

下面是一个例子：

// models/user.js
const users = [];

exports.createUser = (data) => {
  const newUser = {
    id: Date.now().toString(),
    ...data
  };
  users.push(newUser);
  return newUser;
};

exports.getUsers = () => users;

exports.getUserById = (id) => users.find((user) => user.id === id);

exports.updateUserById = (id, data) => {
  const userIndex = users.findIndex((user) => user.id === id);
  users[userIndex] = { ...users[userIndex], ...data };
  return users[userIndex];
};

exports.deleteUserById = (id) => {
  const userIndex = users.findIndex((user) => user.id === id);
  const deletedUser = users.splice(userIndex, 1);
  return deletedUser;
};

在上面的代码中，我们定义了一些操作用户的方法，例如创建用户，获取所有用户、根据ID获取用户、更新用户和删除用户。

// controllers/userController.js
const user = require('../models/user');

exports.getAllUsers = (req, res) => {
  const users = user.getUsers();
  res.render('users', { users });
};

exports.renderAddUserForm = (req, res) => {
  res.render('addUser');
};

exports.addUser = (req, res) => {
  const newUser = user.createUser(req.body);
  res.redirect('/users');
};

exports.renderEditUserForm = (req, res) => {
  const userToEdit = user.getUserById(req.params.id);
  res.render('editUser', { user: userToEdit });
};

exports.editUser = (req, res) => {
  user.updateUserById(req.params.id, req.body);
  res.redirect('/users');
};

exports.deleteUser = (req, res) => {
  user.deleteUserById(req.params.id);
  res.redirect('/users');
};

在上面的代码中，我们定义了一些控制器方法用于处理用户请求，例如获取所有用户、呈现添加/编辑用户表单、添加/编辑/删除用户等。

// views/users.ejs
<!DOCTYPE html>
<html>
  <head>
    <title>Users</title>
  </head>
  <body>
    <h1>All Users</h1>
    <ul>
      <% users.forEach((user) => { %>
        <li><%= user.name %></li>
      <% }) %>
    </ul>
  </body>
</html>

在上面的代码中，我们定义了一个视图，用于呈现所有用户。

现在，我们可以使用以下代码来配置Express应用程序，并将MVC模式应用于用户：

// app.js
const express = require('express');
const userController = require('./controllers/userController');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');

app.get('/users', userController.getAllUsers);

app.get('/users/add', userController.renderAddUserForm);
app.post('/users/add', userController.addUser);

app.get('/users/edit/:id', userController.renderEditUserForm);
app.post('/users/edit/:id', userController.editUser);

app.post('/users/delete/:id', userController.deleteUser);

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

在上面的代码中，我们使用body-parser中间件来解析POST请求正文。然后，我们使用userController中间件来处理用户请求。

1. 使用WebSocket

WebSocket是一种持久的协议，它允许客户端和服务器之间的双向通信。在Express中，我们可以使用WebSocket来创建实时应用程序。下面是一个例子：

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在上面的代码中，我们首先创建了一个Express应用程序和一个HTTP服务器。然后，我们创建了一个Socket.IO服务器，并处理了连接和断开事件。最后，我们使用io.emit()方法将消息转发给所有客户端。

然后，在您的HTML文件中，您可以添加一个文本输入框，让用户输入消息并发送：

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        const socket = io();
        $('form').submit(function (e) {
          e.preventDefault(); // prevents page reloading
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function (msg) {
          $('#messages').append($('<li>').text(msg));
        });
      });
    </script>
  </body>
</html>

在上面的代码中，我们使用Socket.IO客户端库连接到Socket.IO服务器并处理消息发送和接收。最终，通过使用jQuery将消息呈现到HTML页面中。

这些都是Express高级用法的一些例子。掌握这些技巧可以使您的Express应用程序更加现代化和强大。