DRF + react 实现TodoList

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

简介

本文有如下几个部分：

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

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

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

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

最后实现的TodoList效果如下：

 准备

本次环境如下：

Ubuntu 18.4
python 3.6.8
pip
pipenv

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

配置 backend

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

mkdir django-todo-react
cd django-todo-react

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

pip install pipenv
pipenv shell

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

pipenv install django
django-admin startproject backend

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

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

cd backend
python3 manage.py startapp todo
python3 manage.py migrate
python3 manage.py runserver

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

好了现在开始配置Todo应用

注册应用Todo

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

# backend/settings.py

# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'todo' # 此处
]

定义 Todo model

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

# todo/models.py

from django.db import models
# Create your models here.

# add this
class Todo(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def _str_(self):
        return self.title

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

• Title
• Description
• Completed

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

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

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

# todo/admin.py

from django.contrib import admin
from .models import Todo # add this

class TodoAdmin(admin.ModelAdmin): # add this
    list_display = ('title', 'description', 'completed') # add this

# Register your models here.
    admin.site.register(Todo, TodoAdmin) # add this

创建账户

python3 manage.py createsuperuser

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

python3 manage.py runserver

登陆后，如下图所示，

 

进入添加如下：

配置 APIs

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

pipenv install djangorestframework django-cors-headers

现在需要把rest_framework和corsheaders 注册，

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', # add this
    'rest_framework', # add this 
    'todo',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # add this
    'django.middleware.common.CommonMiddleware', # add this
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOW_CREDENTIALS = True # add this
CORS_ORIGIN_ALLOW_ALL = True # add this

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

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

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

Todo model 序列化

序列化相关参见此文

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

touch todo/serializers.py

编辑文件像如下代码：

# todo/serializers.py

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
      model = Todo
      fields = ('id', 'title', 'description', 'completed')

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

编写View视图

在todo/views.py新建Todoview类，

# todo/views.py

from django.shortcuts import render
from rest_framework import viewsets # add this
from .serializers import TodoSerializer # add this
from .models import Todo # add this

class TodoView(viewsets.ModelViewSet): # add this
    serializer_class = TodoSerializer # add this
    queryset = Todo.objects.all() # add this

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

# backend/urls.py

from django.contrib import admin
from django.urls import path, include # add this
from rest_framework import routers # add this
from todo import views # add this

router = routers.DefaultRouter() # add this
router.register(r'todos', views.TodoView, 'todo') # add this

urlpatterns = [
    path('admin/', admin.site.urls), 
    path('api/', include(router.urls)) # add this
]

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

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

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

python3 manage.py runserver

如下图所示：

 

可以新建TodoList，以测试：

配置前端

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

cd django-todo-react
npm install -g create-react-app
create-react-app frontend
cd frontend 
yarn start

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

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

yarn add bootstrap reactstrap

编辑文件src/index.css

/__ frontend/src/index.css __/
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #282c34;
}
.todo-title {
  cursor: pointer;
}
.completed-todo {
16   text-decoration: line-through;
}
.tab-list > span {
  padding: 5px 8px;
  border: 1px solid #282c34;
  border-radius: 10px;
  margin-right: 5px;
  cursor: pointer;
}
.tab-list > span.active {
  background-color: #282c34;
  color: #ffffff;
}

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

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; //add this
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

安装axios

yarn add axios

把axios 添加进入package.json文件

// frontend/package.json

[...] "name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000", // 只需要添加这一行
"dependencies": {
  "axios": "^0.18.0",
  "bootstrap": "^4.1.3",
  "react": "^16.5.2",
  "react-dom": "^16.5.2",
  "react-scripts": "2.0.5",
  "reactstrap": "^6.5.0"
},
[...]

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

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

编辑Modal.js文件

