Django后台数据获取展示

于 2024-08-13 17:13:53 发布
阅读量134 收藏 3
点赞数 3
分类专栏： Vue Django 文章标签： html5 前端 django mysql vue elementui python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61517307/article/details/141051982
版权

​ 续接Django REST Framework，使用Vite构建Vue3的前端项目

1.跨域获取后台接口并展示

  • 安装Axios
npm install axios --save
  • 前端查看后端所有定义的接口
// 访问后端定义的可视化Api接口文档
http://ip:8000/docs/
// 定义的学生类信息
http://ip:8000/api/v1/students/

  • 前端对后端发起请求
// 导入 axios
import axios from 'axios'

// 页面一加载便获取axios请求

<script>
    // 获取所有信息
    const getStudents = () => {
        // axios请求
        axios.get('http://192.168.20.110:8000/api/v1/students/').then((res)=>{
            // 请求成功
            console.log('成功',res)
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
    }
    // 定义页面加载时自动执行的函数
    const autoRun= () => {
        // 获取所有信息
        getStudents() 
    }
    // 调用自动执行函数执行
    autoRun() 
</script>
  • 后端配置运行环境

// 或者直接在0.0.0.0:8000下运行
python manage.py runserver 0.0.0.0:8000

// 后端开启跨域，安装组件
pip install django-cors-headers
// 注册
INSTALLED_APPS[
    'corsheaders'
]
// 添加到中间件中
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',# 跨域请求
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# ======跨域配置======
# 后端是否支持对 Cookis访问
CORS_ALLOW_CREDENTIALS = True
# 白名单地址
CORS_ORIGIN_WHITELIST = (
    'http://192.168.20.110:8080',
)

  • 跨域获取所有信息
// 导入 axios
import axios from 'axios'

// 添加信息获取提示
import { ElMessage } from 'element-plus'

// 页面一加载便获取axios请求

<script>
    // 获取所有信息
    const getStudents = () => {
        // axios请求
        axios.get('http://192.168.20.110:8000/api/v1/students/').then((res)=>{
            // 请求成功
            // console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                ElMessage({
                    message: '数据加载成功！',
                    type: 'success',
                })
            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
    }
    // 定义页面加载时自动执行的函数
    const autoRun= () => {
        // 获取所有信息
        getStudents() 
    }
    // 调用自动执行函数执行
    autoRun() 
</script>

  • 分页优化
<script lang="ts" setup>
import { ref, reactive } from "vue"
import {More,Edit,Delete} from "@element-plus/icons-vue"
import axios from 'axios'
// 添加信息获取提示
import { ElMessage } from 'element-plus'


// 定义存储集合
var Data = reactive({
    // 定义输入的查询条件
    q_str: ref(""),
    // 存储从后台获取的所有院系信息
    FacultyOptions: reactive([
        {
            value:1,
            label:'计算机学院'
        },
        {
            value:2,
            label:'外语学院'
        },
    ]),
    // 存储选择院系后的值
    FacultySelected: ref(""),

     // 存储从后台获取的所有专业信息
     MajorOptions: reactive([
        {
            value:1,
            label:'计算机专业'
        },
        {
            value:2,
            label:'外语专业'
        },
    ]),
    // 存储选择专业后的值
    MajorSelected: ref(""),
    // ===表格区域定义====
    students: reactive([
        
    ]),
    // =====分页====
    // 当前页
    currentsPage: ref(1),
    // 每页显示的数据量
    pageSize: ref(15),
    // 总数据量所有记录条数
    total: ref(0),
});

// 分页中修改每页的pageSize
const handleSizeChange=(size: any)=>{
  // 修改记录条数
  Data.pageSize = size
  // 重新获取所有信息
  getStudents()
}

// 分页中修改每页的currentsPage
const handleCurrentChange=(page: any)=>{
  // 修改当前页
  Data.currentsPage = page
  // 重新获取所有信息
  getStudents()
}

// ======前后端交互======
// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize
        }
        // axios请求
        axios.get('http://192.168.20.110:8000/api/v1/students/',{params:params}).then((res)=>{
            // 请求成功
            console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
    }
    // 定义页面加载时自动执行的函数
    const autoRun= () => {
        // 获取所有信息
        getStudents() 
    }
    // 调用自动执行函数执行
    autoRun() 

</script>
  • 院系/专业信息展示优化

学生表里只记录了专业的id，专业表里记录了院系的id，要使在学生明细表中展示专业和院系信息则需要在后端序列化专业表和院系表

// serializer.py
# 导入模块
# models中的类与接口转换
from rest_framework import serializers
from studentweb.models import *

# 学院序列化类
class FacultySerializer(serializers.ModelSerializer):

    class Meta:
        model = Faculty
        fields = '__all__'

# 专业序列化类
class MajorSerializer(serializers.ModelSerializer):
    # 序列化学院id
    faculty = FacultySerializer()
    class Meta:
        model = Major
        fields = '__all__'

# 学生序列化类
class StudentSerializer(serializers.ModelSerializer):
    # 序列化专业信息
    major = MajorSerializer()
    class Meta:
        model = Student
        fields = '__all__'
// 专业的名字:major.name
// 院系的名字:major.faculty.name
{
      "sno": "950001",
      "major": {
        "id": 2,
        "faculty": {
          "id": 1,
          "name": "计算机学院"
        },
        "name": "计算机网络"
      },
      "name": "王晓宇",
      "gender": "男",
      "birthday": "2022-03-01",
      "mobile": "13099881122",
      "email": "wangxiaoyu@qq.com",
      "address": "上海市闵行区春都路88号",
      "image": ""
    },
  •  表格绑定展示
// 更改前端表格展示数据
 <el-table-column prop="major.faculty.name" label="院系" align="center" width="120" />
 <el-table-column prop="major.name" label="专业" align="center" width="120" />
  • 表格过长数据处理
// 过长信息不展示完全使用'...'显示

// 标签添加 :show-overflow-tooltip="true"属性

2.Axios模块化请求

  • request脚本实现
// 新建 /src/utils/request.ts
// 封装 axios代码实现模块化

// 1.导入
import axios from 'axios'
// 2.创建一个Axios的app
const request = axios.create({
    // 定义基本 URL
    baseURL: 'http://192.168.__.___:8000/api/v1/',
    // 设置超时
    timeout: 5000,
    
})

// 3.暴露
export default request 

// 添加request.ts配置的axios

<script lang="ts" setup>
// 导入request
import request from "../../utils/request";
import { ref, reactive } from "vue"
import {More,Edit,Delete} from "@element-plus/icons-vue"

// 添加信息获取提示
import { ElMessage } from 'element-plus'


// 定义存储集合
var Data = reactive({
    // 定义输入的查询条件
    q_str: ref(""),
    // 存储从后台获取的所有院系信息
    FacultyOptions: reactive([
        {
            value:1,
            label:'计算机学院'
        },
        {
            value:2,
            label:'外语学院'
        },
    ]),
    // 存储选择院系后的值
    FacultySelected: ref(""),

     // 存储从后台获取的所有专业信息
     MajorOptions: reactive([
        {
            value:1,
            label:'计算机专业'
        },
        {
            value:2,
            label:'外语专业'
        },
    ]),
    // 存储选择专业后的值
    MajorSelected: ref(""),
    // ===表格区域定义====
    students: reactive([
        
    ]),
    // =====分页====
    // 当前页
    currentsPage: ref(1),
    // 每页显示的数据量
    pageSize: ref(15),
    // 总数据量所有记录条数
    total: ref(0),
});

// 分页中修改每页的pageSize
const handleSizeChange=(size: any)=>{
  // 修改记录条数
  Data.pageSize = size
  // 重新获取所有信息
  getStudents()
}

// 分页中修改每页的currentsPage
const handleCurrentChange=(page: any)=>{
  // 修改当前页
  Data.currentsPage = page
  // 重新获取所有信息
  getStudents()
}

// ======前后端交互======
// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize
        }
        // axios请求
        request.get('students/',{params:params}).then((res)=>{
            // 请求成功
            console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
    }
    // 定义页面加载时自动执行的函数
    const autoRun= () => {
        // 获取所有信息
        getStudents() 
    }
    // 调用自动执行函数执行
    autoRun() 

</script>
  • Api数据集及请求类型以及url优化 接口实现
// 新建 /src/api/students.ts(majors.ts/facultys.ts)

// 导入
import request from "../utils/request";

// RESTFUL ---> 6个接口【获取所有，添加，获取某一个，修改，删除】

// ====获取所有====
const getAll = (params ?: any) => {
    // request
    return request({
        method: "GET",
        url: "/students",
        params,
    })
}

// ====添加====
const add= (data: any) => {
    // request
    return request({
        method: "POST",
        url: "/students",
        data,
    })
}
// ====获取单一数据====
const getOne=(id: any) => {
    // request
    return request({
        method: "GET",
        url: `/students/${id}`,
    })
}
// ====修改====
const edit=(id: any, data: any) => {
    // request
    return request({
        method: "PUT",
        url: `/students/${id}`,
        data
    })
}
// ====删除====
const del = (id: any) => {
    // request
    return request({
        method: "DELETE",
        url: `/students/${id}`,
    })
}
export default {
    getAll,
    add,
    getOne,
    edit,
    del,
    // 也可以直接在此处定义其他的 api
}


// 新建 index.ts用于导入所有api

// 导入所有
import studentApi from "./students"
import majorsApi from "./majors"
import facultysApi from "./facultys"

// 封装并发布
export default {
    studentApi,
    majorsApi,
    facultysApi,    
}

// 使用 上述定义的接口

<script lang="ts" setup>
import { ref, reactive } from "vue"
import {More,Edit,Delete} from "@element-plus/icons-vue"
// 导入API
import indexApi from '../../api/index'
// 添加信息获取提示
import { ElMessage } from 'element-plus'


// 定义存储集合
var Data = reactive({
    // 定义输入的查询条件
    q_str: ref(""),
    // 存储从后台获取的所有院系信息
    FacultyOptions: reactive([
        {
            value:1,
            label:'计算机学院'
        },
        {
            value:2,
            label:'外语学院'
        },
    ]),
    // 存储选择院系后的值
    FacultySelected: ref(""),

     // 存储从后台获取的所有专业信息
     MajorOptions: reactive([
        {
            value:1,
            label:'计算机专业'
        },
        {
            value:2,
            label:'外语专业'
        },
    ]),
    // 存储选择专业后的值
    MajorSelected: ref(""),
    // ===表格区域定义====
    students: reactive([
        
    ]),
    // =====分页====
    // 当前页
    currentsPage: ref(1),
    // 每页显示的数据量
    pageSize: ref(15),
    // 总数据量所有记录条数
    total: ref(0),
});

// 分页中修改每页的pageSize
const handleSizeChange=(size: any)=>{
  // 修改记录条数
  Data.pageSize = size
  // 重新获取所有信息
  getStudents()
}

// 分页中修改每页的currentsPage
const handleCurrentChange=(page: any)=>{
  // 修改当前页
  Data.currentsPage = page
  // 重新获取所有信息
  getStudents()
}

// ======前后端交互======
// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize
        }
        // axios请求
        indexApi.studentApi.getAll(params).then((res)=>{
            // 请求成功
            console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
    }
    // 定义页面加载时自动执行的函数
    const autoRun= () => {
        // 获取所有信息
        getStudents() 
    }
    // 调用自动执行函数执行
    autoRun() 

</script>

<template>
    <!-- 1.顶部查询区域   styple="display: flax;"横向显示-->
    <el-form :inline="true"  class="demo-form-inline">
    <el-form-item label="查询条件">
      <el-input v-model="Data.q_str" placeholder="请输入查询条件" clearable />
    </el-form-item>
    <!-- 动态获取院系信息 -->
    <el-form-item label="院系">
      <el-select v-model="Data.FacultySelected" placeholder="请选择院系">
        <el-option 
        v-for="item in Data.FacultyOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
    <!-- 动态获取专业信息 -->
    <el-form-item label="专业">
      <el-select v-model="Data.MajorSelected" placeholder="请选择专业">
        <el-option 
        v-for="item in Data.MajorOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="Activity time">
      <el-date-picker
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary">
        <!-- 引入方法1 -->
        <el-icon><component class="icons" is="Search"></component></el-icon>
        <span>查询</span></el-button>
      <el-button type="primary">
        <!-- 引入方法2 -->
        <el-icon><Finished /></el-icon>
        <span>全部</span></el-button>
      <el-button type="primary">
        <el-icon><Pointer /></el-icon>
        <span>添加</span></el-button>
    </el-form-item>
</el-form>
    <!-- 2.表格信息部分 -->
    <el-table :data="Data.students" stripe border style="width: 100%" :header-cell-style="{ backgroundColor:'#409EFF',color:'#FFF',FontSize:'14px' }">
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column prop="sno" label="学号" align="center" width="80" />
        <el-table-column prop="name" label="姓名" align="center" width="80" />
        <el-table-column prop="gender" label="性别" align="center" width="80"  />
        <el-table-column prop="birthday" label="出生日期" align="center" width="180" />
        <el-table-column prop="major.faculty.name" label="院系" align="center" width="120" :show-overflow-tooltip="true"/>
        <el-table-column prop="major.name" label="专业" align="center" width="120" />
        <el-table-column prop="mobile" label="电话" align="center" width="140" />
        <el-table-column prop="email" label="Email" align="center" width="180" :show-overflow-tooltip="true" />
        <el-table-column prop="address" label="地址" align="center" :show-overflow-tooltip="true"/>
        <!-- 按钮区域 -->
        <el-table-column label="操作" align="center">
            <el-button type="primary" :icon="More" circle size="small"/>
            <el-button type="warning" :icon="Edit" circle size="small"/>
            <el-button type="danger" :icon="Delete" circle size="small"/>
        </el-table-column>

    </el-table>
    <!-- 3.分页 currentPage4当前页 pageSize4每页大小 total记录条数 handleSizeChange改变每页大小 handleCurrentChange改变当前页  -->
    <el-pagination style="margin-top: 28px;"
    background
      v-model:current-page="Data.currentsPage"
      v-model:page-size="Data.pageSize"
      :page-sizes="[10,12,15,17,20,25,40,50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Data.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

</style>
  • 院系联级下拉框实现
// 1.重新定义FacultyOptions 结构
// 定义存储集合
var Data = reactive({
    // 存储从后台获取的所有院系信息
    FacultyOptions: reactive([
        { id:"",name:""}, 
    ])
}),
// 定义页面加载时自动执行的函数

// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize
        }
        // axios请求
        indexApi.studentApi.getAll(params).then((res)=>{
            // 请求成功
            console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
     }

// 2.获取所有院系信息
const getFacultys = ()=> {
    // 请求
    indexApi.facultysApi.getAll().then((res)=>{
    // console.log(res.data)
    Data.FacultyOptions = res.data.results;
  })
    
}

    
// 3.定义页面加载时自动执行的函数
const autoRun= () => {
    // 获取所有信息
    getStudents() 
    // 获取院系填充信息
    getFacultys()
}



// 调用自动执行函数执行
autoRun() 

4.更改院系标签值
<!-- 动态获取院系信息  clearable filterable 添加过滤-->
    <el-form-item label="院系">
      <el-select v-model="Data.FacultySelected" placeholder="请选择院系" clearable filterable>
        <el-option 
        v-for="item in Data.FacultyOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
  • 专业联动院系下拉框实现 
<script lang="ts" setup>
import { ref, reactive } from "vue"
import {More,Edit,Delete} from "@element-plus/icons-vue"
// 导入API
import indexApi from '../../api/index'
// 添加信息获取提示
import { ElMessage } from 'element-plus'



// 定义存储集合
var Data = reactive({
    // 定义输入的查询条件
    q_str: ref(""),
    // 存储从后台获取的所有院系信息
    FacultyOptions: reactive([
        { id:"",name:""}, 
    ]),
    // 存储选择院系后的值
    FacultySelected: ref(""),

     // 存储从后台获取的所有专业信息
     MajorOptions: reactive([
     {
      id: "",
      name: ""
    },
    ]),
    // 存储选择专业后的值
    MajorSelected: ref(""),


// ======前后端交互======

// 获取所有院系信息
const getFacultys = ()=> {
  
  // 请求
  indexApi.facultysApi.getAll().then((res)=>{
    // console.log(res.data)
    Data.FacultyOptions = res.data.results;
  })
};
// 获取院系对应的专业信息
const getMajors = () => {
  // 准备条件
  let params = {
    // http://192.168.20.110:8000/api/v1/majors/?name=&faculty=1
    name:'',
    faculty: Data.FacultySelected
  }
  // 请求
  indexApi.majorsApi.getAll(params).then((res)=>{
    // console.log(res.data.results)
    Data.MajorOptions = res.data.results;
  })
};


// 定义页面加载时自动执行的函数
const autoRun= () => {
    // 获取所有信息
    getStudents() 
    // 获取院系填充信息
    getFacultys()
}
// 调用自动执行函数执行
autoRun() 

</script>

<template>
    <!-- 动态获取院系信息 -->
    <el-form-item label="院系">
      <el-select v-model="Data.FacultySelected" placeholder="请选择院系" clearable filterable @change="getMajors">
        <el-option 
        v-for="item in Data.FacultyOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
    <!-- 动态获取专业信息 -->
    <el-form-item label="专业">
      <el-select v-model="Data.MajorSelected" placeholder="请选择专业">
        <el-option 
        v-for="item in Data.MajorOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
   
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary">
        <!-- 引入方法1 -->
        <el-icon><component class="icons" is="Search"></component></el-icon>
        <span>查询</span></el-button>
      <el-button type="primary">
        <!-- 引入方法2 -->
        <el-icon><Finished /></el-icon>
        <span>全部</span></el-button>
      <el-button type="primary">
        <el-icon><Pointer /></el-icon>
        <span>添加</span></el-button>
    </el-form-item>
</el-form>
</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

</style>
// 后端注意 filter.py Major筛选类的定义

# Major的filter类
class MajorFilter(FilterSet):
    # 重写支持模糊匹配的字段
    name = filters.CharFilter(field_name='name', lookup_expr='icontains')

    class Meta:
        model = Major
        fields = ('name','faculty')
  • 面向对象思维优化Api接口
// 新建 api/apibase.ts 定义基础类

// 导入
import request from "../utils/request";

export default class Apibase {

    // 定义属性
    public name : string;

    // 构造函数(器)
    constructor(name : string) {
        this.name = name;
    }

    // 方法
    public getAll = (params?: any) => {
        // request请求
        return request({
            method: "GET",
            url: `${this.name}`,
            params,
        })
    }

    // ====添加====
    public add= (data: any) => {
        // request
        return request({
            method: "POST",
            url: `${this.name}`,
            data,
        })
    }
    // ====获取单一数据====
    public getOne=(id: any) => {
        // request
        return request({
            method: "GET",
            url: `${this.name}/${id}`,
        })
    }
    // ====修改====
    public edit=(id: any, data: any) => {
        // request
        return request({
            method: "PUT",
            url: `${this.name}/${id}`,
            data
        })
    }
    // ====删除====
    public del = (id: any) => {
        // request
        return request({
            method: "DELETE",
            url: `${this.name}/${id}`,
        })
    }
}

// 调用基础类 api/index.ts


// 导入基础类
import Apibase from "./apibase"

// 实例化对象
let studentApi = new Apibase("students");
let majorsApi = new Apibase("majors");
let facultysApi = new Apibase("facultys");

// 封装并发布
export default {
    studentApi,
    majorsApi,
    facultysApi,    
}

// 删除/注销 facultys.ts、majors.ts、students.ts
  • 联级信息过滤实现查询和展示全部的功能
// 输入关键字筛选实现

// 后端输入筛选字段设置
# 学生视图
class StudentViewSet(ModelViewSet):
    """
    create:
    创建院系信息
    retrieve:
    获取院系信息详情数据
    update:
    完整更新院系信息
    partial_update:
    部分更新院系信息
    destroy:
    删除院系信息
    list:
    获取所有院系信息
    """
    queryset = Student.objects.all()
    serializer_class = StudentSerializer
    # 分页
    pagination_class = MyPageNumberPagination
    filter_class = StudentFilter
    # 指定查找匹配的字段
    search_fields = ('sno','name','mobile','email','address')

// 前端获取所有信息中新增search筛选条件

// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize,
            // 一对多,可以匹配多个字段 ?search=...
            search: Data.q_str
        }
        // axios请求
        indexApi.studentApi.getAll(params).then((res)=>{
            // 请求成功
            // console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
};

// 绑定点击事件
<el-button type="primary" @click="getStudents">
    <el-icon><component class="icons" is="Search"></component></el-icon>
    <span>查询</span>
</el-button>
// 点击全部按钮查询实现
// 定义函数
// 点击全部 清楚删选条件
const listAllStudent = () =>{
  // 清空查询条件
  Data.q_str = ''
  // 重新获取所有信息
  getStudents()
}

// 绑定按钮

<el-button type="primary" @click="listAllStudent">
    <el-icon><Finished /></el-icon>
    <span>全部</span>
</el-button>
# 院系筛选条件 http://ip/api/v1/students/?sno=&name=&mobile=&major=&faculty=5

# 更改后端代码 filter.py

class StudentFilter(FilterSet):
    # 重写支持模糊匹配的字段
    sno = filters.CharFilter(field_name='sno', lookup_expr='icontains')
    name = filters.CharFilter(field_name='name', lookup_expr='icontains')
    mobile = filters.CharFilter(field_name='mobile', lookup_expr='icontains')
    # 添加专业字段匹配
    major = filters.CharFilter(field_name='major')
    # 专业表跳转到学院表
    faculty = filters.CharFilter(field_name='major__faculty')

    class Meta:
        model = Student
        # 新增专业字段
        fields = ('sno','name','mobile','major')

// 前端绑定
// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize,
            // 一对多,可以匹配多个字段 ?search=...
            search: Data.q_str,
            // 添加=====院系字段 提供学院的 key====
            faculty: Data.FacultySelected,
        }
        // axios请求
        indexApi.studentApi.getAll(params).then((res)=>{
            // 请求成功
            // console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
};

// 点击全部 清楚删选条件
const listAllStudent = () =>{
  // 清空查询条件
  Data.q_str = ''
  // ======清空院系条件======
  Data.FacultySelected = ''
  // 重新获取所有信息
  getStudents()
}
// 专业信息筛选

// 获取所有信息
const getStudents = () => {
    // 定义一个集合存储分页参数
        let params = {
            page: Data.currentsPage,
            size: Data.pageSize,
            // 一对多,可以匹配多个字段 ?search=...
            search: Data.q_str,
            // 添加院系字段 提供学院的 key
            faculty: Data.FacultySelected,
            // 添加专业筛选
            major: Data.MajorSelected
        }
        // axios请求
        indexApi.studentApi.getAll(params).then((res)=>{
            // 请求成功
            // console.log('成功',res)
            // 判断是否成功
            if (res.status==200){
                // 成功执行
                Data.students = res.data.results
                // 将记录总数绑定到分页的total
                Data.total = res.data.count
                // 成功提示
                ElMessage({
                  message: '数据加载成功！',
                  type: 'success',
                })

            }
        }).catch((error)=>{
            // 请求失败
            console.log('失败',error)
        })
};

// 点击全部 清楚删选条件
const listAllStudent = () =>{
  // 清空查询条件
  Data.q_str = ''
  Data.FacultySelected = ''
  Data.MajorSelected = ''
  // 重新获取所有信息
  getStudents()
}
  • 配置Vue实例的全局变量
// 挂载全局对象
// Vue2.0-->Vue.prototype.$api = api 
// Vue3.0-->app.config.globalProperties.api = api
// =====main.ts定义全局变量=====
// 导入所有数据集的 Api
import Apibase from './api/apibase'
// 将 Api挂载到全局的属性
app.config.globalProperties.api = Apibase
// =====全局定义Api使用 info.vue=====
import { ref, reactive, getCurrentInstance } from "vue"
// 获取当前实例
const indexApi = (getCurrentInstance() as any).proxy.api;
  • 请求拦截器和响应拦截器

请求拦截器： 自动添加身份验证的token 


// ====请求拦截器 utils/request.ts=====

// ====封装 axios代码实现模块化====
// 1.导入
import axios from 'axios'
// 2.创建一个Axios的app
const request = axios.create({
    // 定义基本 URL
    baseURL: 'http://192.168.20.110:8000/api/v1/',
    // 设置超时
    timeout: 5000,
    
})

// ====请求拦截器（发请求request）基于上边创建的request====
request.interceptors.request.use(
    (config: any) => {
        // 获取本地loalstorage中的toten
        let token = localStorage.getItem('toten')
        // 判断是否有token
        if(token) {
            // 如果有token，就在请求头中添加token
            config.headers.common['token'] = token
        }
        // 返回
        return config
    },
    (error: any) => {
        Promise.reject(error);
    },
);
// ====响应拦截器（反馈response） 基于上边创建的request====
request.interceptors.response.use();
// 3.暴露
export default request 


// ==========后端配置 settings.py========
CORS_ALLOW_HEADERS = (
    'token',
    'jwt',
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

响应拦截器： 自动提示所有的请求报错信息

// ====封装 axios代码实现模块化====
// 1.导入
import axios from 'axios'
import {ElMessage} from 'element-plus'
// 2.创建一个Axios的app
const request = axios.create({
    // 定义基本 URL
    baseURL: 'http://192.168.20.110:8000/api/v1/',
    // 设置超时
    timeout: 5000,
    
})

// ====请求拦截器（发请求request）基于上边创建的request====
request.interceptors.request.use(
    (config: any) => {
        // 获取本地loalstorage中的toten
        let token = localStorage.getItem('toten')
        // 判断是否有token
        if(token) {
            // 如果有token，就在请求头中添加token
            config.headers.common['token'] = token
        }
        // 返回
        return config
    },
    (error: any) => {
        Promise.reject(error);
    },
);

// ====响应拦截器（反馈response） 基于上边创建的request====
request.interceptors.response.use(
    (response: any) => response,
    (error: any) => {
        if (error && error.response) {
            error.data = {};
            switch (error.response.status) {
                case 400:
                    error.data.msg = '错误请求';
                    ElMessage.error(error.data.msg)
                    break
                case 401:
                    error.data.msg = '未授权，请重新登录';
                    ElMessage.error(error.data.msg)
                    break
                case 403:
                    error.data.msg = '拒绝访问';
                    ElMessage.error(error.data.msg)
                    break
                case 404:
                    error.data.msg = '请求错误,未找到该资源';
                    ElMessage.error(error.data.msg)
                    break
                case 405:
                    error.data.msg = '请求方法未允许';
                    ElMessage.error(error.data.msg)
                    break
                case 408:
                    error.data.msg = '请求超时';
                    ElMessage.error(error.data.msg)
                    break
                case 500:
                    error.data.msg = '服务器端出错';
                    ElMessage.error(error.data.msg)
                    break
                case 501:
                    error.data.msg = '网络未实现';
                    ElMessage.error(error.data.msg)
                    break
                case 502:
                    error.data.msg = '网络错误';
                    ElMessage.error(error.data.msg)
                    break
                case 503:
                    error.data.msg = '服务不可用';
                    ElMessage.error(error.data.msg)
                    break
                case 504:
                    error.data.msg = '网络超时';
                    ElMessage.error(error.data.msg)
                    break
                case 505:
                    error.data.msg = 'http版本不支持该请求';
                    ElMessage.error(error.data.msg)
                    break
                default:
                    error.data.msg = `连接错误${error.response.status}`;
                    ElMessage.error(error.data.msg)
            }
        } else {
            error.data.msg = "连接到服务器失败";
            ElMessage.error(error.data.msg)
        }
        return Promise.reject(error);
    }
);
// 3.暴露
export default request

3.信息弹出层的布局和数据填充实现

  • 信息弹出层实现
// ========定义存储集合========
var Data = reactive({
    // 定义输入的查询条件
    q_str: ref(""),
    // 存储从后台获取的所有院系信息
    FacultyOptions: reactive([
        { id:"",name:""}, 
    ]),
    // 存储选择院系后的值
    FacultySelected: ref(""),

     // 存储从后台获取的所有专业信息
     MajorOptions: reactive([
     {
      id: "",
      name: ""
    },
    ]),
    // 存储选择专业后的值
    MajorSelected: ref(""),
    // ===表格区域定义====
    students: reactive([
        
    ]),
    // =====分页====
    // 当前页
    currentsPage: ref(1),
    // 每页显示的数据量
    pageSize: ref(15),
    // 总数据量所有记录条数
    total: ref(0),
    // =====弹出层-----
    dialogFormVisible: ref(false),
});
// ====弹出层（顶部添加按钮）====
const addStudent = () => {
  Data.dialogFormVisible = true;
}

    

<!-- 4.弹出层 -->
    <el-dialog v-model="Data.dialogFormVisible" title="学生信息" width="40%">
    <el-form :inline="true">
      <el-form-item label="学号:">
        <el-input placeholder="请输入" />
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input placeholder="请输入" />
      </el-form-item>
      <el-form-item label="性别:" style="width: 20%;">
        <el-select placeholder="请选择">
          <el-option label="男" value="shanghai" />
          <el-option label="女" value="beijing" />
        </el-select>
      </el-form-item>
    
      <!-- 动态获取院系信息 -->
    <el-form-item style="width: 32%;" label="院系:">
      <el-select v-model="Data.FacultySelected" placeholder="请选择院系" clearable filterable @change="getMajors">
        <el-option 
        v-for="item in Data.FacultyOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
    <!-- 动态获取专业信息 -->
    <el-form-item style="width: 32%;" label="专业:">
      <el-select v-model="Data.MajorSelected" placeholder="请选择专业" clearable filterable>
        <el-option 
        v-for="item in Data.MajorOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
   
    <el-form-item label="电话:">
      <el-input placeholder="请输入" />
    </el-form-item>
    <el-form-item label="邮箱:">
      <el-input placeholder="请输入" />
    </el-form-item>
     <!-- 日期 -->
     <el-form-item style="width: 32%;" label="出生日期:">
      <el-date-picker
        type="date"
        placeholder="请选择日期"
        clearable
      />
    </el-form-item>
    <el-form-item style="width: 57%;" label="家庭住址:">
      <el-input  type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button>取消</el-button>
        <el-button>提交</el-button>
      </div>
    </template>
  </el-dialog>

  • 优化弹出层展示实现

// 弹出层定义
// 定义存储集合
var Data = reactive({
    // =====弹出层-----
    dialogFormVisible: ref(false),
    // 定义弹出层标题
    layerTitle: ref(""),
    // 定义表单双向绑定的值
    studentform: reactive({
      sno: ref(""),
      name: ref(""),
      gender: ref(""),
      birthday: ref(""),
      faculty: reactive({
        // 存储从后台获取的所有院系信息
        FacultyOptions: reactive([
          { id:"",name:""}, 
        ]),
        // 存储选择院系后的值
        FacultySelected: ref(""),
        }),
      major: reactive({
        // 存储从后台获取的所有专业信息
        MajorOptions: reactive([
        {
          id: "",
          name: ""
        },
        ]),
        // 存储选择专业后的值
        MajorSelected: ref(""),
        }),
      mobile: ref(""),
      email: ref(""),
      address: ref(""),
    })
})

// ====弹出层（顶部添加按钮）====
const addStudent = () => {
  Data.dialogFormVisible = true;
  // 修改标题
  Data.layerTitle = '【添加学生信息】'
}

// *************************
// 获取所有院系信息
const getFacultysTC = ()=> {
  
  // 请求
  indexApi.facultysApi.getAll().then((res)=>{
    // console.log(res.data)
    Data.studentform.faculty.FacultyOptions = res.data.results;
  })
};
// 获取院系对应的专业信息
const getMajorsTC = () => {
  // 准备条件
  let params = {
    // http://192.168.20.110:8000/api/v1/majors/?name=&faculty=1
    name:'',
    faculty: Data.studentform.faculty.FacultySelected
  }
  // 请求
  indexApi.majorsApi.getAll(params).then((res)=>{
    // console.log(res.data.results)
    Data.studentform.major.MajorOptions = res.data.results;
  })
};


// 关闭弹出层
const closeLayer = () => {
  Data.dialogFormVisible = false;
}


// 定义页面加载时自动执行的函数
const autoRun= () => {
    // 获取所有信息
    getStudents() 
    // 获取院系填充信息
    getFacultys()
    // 获取弹出层院系填充信息
    getFacultysTC()
}
// 调用自动执行函数执行
autoRun() 


// 动态标题绑定
<!-- 标题 -->
<template #title>
    <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">{{ Data.layerTitle}}</div>
</template>

// 表单数据显示
<!-- 4.弹出层 -->
    <el-dialog v-model="Data.dialogFormVisible" width="40%">
      <!-- 标题 -->
       <template #title>
          <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">{{ Data.layerTitle}}</div>
       </template>
        <!--先在form上绑定 Data.studentform  -->
    <el-form v-model="Data.studentform" :inline="true">
      <!-- 然后在每一个值上进行绑定 -->
      <el-form-item label="学号:">
        <el-input v-model="Data.studentform.sno" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="Data.studentform.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="性别:" style="width: 20%;">
        <el-select v-model="Data.studentform.gender" placeholder="请选择">
          <el-option label="男" value="shanghai" />
          <el-option label="女" value="beijing" />
        </el-select>
      </el-form-item>
    
      <!-- 动态获取院系信息 -->
    <el-form-item style="width: 32%;" label="院系:">
      <el-select v-model="Data.studentform.faculty.FacultySelected" placeholder="请选择院系" clearable filterable @change="getMajorsTC">
        <el-option 
        v-for="item in Data.studentform.faculty.FacultyOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
    <!-- 动态获取专业信息 -->
    <el-form-item style="width: 32%;" label="专业:">
      <el-select v-model="Data.studentform.major.MajorSelected" placeholder="请选择专业" clearable filterable>
        <el-option 
        v-for="item in Data.studentform.major.MajorOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
   
    <el-form-item label="电话:">
      <el-input v-model="Data.studentform.mobile" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="邮箱:">
      <el-input v-model="Data.studentform.email" placeholder="请输入" />
    </el-form-item>
     <!-- 日期 -->
     <el-form-item style="width: 32%;" label="出生日期:">
      <el-date-picker
        type="date"
        placeholder="请选择日期"
        clearable
        v-model="Data.studentform.birthday"
      />
    </el-form-item>
    <el-form-item style="width: 57%;" label="家庭住址:">
      <el-input v-model="Data.studentform.address"  type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeLayer">取消</el-button>
        <el-button>提交</el-button>
      </div>
    </template>
  </el-dialog>
  • 三种状态加载弹出层实现
var Data = reactive({
    // 弹出层中表单元素是否可编辑定义
    isView: ref(false), // 是否为查看状态 默认不是
    sEdit: ref(false), // 是否为编辑状态 默认不是
})

// 查看信息
const viewStudent = (row: any) => {
  Data.dialogFormVisible = true;
  // 修改标题
  Data.layerTitle = '【查看学生信息】'
  // 编辑状态
  Data.isEdit = false
  // 查看状态
  Data.isView = true
}

// 编辑信息
 const editStudent = (row: any) => {
  Data.dialogFormVisible = true;
  // 修改标题
  Data.layerTitle = '【编辑学生信息】'
  // 编辑状态
  Data.isEdit = true
  // 查看状态
  Data.isView = false
}


<!-- 按钮区域 -->
<el-table-column label="操作" align="center">
    <el-button type="primary" :icon="More" @click="viewStudent" circle size="small"/>
    <el-button type="warning" :icon="Edit" @click="editStudent" circle size="small"/>
    <el-button type="danger" :icon="Delete" circle size="small"/>
</el-table-column>

<!-- 4.弹出层 -->
    <el-dialog v-model="Data.dialogFormVisible" width="40%">
      <!-- 标题 -->
       <template #title>
          <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">{{ Data.layerTitle}}</div>
       </template>
        <!--先在form上绑定 Data.studentform  -->
    <el-form v-model="Data.studentform" :inline="true">
      <!-- 然后在每一个值上进行绑定 -->
      <el-form-item label="学号:">
        <!-- 设置字段是否可编辑 :disabled="Data.isEdit || Data.isView" 若一个为 True则输入框即为禁用状态 -->
        <el-input v-model="Data.studentform.sno" :disabled="Data.isEdit || Data.isView" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="Data.studentform.name" :disabled="Data.isView" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="性别:" style="width: 20%;">
        <el-select v-model="Data.studentform.gender" :disabled="Data.isView" placeholder="请选择">
          <el-option label="男" value="shanghai" />
          <el-option label="女" value="beijing" />
        </el-select>
      </el-form-item>
    
      <!-- 动态获取院系信息 -->
    <el-form-item style="width: 32%;" label="院系:">
      <el-select v-model="Data.studentform.faculty.FacultySelected" :disabled="Data.isView" placeholder="请选择院系" clearable filterable @change="getMajorsTC">
        <el-option 
        v-for="item in Data.studentform.faculty.FacultyOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
    <!-- 动态获取专业信息 -->
    <el-form-item style="width: 32%;" label="专业:">
      <el-select v-model="Data.studentform.major.MajorSelected" :disabled="Data.isView" placeholder="请选择专业" clearable filterable>
        <el-option 
        v-for="item in Data.studentform.major.MajorOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id" />
        <!-- <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" /> -->
      </el-select>
    </el-form-item>
   
    <el-form-item label="电话:">
      <el-input v-model="Data.studentform.mobile" :disabled="Data.isView" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="邮箱:">
      <el-input v-model="Data.studentform.email" :disabled="Data.isView" placeholder="请输入" />
    </el-form-item>
     <!-- 日期 -->
     <el-form-item style="width: 32%;" label="出生日期:">
      <el-date-picker
        type="date"
        placeholder="请选择日期"
        clearable
        v-model="Data.studentform.birthday"
        :disabled="Data.isView"
      />
    </el-form-item>
    <el-form-item style="width: 57%;" label="家庭住址:">
      <el-input v-model="Data.studentform.address" :disabled="Data.isView"  type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeLayer">取消</el-button>
        <el-button v-show="!Data.isView">提交</el-button>
      </div>
    </template>
  </el-dialog>
  • 实现填充数据到弹出层
var Data = reactive({
    // 定义表单双向绑定的值
    studentform: reactive({
      sno: ref(""),
      name: ref(""),
      gender: ref(""),
      birthday: ref(""),
      faculty: ref(""),
      major: ref(""),
      mobile: ref(""),
      email: ref(""),
      address: ref(""),
    }),
    // 弹出层中表单元素是否可编辑定义
    isView: ref(false), // 是否为查看状态 默认不是
    isEdit: ref(false), // 是否为编辑状态 默认不是
});

// 查看学生信息
const viewStudent = (row: any) => {
  // 设定标题
  Data.layerTitle = "【查看学生信息】";
  // 设为查看
  Data.isView = true;
  // 可见
  Data.dialogFormVisible = true;
  // 当前行赋值为studentForm -- 深拷贝
  Data.studentform = JSON.parse(JSON.stringify(row));
};

// 编辑学生信息
const editStudent = (row: any) => {
  // 设定标题
  Data.layerTitle = "【编辑学生信息】";
  // 设为编辑
  Data.isEdit = true;
  // 可见
  Data.dialogFormVisible = true;
  // 当前行赋值为studentForm -- 深拷贝
  console.log(row)
  // Data.studentform = row
  Data.studentform = JSON.parse(JSON.stringify(row));
};


// 关闭弹出层
const closeLayer = () => {
  Data.dialogFormVisible = false;
  // 编辑和查看设置为False
  Data.isEdit = false;
  Data.isView = false;
  // 初始化表单
  Data.studentform.sno = "";
  Data.studentform.name = "";
  Data.studentform.gender = "";
  Data.studentform.birthday = "";
  Data.studentform.major = "";
  Data.studentform.faculty = "";
  Data.studentform.mobile = "";
  Data.studentform.email = "";
  Data.studentform.address = "";
}

<!-- 按钮区域 -->
<el-table-column label="操作" align="center">
    <template #default="scope">
        <el-button type="primary" :icon="More" @click="viewStudent(scope.row)" circle size="small"/>
        <el-button type="warning" :icon="Edit" @click="editStudent(scope.row)" circle size="small"/>
        <el-button type="danger" :icon="Delete" circle size="small"/>
    </template>
</el-table-column>

<!-- 弹出层 -->
<el-dialog v-model="Data.dialogFormVisible" width="40%" @close="closeLayer">
    <!-- 标题部分 -->
    <template #title>
      <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">
        {{ Data.layerTitle }}
      </div>
    </template>


    <el-form
      :model="Data.studentform"
      :inline="true"
      label-width="100px"
      ref="studentFormRef"
    >
      <el-form-item label="学号:" prop="sno">
        <el-input
          v-model="Data.studentform.sno"
          :disabled="Data.isEdit || Data.isView"
          :suffix-icon="Edit"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="姓名:" prop="name">
        <el-input
          v-model="Data.studentform.name"
          :disabled="Data.isView"
          :suffix-icon="Edit"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="性别:" style="width: 43%;" prop="gender">
        <el-select
          v-model="Data.studentform.gender"
          :disabled="Data.isView"
          placeholder="请选择"
        >
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期:" prop="birthday" >
        <el-date-picker
          v-model="Data.studentform.birthday"
          type="date"
          placeholder="选择日期"
          style="width: 212px"
          :disabled="Data.isView"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
   
      <el-form-item label="电话:" prop="mobile">
        <el-input
          v-model="Data.studentform.mobile"
          :disabled="Data.isView"
          :suffix-icon="Edit"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input
          v-model="Data.studentform.email"
          :disabled="Data.isView"
          :suffix-icon="Edit"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="家庭住址:" prop="address">
        <el-input
          v-model="Data.studentform.address"
          :suffix-icon="Edit"
          style="width: 555px"
          :disabled="Data.isView"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-show="!Data.isView">提交</el-button>
        <el-button @click="closeLayer">取消</el-button>
      </span>
    </template>
  </el-dialog>
  • Cascader级联选择器使用
// *******后端取消默认分页 views.py*******

# 学院视图
class FacultyViewSet(ModelViewSet):
    queryset = Faculty.objects.all()
    serializer_class = FacultySerializer
    # 取消默认分页
    pagination_class = None

# 专业视图
class MajorViewSet(ModelViewSet):
    queryset = Major.objects.all()
    print(queryset)
    serializer_class = MajorSerializer
    # 取消默认分页
    pagination_class = None

 

// *********前端*********

var Data = reactive({
// 弹出层级联选择器定义
layerFacultyMajor: reactive([]),
// 弹出层选中的专业
layerMajorSelected: ref(""),
})




// 查看学生信息
const viewStudent = (row: any) => {
  // 设定标题
  Data.layerTitle = "【查看学生信息】";
  // 设为查看
  Data.isView = true;
  // 可见
  Data.dialogFormVisible = true;
  // 当前行赋值为studentForm -- 深拷贝
  Data.studentform = JSON.parse(JSON.stringify(row));
  Data.layerMajorSelected = row.major.id
};

// 编辑学生信息
const editStudent = (row: any) => {
  // 设定标题
  Data.layerTitle = "【编辑学生信息】";
  // 设为编辑
  Data.isEdit = true;
  // 可见
  Data.dialogFormVisible = true;
  // 当前行赋值为studentForm -- 深拷贝
  console.log(row)
  // Data.studentform = row
  Data.studentform = JSON.parse(JSON.stringify(row));
  Data.layerMajorSelected = row.major.id
};


// 关闭弹出层
const closeLayer = () => {
  Data.dialogFormVisible = false;
  // 编辑和查看设置为False
  Data.isEdit = false;
  Data.isView = false;
  // 初始化表单
  Data.studentform.sno = "";
  Data.studentform.name = "";
  Data.studentform.gender = "";
  Data.studentform.birthday = "";
  Data.studentform.major = "";
  Data.studentform.faculty = "";
  Data.studentform.mobile = "";
  Data.studentform.email = "";
  Data.studentform.address = "";
  // 初始化表单专业的而选择
  Data.layerMajorSelected = "";
}
// 构建弹出层树状结构的学院和专业
const getTreeMajor = async () =>{
  // 定义集合
  let allFacultys = reactive([]);
  let allMajors = reactive([]);

  // 获取所有院系
  await indexApi.facultysApi.getAll().then((res)=>{
    // console.log(res.data.results)
    allFacultys = res.data;
  });

  // 获取所有专业
  await indexApi.majorsApi.getAll().then((res)=>{
    console.log(res)
    allMajors = res.data;
  });
  // 组合数据
  for (let faculty of allFacultys) {
    // 定义需要的结构
    var obj = reactive({
      value: `${faculty.id}-${faculty.name}`,
      label: faculty.name,
      children: [],
    });
    // 遍历院系填充obj的children
    for (let major of allMajors) {
      // 判断当前专业是否隶属于当前院系
      if (major.faculty.id === faculty.id) {
        //添加
        obj.children.push({
          value: major.id,
          label: major.name,
        });
      }
    }

    // 附加到
    Data.layerFacultyMajor.push(obj);
  }
}

// 定义页面加载时自动执行的函数
const autoRun= () => {
    // 获取所有信息
    getStudents() 
    // 获取院系填充信息
    getFacultys()
    // 获取树状结构的学院和专业
    getTreeMajor()
}
// 调用自动执行函数执行
autoRun() 

// 定义级联标签
<el-form-item label="学院/专业:">
<el-cascader
v-model="Data.layerMajorSelected"
placeholder="选择专业"
:options="Data.layerFacultyMajor"
filterable
style="width: 555px"
:disabled="Data.isView"/>
</el-form-item>
llovew.
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
django后台数据数量过多导致查询速度过慢
leewz805071的博客
02-28 4601
背景 如果是用的django自带的admin，在后台数据较多的情况下，就会导致sql查询比较慢的情况出现，从而导致页面反应比较慢。我这边是通过框架层面对其进行了一些简单的调优。 问题解决 问题1：count 数据过多 这边主要问题就是数据过多的情况，count查询也特别慢 通过show full processlist;查询出慢查询语句 再通过查看django admin代码查看是哪些地方导致了count的语句多次执行 # 源码路径：Python35\Lib\site-packages\django\
Django_layui后台模板
10-09
在Django中，Model用于处理数据模型，View负责业务逻辑和视图呈现，Template则是用于展示数据的模板系统。Django提供了一系列内置功能，如ORM（对象关系映射）、表单处理、认证与授权、URL路由、中间件等，极大地...
django后台数据批量导入
watermelon
06-19 1686
django后台数据批量导入 开发环境：win10+python3.6+django2.0 大致思路：客户端下载excel模板，按照模板填写数据，填写完之后上传，批量导入 为了确保数据能够上传成功，我们需要让客户端按照我们的格式来进行填写，避免字段不同 上传数据不成功，所以先要让客户下载模板，然后导入 这里使用的是django的excel包，还有其他的可以使用，比如：xlrd，有时间再写xlrd文档 具体步骤： 安装依赖 配置环境 注册视图 配置url 测试 1、安装依赖 pip3
python-django后台获取前端数据进行操作以及响应的方式
Mr_WoLong
06-30 2284
django
Django后台数据导出为excel并下载
他山之石，可以攻玉。
09-03 1953
功能要求：导出数据到制定好的excel的模板文件中 刚开始做项目，一边摸索一边做，搜了很多资料，踩了很多坑，记录一下 exportable_fields = ['sale_person', 'place_order_date', 'department', 'shipment_date', 'card_id', 'user_code', 'process_specification', 'product_name', 'product_model_number',
django 后台获取put delete请求的数据
weixin_41417421的博客
12-04 1743
from django.http import QueryDict def PutRequest(request) put = QueryDict(request.body) content = put.get('content', '') ...... 这样就可以获取请求中的数据了 需要注意的是请求的方式： Content-Type: application/x-www-form-urlencoded;charset=utf-8 ...
Django后台获取前端post上传的文件方法
09-20
本文将详细介绍如何在Django后台获取并处理这些文件。 首先，前端HTML表单的创建至关重要。在创建用于上传文件的表单时，需要在`<form>`标签中添加`enctype="multipart/form-data"`属性，这是为了告诉浏览器发送的...
Django 后台带有字典的列表数据与页面js交互实例
09-17
这个实例特别关注如何在Django视图（views）中构建数据，然后在HTML模板中使用JavaScript来实现动态展示和交互。 首先，Django的视图层（views.py）负责处理HTTP请求。在这个例子中，`user_info`视图接收一个用户ID...
Django后台开发演示案例
11-15
在模板中，使用Django模板语言（DTL）来展示数据，例如通过`{% for data in monitor_data %}`循环遍历监控数据。 8. 后台管理（Admin）： Django内置的admin后台可以方便地管理数据。在myapp的admin.py文件中，...
基于django传递数据到后端的例子
01-20
总的来说，这个例子展示了如何利用Django和Ajax进行前后端交互。前端通过Ajax发送POST请求，携带特定的按钮值，后端通过Django Rest Framework接收并处理这些数据。这是一个基本的交互流程，对于初学者来说可能需要...
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 768
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
软件设计之HTML5
thm19990903的博客
08-04 1944
HTML：Hyper Text Markup Language 超文本标记语言。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 510
ASP.NET Core Web API 使用Autofac框架
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
qq_30193097的博客
08-13 111
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1031
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 631
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
el-checkbox 状态不更新
最新发布
bao
08-13 202
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
前端JS总结（中）
m0_54066656的博客
08-12 611
前端JS之内置对象总结，这很重要！！！
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 420
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值