Python Django 前后端分离 API的方法

那我就给你讲一下Python Django前后端分离API的方法的完整攻略吧。

步骤一：设置Django项目

在开始之前，请确保你已经安装了Python和Django。安装完成后，你可以使用以下命令创建一个新的Django项目：

django-admin startproject project_name

其中，project_name就是你想要给Django项目取的名字。在创建完成之后，你需要进入项目目录：

cd project_name

步骤二：添加API应用程序

接下来，我们要添加一个用于API的Django应用程序。你可以使用以下命令创建一个名为“api”的应用程序：

python manage.py startapp api

注意，这里使用了“manage.py”，因为你必须在项目目录中执行这个命令。

步骤三：设置应用程序

创建完成之后，我们可以打开“settings.py”文件并添加新的应用程序：

INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',
    'api',
]

在这里，我们将“api”应用程序添加到Django项目中。

步骤四：创建API模型

接下来，我们需要创建一个API模型。在这个例子中，我们将创建一个简单的“User”模型。在“api/models.py”文件中添加以下代码：

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)
    created_at = models.DateTimeField(auto_now_add=True)

在这里，我们定义了一个“User”模型，并在其中添加了一些字段。接下来，我们需要使用以下命令来创建数据库中的表：

python manage.py makemigrations api

python manage.py migrate

步骤五：创建API视图

接下来，我们将创建API视图。打开“api/views.py”并添加以下代码：

from django.shortcuts import render
from django.http import JsonResponse
from api.models import User

def users(request):
    users = User.objects.all()
    data = {'users': []}
    for user in users:
        data['users'].append({
            'name': user.name,
            'email': user.email,
            'password': user.password,
            'created_at': str(user.created_at),
        })
    return JsonResponse(data)

在这个例子中，我们创建了一个简单的“users”视图，用于返回数据库中所有用户的信息。注意使用了JsonResponse方法返回Json格式的数据。

步骤六：添加API路由

接下来，我们需要添加API路由。在“project_name/urls.py”文件中，添加以下代码：

from django.contrib import admin
from django.urls import path
from django.views.decorators.csrf import csrf_exempt
from api import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/users/', csrf_exempt(views.users), name='users'),
]

注意我们使用csrf_exempt方法去除关于csrf的安全验证。

步骤七：测试API

现在，我们可以测试API。启动Django开发服务器，并使用您喜欢的API客户端发出请求。例如，你可以使用curl：

curl http://localhost:8000/api/users/

你应该能看到类似以下的响应：

{
    "users": [
        {
            "name": "John Doe",
            "email": "[e-mail]",
            "password": "my_password",
            "created_at": "2022-01-04 07:56:28.924756+00:00"
        },
        {
            "name": "Jane Doe",
            "email": "[e-mail]",
            "password": "my_password",
            "created_at": "2022-01-04 08:01:30.488486+00:00"
        }
    ]
}

示例一：使用React.js作为前端框架

在这个例子中，我们将使用React.js作为前端框架来获取API数据。首先，我们需要在React项目中安装“axios”：

npm install axios

接下来，让我们创建一个名为“Users”的React组件，并使用“axios”从我们的API中获取数据。在“src/components/Users.js”中添加以下代码：

import React, { Component } from 'react'
import axios from 'axios'

class Users extends Component {
    state = {
        users: []
    }

    componentDidMount() {
        axios.get('http://localhost:8000/api/users/')
            .then(res => {
                const users = res.data.users;
                this.setState({ users });
            })
    }

    render() {
        return (
            <div>
                <h1>Users</h1>
                <ul>
                    {this.state.users.map(user => (
                        <li key={user.email}>{user.name} - {user.email}</li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default Users

在这里，我们使用“componentDidMount”生命周期方法从API中获取数据，并将其存储在我们的组件状态中。然后，我们可以在渲染组件时，循环渲染我们的用户列表。

示例二：使用Vue.js作为前端框架

在这个例子中，我们将使用Vue.js作为前端框架，并使用“axios”从我们的API中获取数据。首先，我们需要在Vue项目中安装“axios”：

npm install axios

接下来，让我们创建一个名为“Users”的Vue组件，并使用“axios”从我们的API中获取数据。在“src/components/Users.vue”中添加以下代码：

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="(user, index) in users" :key="index">{{ user.name }} - {{ user.email }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Users',
  data () {
    return {
      users: []
    }
  },
  mounted () {
    axios.get('http://localhost:8000/api/users/')
      .then(response => {
        this.users = response.data.users
      })
  }
}
</script>

在这里，我们使用“mounted”生命周期方法从API中获取数据，并将其存储在我们的组件属性中。然后，我们可以在渲染组件时，循环渲染我们的用户列表。

总结

以上就是Python Django前后端分离API的方法的完整攻略。在这个例子中，我们使用Django作为我们的后端，并添加了用于API的应用程序、模型、视图、路由。接着我们用例子向你展示了如何使用React.js和Vue.js来调用这个API。如果你想开始开发类似的应用程序，这就是一个不错的开始。