// frontend/src/components/Modal.js
import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Input,
  Label
} from "reactstrap";
export default class CustomModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItem: this.props.activeItem
    };
  }
  handleChange = e => {
    let { name, value } = e.target;
    if (e.target.type === "checkbox") {
      value = e.target.checked;
    }
    const activeItem = { ...this.state.activeItem, [name]: value };
    this.setState({ activeItem });
  };
  render() {
    const { toggle, onSave } = this.props;
    return (
      <Modal isOpen={true} toggle={toggle}>
        <ModalHeader toggle={toggle}> Todo Item </ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
              <Label for="title">Title</Label>
              <Input
                type="text"
                name="title"
                value={this.state.activeItem.title}
                onChange={this.handleChange}
                placeholder="Enter Todo Title"
              />
            </FormGroup>
            <FormGroup>
              <Label for="description">Description</Label>
              <Input
                type="text"
                name="description"
                value={this.state.activeItem.description}
                onChange={this.handleChange}
                placeholder="Enter Todo description"
              />
            </FormGroup>
            <FormGroup check>
              <Label for="completed">
                <Input
                  type="checkbox"
                  name="completed"
                  checked={this.state.activeItem.completed}
                  onChange={this.handleChange}
                />
                Completed
              </Label>
            </FormGroup>
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button color="success" onClick={() => onSave(this.state.activeItem)}>
            Save
          </Button>
        </ModalFooter>
      </Modal>
    );
  }
}

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

• Title
• Description
• Completed

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

// frontend/src/App.js
import React, { Component } from "react";
import Modal from "./components/Modal";
import axios from "axios";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewCompleted: false,
      activeItem: {
        title: "",
        description: "",
        completed: false
      },
      todoList: []
    };
  }
  componentDidMount() {
    this.refreshList();
  }
  refreshList = () => {
    axios
      .get("http://localhost:8000/api/todos/")
      .then(res => this.setState({ todoList: res.data }))
      .catch(err => console.log(err));
  };
  displayCompleted = status => {
    if (status) {
      return this.setState({ viewCompleted: true });
    }
    return this.setState({ viewCompleted: false });
  };
  renderTabList = () => {
    return (
      <div className="my-5 tab-list">
        <span
          onClick={() => this.displayCompleted(true)}
          className={this.state.viewCompleted ? "active" : ""}
        >
          complete
        </span>
        <span
          onClick={() => this.displayCompleted(false)}
          className={this.state.viewCompleted ? "" : "active"}
        >
          Incomplete
        </span>
      </div>
    );
  };
  renderItems = () => {
    const { viewCompleted } = this.state;
    const newItems = this.state.todoList.filter(
      item => item.completed === viewCompleted
    );
    return newItems.map(item => (
      <li
        key={item.id}
        className="list-group-item d-flex justify-content-between align-items-center"
      >
        <span
          className={`todo-title mr-2 ${
            this.state.viewCompleted ? "completed-todo" : ""
          }`}
          title={item.description}
        >
          {item.title}
        </span>
        <span>
          <button
            onClick={() => this.editItem(item)}
            className="btn btn-secondary mr-2"
          >
            {" "}
            Edit{" "}
          </button>
          <button
            onClick={() => this.handleDelete(item)}
            className="btn btn-danger"
          >
            Delete{" "}
          </button>
        </span>
      </li>
    ));
  };
  toggle = () => {
    this.setState({ modal: !this.state.modal });
  };
  handleSubmit = item => {
    this.toggle();
    if (item.id) {
      axios
        .put(`http://localhost:8000/api/todos/${item.id}/`, item)
        .then(res => this.refreshList());
      return;
    }
    axios
      .post("http://localhost:8000/api/todos/", item)
      .then(res => this.refreshList());
  };
  handleDelete = item => {
    axios
      .delete(`http://localhost:8000/api/todos/${item.id}`)
      .then(res => this.refreshList());
  };
  createItem = () => {
    const item = { title: "", description: "", completed: false };
    this.setState({ activeItem: item, modal: !this.state.modal });
  };
  editItem = item => {
    this.setState({ activeItem: item, modal: !this.state.modal });
  };
  render() {
    return (
      <main className="content">
        <h1 className="text-white text-uppercase text-center my-4">Todo app</h1>
        <div className="row ">
          <div className="col-md-6 col-sm-10 mx-auto p-0">
            <div className="card p-3">
              <div className="">
                <button onClick={this.createItem} className="btn btn-primary">
                  Add task
                </button>
              </div>
              {this.renderTabList()}
              <ul className="list-group list-group-flush">
                {this.renderItems()}
              </ul>
            </div>
          </div>
        </div>
        {this.state.modal ? (
          <Modal
            activeItem={this.state.activeItem}
            toggle={this.toggle}
            onSave={this.handleSubmit}
          />
        ) : null}
      </main>
    );
  }
}
export default App;

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

测试

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

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

yarn start # 运行react

最后访问 127.0.0.1:3000/

 

访问127.0.0.1:8000/api

参考

原作者个人感觉写的很详细了