我想用Django REST框架来创建一个ToDo应用程序

3 年 ago
韵, 科
4 minutes

我将使用Django REST framework创建一个简单的TODO应用。

创建应用程序的特点

    • TODOの作成／完了を管理するシングルページアプリ

 

    • SQLite3にTODOを保管

 

    • Django REST frameworkを使用

 

    RESTfulなAPIを作成

环境和版本：
Windows 7
Python 3.4.3
Django 1.8.2
Django REST框架 3.1.2

成果物是https://github.com/koji-ohki-1974/django-rest-todo。

准备

假设Python和Django已经安装好。

在Python中引入Django REST框架。

执行以下命令，安装Django REST框架。

pip install djangorestframework

创建项目

在任意的文件夹中创建Django项目。执行以下命令。

django-admin.py startproject django_rest_todo

建立数据库

初始化数据库并创建超级用户。

cd django_rest_todo
python manage.py migrate
python manage.py createsuperuser

设定超级用户的ID、电子邮件地址和密码。

項目値UsernameadminEmail addressadmin@any.comPasswordadmin

启动和确认服务器的运行

执行以下命令。

python manage.py runserver

打开浏览器，并访问http://localhost:8000/。
如果项目成功创建，则会显示一个名为”It worked!”的页面。

使用「CTRL + C」来关闭服务器。

创建应用程序

在项目文件夹中运行下面的命令来创建应用程序。

cd django_rest_todo
django-admin.py startapp api

我将更改项目设置。将”settings.py”文件按照以下方式进行修改。

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'django_rest_todo.api',
)

MIDDLEWARE_CLASSES = (
#  'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
#  'django.middleware.csrf.CsrfViewMiddleware',
#  'django.contrib.auth.middleware.AuthenticationMiddleware',
#  'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
#  'django.contrib.messages.middleware.MessageMiddleware',
#  'django.middleware.clickjacking.XFrameOptionsMiddleware',
#  'django.middleware.security.SecurityMiddleware',
)

创建 API

任务模型

在 “api/models.py” 文件中，我们定义了 Todo 的模型，并添加了一个 Todo 类。

from django.db import models

class Todo(models.Model):
    text = models.TextField()

一旦模型的定义完成后，将其映射到数据库中并执行以下命令。

cd ..
python manage.py makemigrations api
python manage.py sqlmigrate api 0001
python manage.py migrate

创建序列化器

创建一个将模型映射到JSON的序列化器。在「api/serializers.py」中进行定义。

from .models import Todo
from rest_framework import serializers

class TodoSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Todo
        fields = ('id', 'text')

创建视图

我們將為REST創建一個視圖，並將TodoViewSet類添加到”api/views.py”中。

from rest_framework.viewsets import ModelViewSet
from .models import Todo
from .serializers import TodoSerializer

class TodoViewSet(ModelViewSet):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

API 路由

我们将进行路由配置，以便处理API请求。
请修改「urls.py」文件。

from django.conf.urls import include, url
from rest_framework.routers import DefaultRouter
from .api import views

router = DefaultRouter()
router.register(r'todos', views.TodoViewSet)

urlpatterns = [
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

启动服务器并确认其运行情况。

我们将再次启动服务器并对API进行操作确认。执行以下命令。

python manage.py runserver

打开浏览器并访问以下网址。

http://本地主机:8000/接口/
http://本地主机:8000/接口/待办事项/

使用「CTRL + C」来关闭服务器。

创建前端

靜態文件

请设置静态文件（.html和.js）的存放位置。编辑“settings.py”文件，并添加以下内容。

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

创建「static」文件夹。

mkdir static

HTML文件

我們將創建一個 ToDo 清單畫面。請創建「static/index.html」文件。

<!doctype html>
<html ng-app="djangoTodo">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Django REST framework Todo App</title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #todo-list              { margin-bottom:30px; }
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="core.js"></script>

</head>
<body ng-controller="mainController">
    <div class="container">

        <div class="jumbotron text-center">
            <h1>Todoリスト <span class="label label-info">{{ todos.length }}</span></h1>
        </div>

        <div id="todo-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">

                <div class="checkbox" ng-repeat="todo in todos">
                    <label>
                        <input type="checkbox" ng-click="deleteTodo(todo.id)"> {{ todo.text }}
                    </label>
                </div>

            </div>
        </div>

        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <input type="text" class="form-control input-lg text-center" placeholder="Todoを入力してください" ng-model="formData.text">
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">追加</button>
                </form>
            </div>
        </div>

    </div>

</body>
</html>

JavaScript文件

使用JavaScript编写调用API的代码。创建”static/core.js”文件。

var djangoTodo = angular.module('djangoTodo', []);

function mainController($scope, $http) {

    $scope.readTodos = function() {
        $http.get('/api/todos/')
            .success(function(data) {
                $scope.formData = {};
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    $scope.createTodo = function() {
        $http.post('/api/todos/', $scope.formData)
            .success(function(data) {
                console.log(data);
                $scope.readTodos();
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id + '/')
            .success(function(data) {
                console.log(data);
                $scope.readTodos();
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    $scope.readTodos();

}

重定向

将对首页「/」的请求重定向到「static/index.html」上，需进行「urls.py」的更改设置。

from django.conf.urls import include, url
from django.views.generic import RedirectView
from rest_framework.routers import DefaultRouter
from .api import views

router = DefaultRouter()
router.register(r'todos', views.TodoViewSet)

urlpatterns = [
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
    url('', RedirectView.as_view(url='/static/index.html')),
]

确认行动

服务器的启动和运行确认

开始启动服务器。

python manage.py runserver

打开浏览器并访问http://localhost:8000/。
如果能够显示待办事项清单，则任务完成。

bannerAds