1. DRF前奏

alexhuiwang

发布于 2022-12-22 14:07:34

9420

发布于 2022-12-22 14:07:34

文章被收录于专栏：运维博客运维博客

DRF前奏

DRF大纲

Django的基本使用

前后端分离开发模式

前后端分离前

前后端分离前：前端页面看到的效果都是由后端控制，即后端渲染HTML页面，前端与后端的耦合度很高

前后端分离前存在的问题
- PC,APP,Pad多端流行
- 前后端开发职责不清晰：各司其职，最大程度减少开发难度，方便协作
- 开发效率问题：一般后端开发需要等前端页面准备好，有时候前端也一直配合后端，能力受限
- 前后端代码混合，日积月累，维护成本增加
- 后端开发语言和模板耦合

前后端分离后

前后端分离后：后端仅返回前端所需的数据，不再渲染HTML页面，不在控制前端效果，至于前端展示什么效果，由前端来定

前后端分离后存在的问题：
- 维护成本高
- 学习曲线增高
- 协作成本高

RestfulAPI

什么是RestfulAPI：
- REST（Representational State Transfer，表征状态转移）是一种Web服务的软件架构风格。描述网络中客户端与服务端的一种交互方式，它本身不常用，常用的是如何设计RestfulAPI（REST风格的网络接口）
- RestfulAPI风格就是把所有的数据都当做资源，对表的操作就是对资源操作
- 资源就是指的URL，基于URL对资源操作，Web服务在URL上支持一系列请求方法，如下表所示

示例：
非REST的URL：http://ip/get_user?id=123
REST的URL：http://ip/user/123

Django的开发模式

用户信息管理系统案例

基础环境准备

通过Pycharm创建django项目

创建app

E:\workspace\django-project\day1\django_user_info>python manage.py startapp myapp

项目settings中新增配置字段

settings中注释csrf配置

项目路由配置
1. app中创建urls配置

project中关联app的url配置

myapp中创建用户模板

from django.db import models

# Create your models here.
class User(models.Model):
    name = models.CharField(max_length=32)
    city = models.CharField(max_length=64)
    sex = models.CharField(max_length=8)
    age = models.IntegerField()

创建myapp视图函数

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def user(request):
    if request.method == "GET":
        return HttpResponse("获取用户")
    elif request.method == "POST":
        return HttpResponse("创建用户")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        return HttpResponse("删除用户")

同步数据库：终端执行如下命令

E:\workspace\django-project\day1\django_user_info>python manage.py makemigrations
E:\workspace\django-project\day1\django_user_info>python manage.py migrate

启动项目测试访问

