前后端联调---增删改查

后端Django编写增删改查接口

配置相关文件---settings文件里

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 注册app
    'myapp',
    # 注册drf框架
    'rest_framework',
    # 注册跨域
    'corsheaders'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 注释掉csrf跨站攻击件，避免报错
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    # 添加跨域的中间件
    'corsheaders.middleware.CorsMiddleware'
]
# 允许所有的源访问  origin:源头  allow:允许
CORS_ORIGIN_ALLOW_ALL = True

ROOT_URLCONF = 'django062803.urls'

DATABASES = {
    'default': {
        # 配置数据库
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'shujuku062803',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': 'localhost',
        'PORT': 3306
    }
}

编写模型类和相关的序列化器

在views.py文件里编写视图类 

后端查询和添加

from django.shortcuts import render, HttpResponse
from rest_framework.views import APIView
from myapp.models import Teacher, Student
from myapp.serializers import TeaSerializer, StuSerializer
from rest_framework.response import Response


# Create your views here.
# 编写视图类
# 查询增加的视图类
class TeacherAPIView(APIView):
    # 查询老师表中的全部数据
    def get(self, request):
        # 获取全部数据
        teas = Teacher.objects.all()
        # 将数据转化为json数据---序列化
        # 语法：序列化器(数据)
        # 查询数据为结果集时   many=True
        ser = TeaSerializer(teas, many=True)
        # 返回响应
        # drf框架统一将数据存到data里
        return Response(ser.data)

    # 数据的添加
    def post(self, request):
        # 获取添加的全部数据
        # drf将请求的数据统一封装到request.data里
        request_data = request.data
        # request_data就是获取到的vue数据
        # 创建序列化器对象  序列化器(数据)
        # 反序列化的操作需要使用data= 来进行序列化
        ser = TeaSerializer(data=request_data)
        # 检验  如果有错误直接返回错误信息
        ser.is_valid(raise_exception=True)
        # 保存数据  需要调用create()方法 模型序列化器不用
        ser.save()
        # 返回响应
        # status=201  返回响应码
        return Response(ser.data, status=201)

后端删除和修改---根据id来操作

# 删除修改的视图---老师
class UpdateDelTea(APIView):
    # 根据路由输入的id找到对应的数据
    def get(self, request, pk):
        # 根据传递的id 找到对应的数据 模型类.objects.get(id=pk)
        tea = Teacher.objects.get(id=pk)
        # 将获取到的数据转换成json格式---序列化器(数据)
        # 通过get获取到的单条数据不需要写many=True
        ser = TeaSerializer(tea)
        # 返回查询到的数据
        return Response(ser.data)

    def delete(self, request, pk):
        # 删除数据
        try:
            Teacher.objects.get(id=pk).delete()
        except Exception as e:
            # 响应异常
            return HttpResponse(e)
        return Response("删除成功", status=204)

    # 修改数据
    def put(self, request, pk):
        # 修改之前找到修改的数据  模型类.objects.get()
        tea = Teacher.objects.get(id=pk)
        # 1.先获取数据--drf框架请求的数据都存到request.data里
        request_data = request.data
        # 2.反序列化 序列化器(数据)
        # 进行反序列化的操作 需要写data=
        # 对获取到的数据进行修改，所以要把tea写上
        ser = TeaSerializer(tea, data=request_data)
        # 3.验证  有异常直接返回异常
        ser.is_valid(raise_exception=True)
        # 4.保存---put  调用save方法时需要在序列化器中定义update()方法
        ser.save()
        # 返回响应
        return Response(status=201)

 反向查询

# 根据老师查询出对应的学生信息
class TeaStuDetail(APIView):
    def get(self, request, pk):
        # 查询老师名下所有的学生
        # 1.要查询id为9的老师 模型类.objects.get(id=9)
        t1 = Teacher.objects.get(id=pk)
        # 2.再t1这个老师名下找出所有的学生---反向查询只能用get查询
        # t1时获取的老师对象 student:小写的模型类 set:django的内置方法 all():查询全部数据
        stus = t1.student_set.all()
        # 要将stus转化为json类型的数据---序列化操作---序列化器(数据)
        # 当得到的数据为多条数据是需要many=True
        ser = StuSerializer(stus, many=True)
        # stus就是获取到的学生信息
        return Response(ser.data)

配置相关的模型类 

from django.urls import path
from myapp import views

urlpatterns = [
    path("teacher/", views.TeacherAPIView.as_view()),
    path("tea//",views.UpdateDelTea.as_view()),
    path("stu//",views.UpdateDelStu.as_view()),
    path("ts//",views.TeaStuDetail.as_view())
]

---

前端vue编写相关页面 

展示修改删除

添加数据 

配置相关路由 

import TeacherView from '@/views/TeacherView.vue'
import StudentView from '@/views/StudentView.vue'
import AddTeacher from '@/views/AddTeacher.vue'


const routes = [
  {
    path: '/teacher',
    name: 'TeacherView',
    component: TeacherView
  },
  {
    path: '/student/:id',
    name: 'StudentView',
    component: StudentView
  },
  {
    path: '/addteacher',
    name: 'AddTeacher',
    component: AddTeacher
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router