Django API 开发：Todo 应用的 React 前端

作者：宇宙之一粟

2022 年 6 月 01 日
本文字数：3449 字
阅读完需：约 11 分钟

引言

API 的功能在于与其他程序进行通信。在本文中，我们将通过 React 前端使用上一篇文章中的 Todo API，这样您就可以了解实际中一切如何协同工作。

我选择使用 React，因为它是目前最流行的 JavaScript 前端库，但是此处描述的技术也可以与其他任何流行的前端框架一起使用，包括Vue，Angular或Ember。

他们甚至可以与适用于 iOS 或 Android 的移动应用，桌面应用或其他任何应用一起使用。连接到后端 API 的过程非常相似。

如果您陷入困境或想了解有关 React 实际发生的事情的更多信息，请查看很好的官方教程。

安装 Node

首先，将 React 应用程序配置为前端。首先打开一个新的命令行控制台，以便现在有两个控制台打开。这个很重要。我们需要上一章中现有的 Todo 后端才能在本地服务器上运行。我们将使用第二个控制台来创建，然后在单独的本地端口上运行我们的 React 前端。这就是我们在本地模拟专用和已部署的前端/后端的生产环境的样子的方式。

在新的第二个命令行控制台中，安装NodeJS，它是一个 JavaScript 运行时引擎。它使我们可以在 Web 浏览器之外运行 JavaScript 。

在 Mac 计算机上，我们可以使用 Homebrew ：

$ brew install node

复制代码

在 Windows 计算机上，有多种方法，但一种流行的方法是使用 nvm-windows。其存储库包含详细的最新安装说明。如果您使用的是 Linux，请使用nvm。在撰写本文时，可以使用以下任一命令来完成，要么使用 cURL 命令：

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/\ install.sh | bash

复制代码

或者使用 Wget：

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/\ install.sh | bash

复制代码

然后运行：

$ command -v nvm

复制代码

关闭当前的命令行控制台，然后再次打开以完成安装。

安装 React

我们将使用出色的 create-react-app 包来快速启动一个新的 React 项目。这将生成我们的项目样板并通过一个命令安装所需的依赖项！

要安装 React ，我们将依赖 npm，这是一个 JavaScript 包管理器。像用于 Python 的 pipenv 一样， npm 使管理和安装多个软件包变得非常简单。 npm 的最新版本还包括 npx ，这是一种改进的方法，可以在本地安装软件包而不污染全局名称空间。这是安装 React 的推荐方法，也是我们在此使用的方法！

$ cd ~/Desktop$ cd todo

复制代码

创建一个名为前端的新 React 应用。

$ npx create-react-app frontend

复制代码

您的目录结构现在应如下所示：

todo|   ├──frontend|       ├──React... |   ├──backend|       ├──Django...

复制代码

转到我们的前端项目，并使用命令 npm start 运行 React 应用。

$ cd frontend$ npm start

复制代码

如果导航到 http://localhost:3000 / ，则将看到 create-react-app 默认主页。

模拟数据

如果您返回到我们的 API 端点，则可以在以下位置的浏览器中看到原始 JSON：http://127.0.0.1:8000/api/?format=json

[   {    "id":1,    "title":"1st todo",     "body":"Learn Django properly."  },   {    "id":2,     "title":"Second item",     "body":"Learn Python."  },   {    "id":3,    "title":"Learn HTTP",     "body":"It's important."  } ]

复制代码

每当向 API 端点发出 GET 请求时，就会返回此值。最终，我们将直接使用该 API ，但是一个好的初始步骤是首先模拟数据，然后配置我们的 API 调用。

我们需要在 React 应用程序中更新的唯一文件是 src/App.js。首先，在一个名为 list 的变量中模拟 API 数据，该变量实际上是一个具有三个值的数组。

// src/App.jsimport react, { Component } from 'react';
const list = [  {    "id":1,    "title":"1st todo",    "body":"Learn Django properly."  },  {    "id":2,    "title":"Second item",    "body":"Learn Python."  },  {    "id":3,    "title":"Learn HTTP",    "body": "It's important."  }]