-- django_user_info
    |-- db.sqlite3
    |-- django_user_info
    |   |-- __init__.py
    |   |-- asgi.py
    |   |-- settings.py
    |   |-- urls.py
    |   `-- wsgi.py
    |-- manage.py
    |-- myapp
    |   |-- __init__.py
    |   |-- admin.py
    |   |-- apps.py
    |   |-- migrations
    |   |   |-- 0001_initial.py
    |   |   |-- __init__.py
    |   |   `-- __pycache__
    |   |       |-- 0001_initial.cpython-39.pyc
    |   |       `-- __init__.cpython-39.pyc
    |   |-- models.py
    |   |-- tests.py
    |   |-- urls.py
    |   `-- views.py
    `-- templates

列出用户开发

shell模式准备测试数据: 创建三条测试数据

E:\workspace\django-project\day1\django_user_info>python manage.py shell
In [1]: from myapp.models import User
In [2]: User.objects.create(name="zhangsan",city="北京",sex="男",age=18)
In [3]: User.objects.create(name="ashan",city="上海",sex="女",age=19)
In [4]: User.objects.create(name="cece",city="上海",sex="人妖",age=20)

准备视图函数： myapp/views.py

from django.shortcuts import render
from django.http import HttpResponse
from myapp.models import User

# Create your views here.
def user(request):
    if request.method == "GET":
        user_list = User.objects.all()
        return render(request,'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        return HttpResponse("创建用户")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        return HttpResponse("删除用户")

准备前端文件： templates/user_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列出所有用户</title>
</head>
<body>
<table border="1px">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>城市</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for user in user_list %}
    <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.city }}</td>
        <td>{{ user.sex }}</td>
        <td>{{ user.age }}</td>
        <td>
            <button>删除</button>
            <button>编辑</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>

效果展示： http://127.0.0.1:8000/myapp/user/

创建用户功能开发

创建用户前端页面： templates/user_add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户页面</title>
</head>
<body>
<form action="/myapp/user" method="post">
    姓名： <input type="text" name="name"><br>
    城市： <input type="text" name="city"><br>
    性别： <input type="text" name="sex"><br>
    年龄： <input type="text" name="age"><br>
    <button type="submit" value="提交"></button>
</form>
</body>
</html>

添加用户视图函数： myapp/views.py

from django.shortcuts import render
from django.http import HttpResponse
from myapp.models import User

# Create your views here.
def user(request):
    if request.method == "GET":
        user_list = User.objects.all()
        return render(request,'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        name = request.POST.get('name', None)
        city = request.POST.get('city',None)
        sex = request.POST.get('sex',None)
        age = request.POST.get('age',None)
        User.objects.create(
            name=name,
            city=city,
            sex=sex,
            age=age
        )
        return HttpResponse("创建用户成功")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        return HttpResponse("删除用户")

def user_add(request):
    return render(request,'user_add.html')

路由配置： myapp/urls.py

from django.urls import path,re_path
from myapp import views

urlpatterns = [
    path('user/', views.user, name='user'),
    re_path('^user_add/$',views.user_add,name='user_add')
]

功能展示：http://127.0.0.1:8000/myapp/user_add/

新增数据查看： http://127.0.0.1:8000/myapp/user/

调整templates/userlist.html页面: 新增跳转到templates/user_add.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列出所有用户</title>
</head>
<body>
<button><a rel="nofollow" href="{% url 'user_add' %}">添加用户</a></button>
<table border="1px">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>城市</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for user in user_list %}
    <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.city }}</td>
        <td>{{ user.sex }}</td>
        <td>{{ user.age }}</td>
        <td>
            <button>删除</button>
            <button>编辑</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

</body>
</html>

页面删除功能开发

前端页面开发: templates/user_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列出所有用户</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button><a rel="nofollow" href="{% url 'user_add' %}">添加用户</a></button>
<table border="1px">
    <thead>
    <tr>
        <th style="display: none">ID</th>
        <th>姓名</th>
        <th>城市</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for user in user_list %}
    <tr>
        <td style="display: none">{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.city }}</td>
        <td>{{ user.sex }}</td>
        <td>{{ user.age }}</td>
        <td>
            <button>编辑</button>
            <button id="del" onclick="delUser(this)">删除</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

<script>
    function delUser(obj) {
        confirm = confirm('是否删除用户？');
        var id = $(obj).parent().parent().find("td:eq(0)").text();   //获取button父元素td，然后再获取tr，最后获取tr的第一个值
        var data = {'id': id}
        if (confirm) {
            $.ajax({
                type: "DELETE",
                url: "/myapp/user/",
                data: data,
                success: function (result) {
                    if (result.code == 200) {
                        alert(result.msg);
                        location.reload();
                    } else {
                        alert(result.msg)
                    }
                }
            })
        }
    }
</script>
</body>
</html>

视图函数开发： myapp/views.py (DELETE方法)

from django.shortcuts import render
from django.http import HttpResponse,QueryDict,JsonResponse
from myapp.models import User

# Create your views here.
def user(request):
    if request.method == "GET":
        user_list = User.objects.all()
        return render(request,'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        name = request.POST.get('name', None)
        city = request.POST.get('city',None)
        sex = request.POST.get('sex',None)
        age = request.POST.get('age',None)
        User.objects.create(
            name=name,
            city=city,
            sex=sex,
            age=age
        )
        return HttpResponse("创建用户成功")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        data = QueryDict(request.body)
        id = data.get('id')
        try:
            User.objects.get(id=id).delete()
            res = {'code': 200, 'msg': '删除用户成功'}
        except Exception:
            res = {'code': 500, 'msg': '删除用户失败'}
        return JsonResponse(res)

def user_add(request):
    return render(request,'user_add.html')

页面编辑功能开发

路由： myapp/urls.py

from django.urls import path,re_path
from myapp import views

urlpatterns = [
    path('user/', views.user, name='user'),
    re_path('^user_add/$',views.user_add,name='user_add'),
    re_path('^user_edit/$',views.user_edit,name='user_edit')
]

视图函数

from django.shortcuts import render
from django.http import HttpResponse,QueryDict,JsonResponse
from myapp.models import User

# Create your views here.
def user(request):
    if request.method == "GET":
        if request.GET.get('id'):
            pass
            # user_queryset = User.objects.get(id=request.GET.get('id'))
            # res = {'code': 200, 'msg': '获取用户成功！！', 'data': user_queryset}
            # return JsonResponse(res)
        else:
            user_list = User.objects.all()
        return render(request,'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        name = request.POST.get('name', None)
        city = request.POST.get('city',None)
        sex = request.POST.get('sex',None)
        age = request.POST.get('age',None)
        User.objects.create(
            name=name,
            city=city,
            sex=sex,
            age=age
        )
        return HttpResponse("创建用户成功")
    elif request.method == "PUT":
        data = QueryDict(request.body)
        id = data.get('id')
        user_obj = User.objects.get(id=id)
        user_obj.name = data.get('name')
        user_obj.city = data.get('city')
        user_obj.sex = data.get('sex')
        user_obj.age = data.get('age')
        user_obj.save()
        res = {'code': 200, 'msg': '更新用户成功'}
        return JsonResponse(res)
    elif request.method == "DELETE":
        data = QueryDict(request.body)
        id = data.get('id')
        try:
            User.objects.get(id=id).delete()
            res = {'code': 200, 'msg': '删除用户成功'}
        except Exception:
            res = {'code': 500, 'msg': '删除用户失败'}
        return JsonResponse(res)

def user_add(request):
    return render(request,'user_add.html')

def user_edit(request):
    id = request.GET.get('id')
    user = User.objects.get(id=id)
    return render(request,'user_edit.html',{'id':id, 'user': user})

前端： templates/user_edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
编辑用户
<form action="#">
    <input type="text" style="display: none" name="id" value="{{ user.id }}">
    姓名： <input type="text" name="name" value="{{ user.name }}"><br>
    城市： <input type="text" name="city" value="{{ user.city }}"><br>
    性别： <input type="text" name="sex" value="{{ user.sex }}"><br>
    年龄： <input type="text" name="age" value="{{ user.age }}"><br>
    <button type="button" value="提交" onclick="modifyUser()">提交修改</button>
</form>
<script>
    function modifyUser() {
        var id = $('input[name=id]').val();
        var name = $('input[name=name]').val();
        var city = $('input[name=city]').val();
        var sex = $('input[name=sex]').val();
        var age = $('input[name=age]').val();
        var data = {'id': id, 'name':name, 'city': city,'sex': sex, 'age': age};
        $.ajax({
            type: 'PUT',
            url: '/myapp/user/',
            data: data,
            success: function (result) {
                if (result.code == 200) {
                    alert(result.msg)
                    location.reload()
                }
            }
        })
    }
</script>
</body>
</html>

前端： templates/user_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列出所有用户</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button><a rel="nofollow" href="{% url 'user_add' %}">添加用户</a></button>
<table border="1px">
    <thead>
    <tr>
        <th style="display: none">ID</th>
        <th>姓名</th>
        <th>城市</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for user in user_list %}
    <tr>
        <td style="display: none">{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.city }}</td>
        <td>{{ user.sex }}</td>
        <td>{{ user.age }}</td>
        <td>
            <button><a rel="nofollow" href="/myapp/user_edit?id={{ user.id }}" target="_blank">编辑</a></button>
            <button id="del" onclick="delUser(this)">删除</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

<script>
    function delUser(obj) {
        confirm = confirm('是否删除用户？');
        var id = $(obj).parent().parent().find("td:eq(0)").text();   //获取button父元素td，然后再获取tr，最后获取tr的第一个值
        var data = {'id': id}
        if (confirm) {
            $.ajax({
                type: "DELETE",
                url: "/myapp/user/",
                data: data,
                success: function (result) {
                    if (result.code == 200) {
                        alert(result.msg);
                        location.reload();
                    } else {
                        alert(result.msg)
                    }
                }
            })
        }
    }
</script>
</body>
</html>

测试： http://127.0.0.1:8000/myapp/user/

测试： http://127.0.0.1:8000/myapp/user_edit/?id=6

查看修改结果： http://127.0.0.1:8000/myapp/user/

基于类视图修改

类视图修改： myapp/views.py

from django.shortcuts import render
from django.http import HttpResponse,QueryDict,JsonResponse
from myapp.models import User
from django.views import View

class UserView(View):
    def get(self,request):
        user_list = User.objects.all()
        return render(request, 'user_list.html', {'user_list': user_list})
    
    def post(self,request):
        name = request.POST.get('name', None)
        city = request.POST.get('city', None)
        sex = request.POST.get('sex', None)
        age = request.POST.get('age', None)
        User.objects.create(
            name=name,
            city=city,
            sex=sex,
            age=age
        )
        return HttpResponse("创建用户成功")
    
    def put(self,request):
        data = QueryDict(request.body)
        id = data.get('id')
        user_obj = User.objects.get(id=id)
        user_obj.name = data.get('name')
        user_obj.city = data.get('city')
        user_obj.sex = data.get('sex')
        user_obj.age = data.get('age')
        user_obj.save()
        res = {'code': 200, 'msg': '更新用户成功'}
        return JsonResponse(res)
    
    def delete(self,request):
        data = QueryDict(request.body)
        id = data.get('id')
        try:
            User.objects.get(id=id).delete()
            res = {'code': 200, 'msg': '删除用户成功'}
        except Exception:
            res = {'code': 500, 'msg': '删除用户失败'}
        return JsonResponse(res)
        
def user_add(request):
    return render(request,'user_add.html')

def user_edit(request):
    id = request.GET.get('id')
    user = User.objects.get(id=id)
    return render(request,'user_edit.html',{'id':id, 'user': user})

修改路由： myapp/urls.py

from django.urls import path,re_path
from myapp import views

urlpatterns = [
    path('user/', views.UserView.as_view()),
    re_path('^user_add/$',views.user_add,name='user_add'),
    re_path('^user_edit/$',views.user_edit,name='user_edit')
]