DRF + react 实现TodoList

拼搏现实的明天。 2021-11-22 10:20 413阅读 0赞

在web项目构建中有很多框架可供选择，开发人员对项目的使用选择，有很多的影响因素，其中之一就是框架在定义该项目的单独任务时的复杂性。

### 简介 ###

本文有如下几个部分：

*  准备
 *  配置后端
 *  配置APIs
 *  配置前端
 *  测试

使用Django和React 编写Todolist程序有如下原因：

*  React框架有广泛的适用范围，遇到错误的问题，可以很快面向Google解决
 *  Django 是一个很强大的web框架，从会话到身份认证的功能实现将会节约大量的时间

Django和React配合将可以方便的实现应用程序编写，为了使前后端交互（即检索和存储），为了创建交互界面，我们将使用Django REST框架（DRF）在后端构建API（应用程序编程接口）。

最后实现的TodoList效果如下：

![1371367-20190713235721839-642548278.png][]

####  准备 ####

本次环境如下：

1 Ubuntu 18.4
    2 python 3.6.8
    3 pip
    4 pipenv

之前一直是用的pip + 手动创建虚拟环境。pipenv 是生产就绪的工具，正如其名，他将pip和virtualenv整合在一起

#### 配置 backend ####

按照如下步骤将建立一个比较好的项目目录

1 mkdir django-todo-react
    2 cd django-todo-react

使用pip安装pipenv,并激活一个虚拟环境

1 pip install pipenv
    2 pipenv shell

