返回

构建出色博客： SEO 优化与 1800 字指南

后端

06 前台与后台交互

代码实现

在05系列中，我们介绍了前台与后台交互的一般流程，以及前台与后台之间传输数据的格式：JSON。接下来我们开始编写代码实现客户端和服务端的交互。

首先我们需要安装一个Express框架，在cmd命令提示符输入如下指令：

npm i express

安装好Express框架后，我们就需要定义好服务端，接下来我们创建一个名为server.js的文件，代码如下：

const express = require('express');
const app = express();
const port = 3000;
const hostname = '127.0.0.1';

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

app.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

接着我们还需要定义好客户端，在同个目录下创建一个名为client.js的文件，代码如下：

const axios = require('axios');

const hostname = '127.0.0.1';
const port = 3000;
const url = `http://${hostname}:${port}/`;

axios.get(url)
    .then((res) => {
        console.log(res.data);
    })
    .catch((err) => {
        console.error(err);
    });

运行server.js文件，会看到如下输出：

Server running at http://127.0.0.1:3000/

接着运行client.js文件，会看到如下输出：

Hello World!

至此，我们已经完成了前台与后台交互的代码实现，简单来说，我们使用了Express框架来定义好服务端，然后使用Axios库来发送请求到服务端，服务端收到请求后返回相应的数据给客户端。

总结

在这一章中，我们介绍了前台与后台交互的一般流程，以及前台与后台之间传输数据的格式：JSON。接着我们通过代码实现的方式来演示了如何实现前台与后台的交互。希望大家能够理解并掌握前台与后台交互的知识。

练习题

  1. 请尝试使用不同的数据格式来实现前台与后台的交互，例如XML或Protobuf。
  2. 请尝试使用不同的库来发送请求到服务端，例如fetch或jQuery。
  3. 请尝试在服务端使用不同的框架来实现API，例如Flask或Django。