复制代码

接下来，我们将列表加载到组件的状态，然后使用 JavaScript 数组方法 map() 显示所有项目。

我故意在这里快速移动，如果您以前从未使用过 React，请复制代码，以便您了解如何将 React 前端连接到我们的 Django 后端。

这是现在包含在 src/App.js 文件中的完整代码。

// SRC/App.jsimport React, { Component } from 'react';
const list = [  {    "id":1,    "title":"1st todo",    "body":"Learn Django properly."  },  {    "id":2,    "title":"second item",    "body":"Learn Python."  },  {    "id":3,    "title":"Learn HTTP",    "body":"It's important."  }]
class App extends Component {  constructor(props) {    super(props);    this.state = { list };  }    render(){    return (      <div>      {this.state.list.map(item => (       <div key={item.id}>          <h1>{item.title}</h1>          <p>{item.body}</p>      </div>       ))}      </div>    );  }}
export default App;

复制代码

我们已将列表加载到 App 组件的状态中，然后使用地图在列表中的每个项目上循环显示每个项目的标题和正文。我们还添加了 id 作为密钥，这是 React 特定的要求； Django 自动为我们将 id 添加到每个数据库字段中。现在，您应该在主页上的 http://localhost:3000/上看到我们的待办事项，而无需刷新页面。

注意：如果您使用 React，运行 npm start , 可能会在某些时候看到错误消息 sh：react-scripts：command not found 。不要惊慌。这是 JavaScript 开发中非常普遍的问题。该修补程序通常是运行 npm install，然后尝试再次启动 npm。如果那不起作用，则删除您的 node_modules 文件夹并运行 npm install 。那可以 99％的时间解决问题。欢迎使用现代 JavaScript 开发:)。

Django REST Framework + React

现在，让我们真正使用 Todo API，而不是使用 list 变量中的模拟数据。在另一个命令行控制台中，我们的 Django 服务器正在运行，并且我们知道列出所有待办事项的 API 端点位于http://127.0.0.1:8000/api/。因此，我们需要向它发出 GET 请求。

发出 HTTP 请求的两种流行方法是：使用内置的 Fetch API 或 axios ，它具有一些附加功能。在此示例中，我们将使用 axios。使用 Control + c 停止当前在命令行上运行的 React 应用。然后安装 axios。

$ npm install axios

复制代码

过去，开发人员会在 npm 命令中添加 --save 标志，以将依赖项保存在 package.json 文件中。结果，您经常会看到上述命令写为 npm install axios --save。但是，npm 的最新版本默认情况下使用 –save ，因此不再需要显式添加 --save 标志。

使用 npm start 重新启动 React 应用。

$ npm start

复制代码

然后在 App.js 文件顶部的文本编辑器中，导入 Axios 。

// src/App.jsimport React, { Component } from 'react';import axios from 'axios'; // new...

复制代码

剩下两个步骤。首先，我们将 axios 用于 GET 请求。为此，我们可以创建专用的 getTodos 函数。

其次，我们要确保在 React 生命周期中的正确时间发出此 API 调用。 HTTP 请求应该使用componentDidMount 发出，因此我们将在此处调用 getTodos 。我们也可以删除模拟列表，因为它不再需要了。现在，我们完整的 App.js 文件将如下所示。

// src/App.jsimport React, { Component } from 'react'; import axios from 'axios'; // new
class App extends Component {   state = {    todos: []   };
  // new  componentDidMount() {     this.getTodos();}
  // new  getTodos() {    axios      .get('http://127.0.0.1:8000/api/')       .then(res => {        this.setState({ todos: res.data });     })    .catch(err => {       console.log(err);    });   }    render() {     return (    <div>      {this.state.todos.map(item => (        <div key={item.id}>           <h1>{item.title}</h1>           <span>{item.body}</span>        </div>       ))}    </div>   ); }}
export default App;