关联序列化处理 增删改查

1创建新项目的准备工作 1.1命令框内创建新项目

打开指定文件夹，在路径位置输入cmd打开命令行
django-admin startproject 项目名 创建项目

1.2在新项目内创建子应用

python manage.py startapp 子应用名

1.3注册子应用

在settings.py文件内注册子应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    '创建的子应用名'    #注册子应用
]

1.5配置数据库

在settings.py文件内

# 配置数据库
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 使用mysql数据库
        'HOST': 'localhost',  # 主机
        'PORT': 3306,  		# 端口
        'USER': 'root',  	# 数据库的用户名
        'PASSWORD': '密码', # 数据库的密码
        'NAME': '创建的数据库名',  	# 数据库的名字
    }
}

1.6修改语言和时区

在settings.py文件内

LANGUAGE_CODE = 'zh-Hans'  #语言

TIME_ZONE = 'Asia/Shanghai'  #时区

1.8常用的mysql代码语句

查看所有数据库: show databases;
创建数据库: create database 数据名 charset=utf8;
删除数据库: drop database 数据库名;
调用数据库: use 数据库名;
查看数据库下的所有表: show tables;
查看表结构: desc 表名;
查看表中的所有数据: select * from 表名;

1.9安装数据库

在跟项目名同名的文件夹内init.py文件里安装

import pymysql
pymysql.install_as_MySQLdb()

1.9.1创建模型类

在子应用文件夹里的models.py创建

#老师模型类
class Teacher(models.Model):
    tea_name=models.CharField(max_length=20,verbose_name='老师姓名')

    class Meta:
        verbose_name='老师表'
        verbose_name_plural=verbose_name
        db_table='teacher'
    def __str__(self):
        return self.tea_name
#学生模型类
class Student(models.Model):
    stu_name=models.CharField(max_length=20,verbose_name='学生姓名')
    score=models.IntegerField(verbose_name='成绩')
    sex=models.CharField(max_length=5,verbose_name='性别')
    teacher=models.ForeignKey(to=Teacher,on_delete=models.CASCADE,verbose_name='老师')
    class Meta:
        verbose_name='学生表'
        verbose_name_plural=verbose_name
        db_table='student'
    def __str__(self):
        return self.stu_name

1.9.2创建好模型类后进行迁移

在项目内终端执行
生成迁移文件：python manage.py makemigrations
执行迁移:python manage.py migrate
如果迁移出错，把数据库删了创建新的数据库，生成的迁移文件也删了，重新执行上面2个步骤

1.9.3创建超级用户

创建超级用户 （python终端内运行）
python manage.py createsuperuser
电子邮件地址直接回车跳过
(前后密码要一致)
如果出现cryptography报错就python终端内安装
pip install cryptography

2.在子应用的admin.py文件中添加代码，注册表，不然admin控制台没办法管理这个表

from django.contrib import admin
#导包
from myapp.models import Teacher,Student  #models.py文件内创建的模型类名
# Register your models here.
admin.site.register(Teacher)
admin.site.register(Student)

3.运行项目，在admin页面添加数据

前后端分离

前端主要追求的是美观、流畅、兼容
后端追求的是三高，高性能、高并发、高可用

什么是restful风格

增删改查
GET：获取数据
POST：提交数据，创建数据
PUT：提交数据，更新数据
DELETE：删除数据
状态码
200 [GET] 获取数据时的状态码
201 [POST/PUT/PATCH] 添加或创建数据
204 [DELETE] 用于删除的状态码

2.DRF工程 下载第三方模块

在黑窗口内进行安装
pip install djangorestframework

在settings.py文件内注册

跨域也顺便弄好

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',#跨域
    'myapp',
    'rest_framework',
]
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware'   # 添加跨域中间件
]
CORS_ORIGIN_ALLOW_ALL = True    #配置参数，允许所有源访问

