简介

这一节我们简单了解一个前端框架react，并用它做一个初步的客户端页面，以配合我们的后端restful接口。

1 工具安装

首先，将React应用配置为我们的前端。

新建一个控制台界面，linux 下载并安装 node

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

激活命令行

command -v nvm\

重启命令行控制台界面,即可完成安装.

1.1 安装React 并安装项目

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

npm使管理和安装多个软件包变得非常简单。 这是在本地安装软件包的一种改进方法，无需安装污染全局名称空间。这是安装React的推荐方法以及我们将使用的方法

在todo目录创建前端app

apt install npm   # 40M 上下
npx create-react-app fronts  

进入frontend 并启动应用

$ cd fronts
$ npm start

1.2 在前端app构造模拟数据

代码如下：

	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()显示所有项目.可以复制代码，只需要看到如何与api配合工作。

	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组件的状态中，然后使用map遍历每个组件列表中的项目，显示每个项目的标题和正文。

我们还添加了ID作为密钥，这是一个react特定的要求；该ID由Django自动添加到我们每个数据库字段中。

注意：如果在前端看见js错误，只需要重新安装npm，该修复程序通常是npm-install，然后尝试重新启动npm。

如果这样不起作用，则删除您的node_modules文件夹并运行npm install。这样就可以在短时间内解决99％的问题。欢迎使用现代JavaScript。 :)

1.3 连接前后端

使用 django api 替换 mock 数据。

发出HTTP请求的两种流行方法：内置FetchAPI或axios它带有几个附加功能。

在此示例中，我们将使用axios。使用Control-c停止运行的应用程序。然后安装axios。

在前端安装 axios， 用于前端发起request 请求。

npm install axios

如果axios 安装失败，使用 内置的fetch

//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() {
fetch('http://127.0.0.1:2000/api/')
.then(response )
.then(data => this.setState({ totalReactPackages: data.total }));
//.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;

2 小结

前后端分离将增强web站点的灵活性。

接下来增强我们的API，使其支持多个HTTP动作，例如POST（添加新待办事项），PUT（更新现有的待办事项）和DELETE（删除待办事项）

然后我们将构建一个健壮的博客 API，该API支持完整的CRUD（创建-读取-更新-删除）功能，
随后再向其中添加用户身份验证，以便用户可以登录，注销，然后通过我们的API注册帐户。