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

引言

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

我选择使用 React，因为它是目前最流行的 JavaScript 前端库，但是此处描述的技术也可以与其他任何流行的前端框架一起使用，包括Vue，Angular或Ember。 他们甚至可以与适用于iOS或Android的移动应用，桌面应用或其他任何应用一起使用。 连接到后端API的过程非常相似。

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

安装Node

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

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

在Mac计算机上，我们可以使用Homebrew，如果您按照Django入门指南中的说明配置本地计算机，则应该已经安装了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.js
import 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.js
import 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.js
import React, { Component } from 'react';
import axios from 'axios'; // new
...

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

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

// src/App.js
import 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;

如果您再次查看 http://localhost:3000/，即使我们不再具有硬编码的数据，页面也一样。 所有这些都来自我们的API端点并立即提出要求。

这就是React的工作方式！

总结

现在，我们已将 Django 后端 API 连接到 React 前端。 更好的是，我们可以选择将来更新前端，或者随着项目需求的变化而完全替换掉。

这就是为什么采用API优先方法是使网站“面向未来”的好方法。 前期可能需要更多的工作，但是它提供了更多的灵活性。 在后面的章节中，我们将增强我们的API，使其支持多个HTTP动词，例如POST（添加新的待办事项），PUT（更新现有的待办事项）和 DELETE（删除待办事项）。

在下一章中，我们将开始构建一个健壮的 Blog API，该 API 支持完整的 CRUD（创建-读取-更新-删除）功能，之后再向其中添加用户身份验证，以便用户可以通过API方式登录，注销和注册帐户。