Ajax 英雄管理案例：维护正义联盟的传奇

2024-02-09 15:32:47

前期工作：装备齐全，踏上征程

添加 Axios 的全局配置：为您的请求保驾护航

为了让我们的 Ajax 请求更加轻松便捷，我们需要为 Axios 添加全局配置。这将为我们所有的请求设置默认值，省去逐个配置的麻烦。

创建 utils 文件夹，这是存放通用工具和配置的地方。
在 utils 文件夹中创建一个名为 request.js 的文件。
在 request.js 文件中，添加如下代码：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json';

通过这三行代码，我们设置了 Axios 的默认基础 URL，并将默认的 Content-Type 头设置为 JSON。

设置全局配置：统一管理请求参数

为了进一步简化我们的请求，我们可以设置全局配置，让它们适用于所有的请求。

在 index.js 文件中，添加如下代码：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers.post['Content-Type'] = 'application/json';

这与我们之前在 request.js 文件中所做的一样，只是这次我们把它放在了 index.js 文件中，这样所有的请求都会使用这些默认配置。

构建后端 API：英雄管理系统的核心

现在，让我们使用 Express 框架构建我们的后端 API。

安装 Express 框架：

npm install express

在项目根目录下创建一个名为 server.js 的文件。
在 server.js 文件中，添加如下代码：

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

app.get('/heroes', (req, res) => {
  res.send([
    { id: 1, name: 'Superman' },
    { id: 2, name: 'Batman' },
    { id: 3, name: 'Wonder Woman' },
  ]);
});

app.listen(3000);

这段代码创建了一个简单的 Express 服务器，它将在端口 3000 上监听请求。当您向该服务器发送 GET 请求时，它将返回一个包含三个英雄对象的数组。

编写前端代码：英雄管理系统的门面

现在，让我们编写前端代码来与我们的后端 API 进行交互。

在项目根目录下创建一个名为 index.html 的文件。
在 index.html 文件中，添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>英雄管理系统</h1>
    <ul id="heroes"></ul>

    <script src="script.js"></script>
  </body>
</html>

这段代码创建了一个简单的 HTML 页面，其中有一个标题、一个英雄列表和一个脚本标签，用于加载我们的 JavaScript 代码。

在项目根目录下创建一个名为 script.js 的文件。
在 script.js 文件中，添加如下代码：

const heroesList = document.getElementById('heroes');

axios.get('/heroes').then((response) => {
  response.data.forEach((hero) => {
    const li = document.createElement('li');
    li.textContent = hero.name;
    heroesList.appendChild(li);
  });
});