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

浅的博客

已于 2024-05-16 10:06:12 修改

阅读量642

点赞数 1

文章标签： django python 后端

于 2022-07-03 16:57:20 首次发布

本文链接：https://blog.csdn.net/m0_67345482/article/details/125586055

版权

后端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/<int:pk>/",views.UpdateDelTea.as_view()),
    path("stu/<int:pk>/",views.UpdateDelStu.as_view()),
    path("ts/<int:pk>/",views.TeaStuDetail.as_view())
]

前端vue编写相关页面

展示修改删除

<template>
  <div>
    <h1>老师页面</h1>
    <table border="1px" width="500px" align="center" cellspacing="0">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, i) in lst" :key="i">
        <th>{{ item.id }}</th>
        <!-- 点击老师的名字对应展示对应的学生信息 -->
        <!-- 跳转 router-link双标签 to:""  custom:自定义  v-slot:插槽-->
        <!-- 点击名字给navigate给router-link传递 -->
        <router-link :to="/student/+item.id" custom v-slot = "{navigate}">
          <th @click="navigate">{{ item.name }}</th>
        </router-link>
        <th>{{ item.sex }}</th>
        <th>
          <!-- 点击删除按钮将id传过去 -->
          <button @click="remove(item.id)">删除</button>
          <button @click="show(item.id)">修改</button>
        </th>
      </tr>
    </table>
    <h3>修改老师信息</h3>
    编号：<input type="text" v-model="obj.id" /><br /><br />
    姓名：<input type="text" v-model="obj.name" /><br /><br />
    性别：<input type="radio" v-model="obj.sex" name="sex" value="男" />男
    <input type="radio" v-model="obj.sex" name="sex" value="女" />女<br /><br />
    <button @click="update(obj.id)">确认修改</button>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      lst: [],
      obj: {
          id:0,
          name:"",
          sex:""
       },
    };
  },
  // 挂载：页面加载自动执行
  mounted() {
    Axios.get("http://127.0.0.1:8000/teacher/")
      .then((resp) => {
        console.log(resp);
        this.lst = resp.data;
        // this.$router.push()
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    remove(id) {
      // 向删除的接口发起请求  点击哪条数据就把哪条数据删除
      Axios.delete("http://127.0.0.1:8000/tea/" + id + "/")
        .then((resp) => {
          console.log(resp);
          alert("删除成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    show(id) {
      // 向获取单条数据的接口发起请求
      Axios.get("http://127.0.0.1:8000/tea/" + id + "/")
        .then((resp) => {
          console.log(resp);
          this.obj = resp.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    update(id) {
      // 向修改的接口发起请求
      Axios.put("http://127.0.0.1:8000/tea/" + id + "/", this.obj)
        .then((resp) => {
          console.log(resp);
          alert("修改成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>

添加数据

<template>
  <div>
    <h3>添加老师信息</h3>
    编号：<input type="text" v-model="id" /><br /><br />
    姓名：<input type="text" v-model="name" /><br /><br />
    性别：<input type="radio" v-model="sex" name="sex" value="男" />男
    <input type="radio" v-model="sex" name="sex" value="女" />女<br /><br />
    <button @click="add">添加</button>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      id: 0,
      name: "",
      sex: "",
    };
  },
  methods: {
    add() {
      // 向添加的接口发起请求
      Axios.post("http://127.0.0.1:8000/teacher/", {
        id: this.id,
        name: this.name,
        sex: this.sex,
        teacher_id: this.teacher_id,
      })
        .then((resp) => {
          console.log(resp);
          //添加成功跳转到老师页面 
          this.$router.push("/teacher");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>

配置相关路由

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