(配置国内镜像跟新文件和pip源，清华，以提高依赖安装速度）  
使用pipenv安装django,并新修建一个项目叫backend

1 pipenv install django
    2 django-admin startproject backend

进入backend文件夹 ，新创建一个todo的应用，并迁移数据库

(如果你的机器里有python2.x和python3.x在后面使用python,pip命令时请分别使用python3，pip3)

1 cd backend
    2 python3 manage.py startapp todo
    3 python3 manage.py migrate
    4 python3 manage.py runserver

如上步骤输入都正确的话，输入地址http://127.0.0.1:8000  
会出现下图

![1371367-20190713235833320-2099242027.png][]

好了现在开始配置Todo应用

##### 注册应用Todo #####

在上面已经完成了后端的基苯配置，现在可以将todo应用程序注册为已安装的应用程序，以便Django识别。打开/backend/settings.py文件，更新INSTALLED\_APPS

1 # backend/settings.py
     2 
     3 # Application definition
     4 INSTALLED_APPS = [
     5 'django.contrib.admin',
     6 'django.contrib.auth',
     7 'django.contrib.contenttypes',
     8 'django.contrib.sessions',
     9 'django.contrib.messages',
    10 'django.contrib.staticfiles',
    11 'todo' # 此处
    12 ]

##### 定义 Todo model #####

打开文件todo/model.py,编写模型

1 # todo/models.py
     2 
     3 from django.db import models
     4 # Create your models here.
     5 
     6 # add this
     7 class Todo(models.Model):
     8     title = models.CharField(max_length=120)
     9     description = models.TextField()
    10     completed = models.BooleanField(default=False)
    11 
    12     def _str_(self):
    13         return self.title

在以上Todo类中描述了三个属性：

*  Title
 *  Description
 *  Completed

由于改变了Todo model，现在需要对数据做一个迁移，以确保数据库改变。

1 python3 manage.py makemigrations todo
    2 python manage.py migrate todo

对todo应用进行配置，修改文件todo/admin.py

1 # todo/admin.py
     2 
     3 from django.contrib import admin
     4 from .models import Todo # add this
     5 
     6 class TodoAdmin(admin.ModelAdmin): # add this
     7     list_display = ('title', 'description', 'completed') # add this
     8 
     9 # Register your models here.
    10     admin.site.register(Todo, TodoAdmin) # add this

创建账户

1 python3 manage.py createsuperuser

启动服务器,访问地址-172.0.0.1:8000/admin

1 python3 manage.py runserver

登陆后，如下图所示，

![1371367-20190713235910244-1616992231.png][]

进入添加如下：

![1371367-20190714000039805-1162094055.png][]

#### 配置 APIs ####

使用 ctr + c 停止服务器，然后使用pipenv安装djangorestframework 和django-cors-headers

1 pipenv install djangorestframework django-cors-headers

现在需要把rest\_framework和corsheaders 注册，

1 INSTALLED_APPS = [
     2     'django.contrib.admin',
     3     'django.contrib.auth',
     4     'django.contrib.contenttypes',
     5     'django.contrib.sessions',
     6     'django.contrib.messages',
     7     'django.contrib.staticfiles',
     8     'corsheaders', # add this
     9     'rest_framework', # add this 
    10     'todo',
    11 ]
    12 MIDDLEWARE = [
    13     'corsheaders.middleware.CorsMiddleware', # add this
    14     'django.middleware.common.CommonMiddleware', # add this
    15     'django.middleware.security.SecurityMiddleware',
    16     'django.contrib.sessions.middleware.SessionMiddleware',
    17     'django.middleware.common.CommonMiddleware',
    18     'django.middleware.csrf.CsrfViewMiddleware',
    19     'django.contrib.auth.middleware.AuthenticationMiddleware',
    20     'django.contrib.messages.middleware.MessageMiddleware',
    21     'django.middleware.clickjacking.XFrameOptionsMiddleware',
    22 ]
    23 CORS_ALLOW_CREDENTIALS = True # add this
    24 CORS_ORIGIN_ALLOW_ALL = True # add this

网上教程在backend/settings.py最后添加以下，一直报错，后来只有不添加如下即可运行：

1 # we whitelist localhost:3000 because that's where frontend will be served
    2 CORS_ORIGIN_WHITELIST = (
    3     'localhost:3000/'
    4 )

在CORS\_ORIGIN\_WHITELIST片段中，我们将localhost：3000列入白名单，因为我们希望应用程序的前端（将在该端口上提供）与API进行交互

##### Todo model 序列化 #####

序列化相关参见此文

我们需要序列化程序将模型实例转换为JSON，以便前端可以轻松处理接收到的数据。  
新建文件todo/serializers.py

1 touch todo/serializers.py

编辑文件像如下代码：

1 # todo/serializers.py
    2 
    3 from rest_framework import serializers
    4 from .models import Todo
    5 
    6 class TodoSerializer(serializers.ModelSerializer):
    7     class Meta:
    8       model = Todo
    9       fields = ('id', 'title', 'description', 'completed')

在上面代码片段中，我们指定了要使用的模型以及我们要转换为JSON的字段。

编写View视图

在todo/views.py新建Todoview类，

1 # todo/views.py
     2 
     3 from django.shortcuts import render
     4 from rest_framework import viewsets # add this
     5 from .serializers import TodoSerializer # add this
     6 from .models import Todo # add this
     7 
     8 class TodoView(viewsets.ModelViewSet): # add this
     9     serializer_class = TodoSerializer # add this
    10     queryset = Todo.objects.all() # add this

视图集基类默认提供CRUD操作的实现，我们要做的是指定序列化程序类和查询集。  
编写后端backend/urls.py文件

1 # backend/urls.py
     2 
     3 from django.contrib import admin
     4 from django.urls import path, include # add this
     5 from rest_framework import routers # add this
     6 from todo import views # add this
     7 
     8 router = routers.DefaultRouter() # add this
     9 router.register(r'todos', views.TodoView, 'todo') # add this
    10 
    11 urlpatterns = [
    12     path('admin/', admin.site.urls), 
    13     path('api/', include(router.urls)) # add this
    14 ]

这是完成API构建的最后一步，我们现在可以在Todo模型上执行CRUD操作。路由器类允许我们进行以下查询：

*  /todos/ 这将返回所有Todo项的列表（可以在此处完成Create和Read操作）。
 *  /todos/id 这将使用id主键返回单个Todo项（可以在此处执行Update和Delete操作）。

运行下列地址访问服务器127.0.0.1:8000/api/todos

1 python3 manage.py runserver

如下图所示：

![1371367-20190714000133193-1877115461.png][]

可以新建TodoList，以测试：

![1371367-20190714000247484-1558979796.png][]

#### 配置前端 ####

在一个新的命令行终端上执行命令

1 cd django-todo-react
    2 npm install -g create-react-app
    3 create-react-app frontend
    4 cd frontend 
    5 yarn start

访问127.0.0.1:3000将会看见如下：

![1371367-20190714000328189-2127398704.png][]

引入bootstrap和reactstrap来增加UI的功能：

1 yarn add bootstrap reactstrap

编辑文件src/index.css

1 /__ frontend/src/index.css __/
     2 body {
     3   margin: 0;
     4   padding: 0;
     5   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     6     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     7     sans-serif;
     8   -webkit-font-smoothing: antialiased;
     9   -moz-osx-font-smoothing: grayscale;
    10   background-color: #282c34;
    11 }
    12 .todo-title {
    13   cursor: pointer;
    14 }
    15 .completed-todo {
    16   text-decoration: line-through;
    17 }
    18 .tab-list > span {
    19   padding: 5px 8px;
    20   border: 1px solid #282c34;
    21   border-radius: 10px;
    22   margin-right: 5px;
    23   cursor: pointer;
    24 }
    25 .tab-list > span.active {
    26   background-color: #282c34;
    27   color: #ffffff;
    28 }

在src/index.js 添加下面引入文件

1 import React from 'react';
     2 import ReactDOM from 'react-dom';
     3 import 'bootstrap/dist/css/bootstrap.min.css'; //add this
     4 import './index.css';
     5 import App from './App';
     6 import * as serviceWorker from './serviceWorker';
     7 
     8 ReactDOM.render(<App />, document.getElementById('root'));
     9 
    10 // If you want your app to work offline and load faster, you can change
    11 // unregister() to register() below. Note this comes with some pitfalls.
    12 // Learn more about service workers: https://bit.ly/CRA-PWA
    13 serviceWorker.unregister();

##### 安装axios #####

1 yarn add axios

把axios 添加进入package.json文件

1 // frontend/package.json
     2 
     3 [...] "name": "frontend",
     4 "version": "0.1.0",
     5 "private": true,
     6 "proxy": "http://localhost:8000", // 只需要添加这一行
     7 "dependencies": {
     8   "axios": "^0.18.0",
     9   "bootstrap": "^4.1.3",
    10   "react": "^16.5.2",
    11   "react-dom": "^16.5.2",
    12   "react-scripts": "2.0.5",
    13   "reactstrap": "^6.5.0"
    14 },
    15 [...]

要处理添加和编辑任务等操作，我们将使用模态，所以让我们在components文件夹中创建一个Modal组件。先在src目录下新建文件夹components，

1 mkdir src/components
    2 touch src/components/Modal.js

编辑Modal.js文件

1 // frontend/src/components/Modal.js
     2 import React, { Component } from "react";
     3 import {
     4   Button,
     5   Modal,
     6   ModalHeader,
     7   ModalBody,
     8   ModalFooter,
     9   Form,
    10   FormGroup,
    11   Input,
    12   Label
    13 } from "reactstrap";
    14 export default class CustomModal extends Component {
    15   constructor(props) {
    16     super(props);
    17     this.state = {
    18       activeItem: this.props.activeItem
    19     };
    20   }
    21   handleChange = e => {
    22     let { name, value } = e.target;
    23     if (e.target.type === "checkbox") {
    24       value = e.target.checked;
    25     }
    26     const activeItem = { ...this.state.activeItem, [name]: value };
    27     this.setState({ activeItem });
    28   };
    29   render() {
    30     const { toggle, onSave } = this.props;
    31     return (
    32       <Modal isOpen={true} toggle={toggle}>
    33         <ModalHeader toggle={toggle}> Todo Item </ModalHeader>
    34         <ModalBody>
    35           <Form>
    36             <FormGroup>
    37               <Label for="title">Title</Label>
    38               <Input
    39                 type="text"
    40                 name="title"
    41                 value={this.state.activeItem.title}
    42                 onChange={this.handleChange}
    43                 placeholder="Enter Todo Title"
    44               />
    45             </FormGroup>
    46             <FormGroup>
    47               <Label for="description">Description</Label>
    48               <Input
    49                 type="text"
    50                 name="description"
    51                 value={this.state.activeItem.description}
    52                 onChange={this.handleChange}
    53                 placeholder="Enter Todo description"
    54               />
    55             </FormGroup>
    56             <FormGroup check>
    57               <Label for="completed">
    58                 <Input
    59                   type="checkbox"
    60                   name="completed"
    61                   checked={this.state.activeItem.completed}
    62                   onChange={this.handleChange}
    63                 />
    64                 Completed
    65               </Label>
    66             </FormGroup>
    67           </Form>
    68         </ModalBody>
    69         <ModalFooter>
    70           <Button color="success" onClick={() => onSave(this.state.activeItem)}>
    71             Save
    72           </Button>
    73         </ModalFooter>
    74       </Modal>
    75     );
    76   }
    77 }

我们创建了一个CustomModal类，它嵌套了从reactstrap库派生的Modal组件。我们还在表单中定义了三个字段

*  Title
 *  Description
 *  Completed

接下来就是 修改文件src/Appjs

1 // frontend/src/App.js
      2 import React, { Component } from "react";
      3 import Modal from "./components/Modal";
      4 import axios from "axios";
      5 class App extends Component {
      6   constructor(props) {
      7     super(props);
      8     this.state = {
      9       viewCompleted: false,
     10       activeItem: {
     11         title: "",
     12         description: "",
     13         completed: false
     14       },
     15       todoList: []
     16     };
     17   }
     18   componentDidMount() {
     19     this.refreshList();
     20   }
     21   refreshList = () => {
     22     axios
     23       .get("http://localhost:8000/api/todos/")
     24       .then(res => this.setState({ todoList: res.data }))
     25       .catch(err => console.log(err));
     26   };
     27   displayCompleted = status => {
     28     if (status) {
     29       return this.setState({ viewCompleted: true });
     30     }
     31     return this.setState({ viewCompleted: false });
     32   };
     33   renderTabList = () => {
     34     return (
     35       <div className="my-5 tab-list">
     36         <span
     37           onClick={() => this.displayCompleted(true)}
     38           className={this.state.viewCompleted ? "active" : ""}
     39         >
     40           complete
     41         </span>
     42         <span
     43           onClick={() => this.displayCompleted(false)}
     44           className={this.state.viewCompleted ? "" : "active"}
     45         >
     46           Incomplete
     47         </span>
     48       </div>
     49     );
     50   };
     51   renderItems = () => {
     52     const { viewCompleted } = this.state;
     53     const newItems = this.state.todoList.filter(
     54       item => item.completed === viewCompleted
     55     );
     56     return newItems.map(item => (
     57       <li
     58         key={item.id}
     59         className="list-group-item d-flex justify-content-between align-items-center"
     60       >
     61         <span
     62           className={`todo-title mr-2 ${
     63             this.state.viewCompleted ? "completed-todo" : ""
     64           }`}
     65           title={item.description}
     66         >
     67           {item.title}
     68         </span>
     69         <span>
     70           <button
     71             onClick={() => this.editItem(item)}
     72             className="btn btn-secondary mr-2"
     73           >
     74             {
        " "}
     75             Edit{
        " "}
     76           </button>
     77           <button
     78             onClick={() => this.handleDelete(item)}
     79             className="btn btn-danger"
     80           >
     81             Delete{
        " "}
     82           </button>
     83         </span>
     84       </li>
     85     ));
     86   };
     87   toggle = () => {
     88     this.setState({ modal: !this.state.modal });
     89   };
     90   handleSubmit = item => {
     91     this.toggle();
     92     if (item.id) {
     93       axios
     94         .put(`http://localhost:8000/api/todos/${item.id}/`, item)
     95         .then(res => this.refreshList());
     96       return;
     97     }
     98     axios
     99       .post("http://localhost:8000/api/todos/", item)
    100       .then(res => this.refreshList());
    101   };
    102   handleDelete = item => {
    103     axios
    104       .delete(`http://localhost:8000/api/todos/${item.id}`)
    105       .then(res => this.refreshList());
    106   };
    107   createItem = () => {
    108     const item = { title: "", description: "", completed: false };
    109     this.setState({ activeItem: item, modal: !this.state.modal });
    110   };
    111   editItem = item => {
    112     this.setState({ activeItem: item, modal: !this.state.modal });
    113   };
    114   render() {
    115     return (
    116       <main className="content">
    117         <h1 className="text-white text-uppercase text-center my-4">Todo app</h1>
    118         <div className="row ">
    119           <div className="col-md-6 col-sm-10 mx-auto p-0">
    120             <div className="card p-3">
    121               <div className="">
    122                 <button onClick={this.createItem} className="btn btn-primary">
    123                   Add task
    124                 </button>
    125               </div>
    126               {this.renderTabList()}
    127               <ul className="list-group list-group-flush">
    128                 {this.renderItems()}
    129               </ul>
    130             </div>
    131           </div>
    132         </div>
    133         {this.state.modal ? (
    134           <Modal
    135             activeItem={this.state.activeItem}
    136             toggle={this.toggle}
    137             onSave={this.handleSubmit}
    138           />
    139         ) : null}
    140       </main>
    141     );
    142   }
    143 }
    144 export default App;

这时基本的代码已经写完，可以进行测试了

#### 测试 ####

分别在刚才两个命令行运行APIs端和前端

1 # django-todo-react/backend
    2 python3 manage.py runserver # 运行DRF

1 yarn start # 运行react

最后访问 127.0.0.1:3000/

![1371367-20190714000428351-1899026364.png][]

访问127.0.0.1:8000/api

![1371367-20190714000517099-456032614.png][]

参考

[原作者个人感觉写的很详细了][Link 1]

转载于:https://www.cnblogs.com/Rightsec/p/11182705.html

[1371367-20190713235721839-642548278.png]: /images/20211122/fe557b6054e1496a8dee05e4b799658c.png
[1371367-20190713235833320-2099242027.png]: /images/20211122/ab4449a2ab314f8284d1b28587089176.png
[1371367-20190713235910244-1616992231.png]: /images/20211122/1671c360d5d245cba6ceaf57646d0cd8.png
[1371367-20190714000039805-1162094055.png]: /images/20211122/010a487120df40bf92895a89d0992e47.png
[1371367-20190714000133193-1877115461.png]: /images/20211122/184f683050384676baf17ef5d4c9fee4.png
[1371367-20190714000247484-1558979796.png]: /images/20211122/4d242b3d117d4089b3735ed1caab7cbd.png
[1371367-20190714000328189-2127398704.png]: /images/20211122/6ae28a9c760b4eb5abae62f5e244c036.png
[1371367-20190714000428351-1899026364.png]: /images/20211122/02b3cb26eca04a048f2b56d3e0ec9623.png
[1371367-20190714000517099-456032614.png]: /images/20211122/b45d1b12f6bb4dc5a67bf049b261551e.png
[Link 1]: https://scotch.io/tutorials/build-a-to-do-application-using-django-and-react