drf官方文档 增删改查

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from myapp.models import Teacher,Student
from myapp.scrializers import TeacherSerializers,StudentSerializer,StudentSerializer2
# Create your views here.
class Teacherview(APIView):
    #查询所有老师信息
    def get(self,request):
        teachers=Teacher.objects.all()
        ser=TeacherSerializers(instance=teachers,many=True)
        return Response(ser.data,status=200)
class Studentsview(APIView):
    #查询所有学生信息
    def get(self,request):
        students=Student.objects.all()     #获取数据
        ser=StudentSerializer2(instance=students, many=True)#序列化
        return Response(ser.data,status=200)
    #添加学生信息
    def post(self,request):
        #使用序列化器对数据进行反序列化
        ser=StudentSerializer(data=request.data)
        #判断反序列化是否成功
        if ser.is_valid(raise_exception=True):
            ser.save() #保存
            return Response({'msg':'success'},status=201)
        return Response({'msg':'error'})
class Studentsview2(APIView):
    #查询单个学生信息
    def get(self,request,id):
        try:
            stu_data=Student.objects.get(id=id)
        except Exception as a:
            print(a)
            return Response({'msg':'error'},status=404)
        ser=StudentSerializer(stu_data)
        return Response(ser.data,status=200)
    #修改学生信息
    def put(self,request,id):
        try:
            stu_data=Student.objects.get(id=id)
        except Exception as a:
            print(a)
            return Response({'msg':'error'},status=404)
        ser=StudentSerializer(instance=stu_data,data=request.data)
        #判断反序列化是否成功
        if ser.is_valid(raise_exception=True):
            ser.save()
            return Response({'msg':'success'},status=201)
        return Response({'msg':'error'})
    #删除学生信息
    def delete(self,request,id):
        try:
            Student.objects.filter(id=id).delete()
        except Exception as a:
            print(a)
            return Response({'msg':'error'},status=404)
        return Response({'msg':'success'},status=204)

class Studentsview3(APIView):
    #根据id查询相对应的学生信息
    def get(self,request,id):
        stu_data=Student.objects.filter(teacher_id=id)
        ser=StudentSerializer2(instance=stu_data,many=True)
        return Response(ser.data,status=200)

配置路由

from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
    # path('admin/', admin.site.urls),
    path('stu/',views.Studentsview.as_view()),
    path('stu//',views.Studentsview2.as_view()),
    path('tea/',views.Teacherview.as_view()),
    path('stu2//',views.Studentsview3.as_view())
]

序列化器自动获取

在子应用中创建一个serializers.py文件写入类方法

#导包
from rest_framework import serializers
from myapp.models import Teacher,Student
class TeacherSerializers(serializers.ModelSerializer):
    class Meta:
        model=Teacher
        fields='__all__'

class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model=Student
        fields='__all__'
#外键序列化
#只能进行序列化 只能查询 不能进行反序列化
class StudentSerializer2(serializers.ModelSerializer):
    ##1使用外键表的str方法进行序列化   #可以展示老师姓名
    # teacher=serializers.StringRelatedField()
    #2指定字段序列化   # 可以展示老师姓名
    # teacher=serializers.SlugRelatedField(read_only=True,slug_field='tea_name')
    #3使用外键表的主键(id)进行序列化
    # teacher=serializers.PrimaryKeyRelatedField(read_only=True)
    #4使用自定义方法进行序列化，字段自定义    #可以展示老师姓名
    tea_name=serializers.SerializerMethodField(read_only=True)
    #函数名以get_开头，再加上自定义字段名：  obj是模型类对象
    def get_tea_name(self,obj):     #4
        return obj.teacher.tea_name
    class Meta:
        model=Student
        fields='__all__'

创建vue项目

打开黑窗口 输入
vue create 项目名
选择自定义
只选择路由跟vuex安装

vue准备工作 1安装axios

运行终端输入
npm install --save axios

2实现跨域

在vue根目录创建vue.config.js文件

module.exports={
    devServer:{
        proxy:'http://127.0.0.1:8000/' 
    }
}

3封装方法

在vue项目创建utils文件年里创建request.js文件

import Axios from 'axios'

