前后端交互图书管理系统小案例

【一】后端

【1】建表

from django.db import models


# Create your models here.
class Book(models.Model):
    title = models.CharField(max_length=32)
    price = models.CharField(max_length=32)
    publish_date = models.DateField(auto_now_add=True)
    publish = models.ForeignKey('Publish', on_delete=models.CASCADE)
    author = models.ManyToManyField('Author')

    def publish_detail(self):
        return {
            'name': self.publish.name,
            'addr': self.publish.addr
        }

    def author_detail(self):
        return [{
            'name': author.name,
            'age': author.age,
            'email': author.email
        } for author in self.author.all()]

    class Meta:
        db_table = 'book'


class Publish(models.Model):
    name = models.CharField(max_length=32)
    addr = models.CharField(max_length=32)
    author = models.OneToOneField('Author', on_delete=models.CASCADE)

    class Meta:
        db_table = 'publish'


class Author(models.Model):
    name = models.CharField(max_length=32)
    age = models.CharField(max_length=32)
    email = models.EmailField()
    def __str__(self):
        return self.name
    class Meta:
        db_table = 'author'

【2】views

from django.shortcuts import render

# Create your views here.
from rest_framework.mixins import ListModelMixin, CreateModelMixin, DestroyModelMixin,UpdateModelMixin,RetrieveModelMixin
from rest_framework.viewsets import GenericViewSet

from bookms.mixin import DigCreateModelMixin
from bookms.models import Book
from bookms.serializer import BookSerializer


class BookView(GenericViewSet,ListModelMixin, DigCreateModelMixin, DestroyModelMixin,UpdateModelMixin,RetrieveModelMixin):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

【3】路由

from django.urls import path, include
from rest_framework.routers import SimpleRouter

from bookms.views import BookView

router = SimpleRouter()
router.register('books', BookView, 'books')
urlpatterns = [
    path('', include(router.urls))
]

【4】序列化类

from rest_framework import serializers

from bookms.models import Book


class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['title', 'price', 'publish_detail'
            , 'publish','author','author_detail']
        extra_kwargs = {
            'publish_detail': {'read_only': True},
            'author_detail': {'read_only': True},

            'publish': {'write_only': True},
            'author': {'write_only': True},
        }

【5】定制返回值

• Book里面

def publish_detail(self):
    return {
        'name': self.publish.name,
        'addr': self.publish.addr
    }

def author_detail(self):
    return [{
        'name': author.name,
        'age': author.age,
        'email': author.email
    } for author in self.author.all()]

【二】前端

• 使用elementplus定制页面

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="书籍名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <!--          <el-icon><timer /></el-icon>-->
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="书籍价格" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <!--          <el-icon><timer /></el-icon>-->
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="出版社" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <!--          <el-icon><timer /></el-icon>-->
          <span style="margin-left: 10px">{{ scope.row.publish_detail.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="作者" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <!--          <el-icon><timer /></el-icon>-->
          <span v-for="(author, index) in scope.row.author_detail" :key="index" style="margin-left: 10px">
      {{ author.name }}
    </span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import axios from "axios";

interface User {
  title: string
  price: string
  publish_detail: string,
  author: string[]
}


const tableData: User[] = [
  {
    title: '',
    price: '',
    publish_detail: '',
    author: []
  }
]

async function load() {
  try {
    const response = await axios.get('http://127.0.0.1:8000/books/')
    console.log(response.data)
    tableData.push(...response.data)

  } catch (err) {
    alert('请求失败')
  }
}

load()
</script>