//常用来封装
export function get(url,params){
    return Axios.get(url,params)
}
export function post(url,params){
    return Axios.post(url,params)
}
export function put(url,params){
    return Axios.put(url,params)
}
export function del(url,params){
    return Axios.delete(url,params)
}

创建vue文件

在views文件夹内创建vue文件
实现增删改查
老师页面vue文件

<template>
    <div>
        <h3>老师页面h3>
        <table width='300px' align='center' border="1px" cellspacing='0px'>
            <tr>
                <td>编号td>
                <td>名字td>
            tr>
            <tr v-for="(item,i) in tealist" :key="i">
                <td>{{item.id}}td>
                <td>
                    
                    
                    
                    <router-link :to="{name:'Student',params:{id:item.id}}">
                        {{item.tea_name}}
                    router-link>
                td>
            tr>
        table>
    div>
template>

<script>
import { get } from '@/utils/request'
export default {
    data(){
        return{
            tealist:[],
        }
    },
    mounted(){
        get('tea/')
        .then((result) => {
            console.log(result)
            this.tealist=result.data
        }).catch((err) => {
            console.log(err)
        });
    }
}
script>

<style>

style>

学生页面vue文件

<template>
    <div>
        <h3>学生页面h3>
        <table align='center' width='500' border="1px" cellspacing='0px'>
            <tr>
                <td>编号td>
                <td>名字td>
                <td>成绩td>
                <td>性别td>
                <td>老师td>
                <td> *** 作td>
            tr>
            <tr v-for="(item,i) in stulist" :key="i">
                <td>{{item.id}}td>
                <td>{{item.stu_name}}td>
                <td>{{item.score}}td>
                <td>{{item.sex}}td>
                <td>{{item.tea_name}}td>
                <td>
                    <button @click="remove(item.id)">删除button>
                    
                    <button @click="getdate(i)">更新button>
                td>
            tr>
        table>
        {{uplist}}
        <p>更新学生信息p>
        姓名<input type="text" v-model="uplist.stu_name"><br>
        成绩<input type="text" v-model="uplist.score"><br>
        性别<input type="text" v-model="uplist.sex"><br>
        老师编号<input type="text" v-model="uplist.teacher"><br>
        <button @click="update">修改button>
    div>
template>

<script>
import { del, get, put } from '@/utils/request';

export default {
    data(){
        return{
            tea_id:this.$route.params.id,
            stulist:[],
            id:0,
            uplist:{
                stu_name:'',
                score:0,
                sex:'',
                teacher:1,        
            }
        }
    },
    mounted(){
        this.getstudata()
    },
    methods:{
        // 封装成函数，因为要多次使用
        getstudata(){
        // 根据老师id动态查询 对应的学生信息
            let url='stu2/' + this.tea_id + '/';
            get(url)
            .then((result) => {
                console.log(result)
                this.stulist=result.data
            }).catch((err) => {
                console.log(err)
            });
        },
        remove(){     //删除学生信息
            let url='stu/'+id+'/'
            del(url)
            .then((result) => {
                console.log(result)
            }).catch((err) => {
                console.log(err)
            });
        },
        getdate(i){     //获取学生信息
            this.id=this.stulist[i].id
            this.uplist.stu_name=this.stulist[i].stu_name
            this.uplist.score=this.stulist[i].score
            this.uplist.sex=this.stulist[i].sex
            this.uplist.teacher=this.stulist[i].teacher
        },
        update(){   //修改学生信息
            let url='stu/'+this.id+'/'
            put(url,this.uplist)
            .then((result) => {
                console.log(result)
                this.getstudata() //获取最新信息
            }).catch((err) => {
                console.log(err)
            });
        }
    },

}
script>

<style>

style>

安装路由

import Teacher from '../views/student/Teacher.vue'
import Student from '../views/student/Student.vue'
const routes = [
  {
    path: '/',//视图页面
    name: 'Teacher',
    component: Teacher
  },
  {
    path: '/student',//视图页面
    name: 'Student',
    component: Student
  },