Django后台数据获取展示

news2024/12/26 22:44:14

​ 续接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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2036298.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Springboot发邮件如何配置SMTP服务器信息？

Springboot发邮件如何配置SMTP服务器信息？

Springboot发邮件安全性考虑&#xff1f;如何用Springboot发信&#xff1f; 在 SpringBoot中配置邮件发送功能相对简单&#xff0c;但需要正确设置 SMTP 服务器信息。AokSend将详细介绍如何在 SpringBoot应用程序中配置 SMTP 服务器信息&#xff0c;以实现邮件发送功能。 Spr…
阅读更多...
如何构建一个高效的编程学习笔记系统(万字总结)

如何构建一个高效的编程学习笔记系统(万字总结)

你是否曾经在编程学习的海洋中迷失方向&#xff1f;是否感觉自己学了很多&#xff0c;却总是记不住关键知识点&#xff1f;别担心&#xff0c;今天我们将一起探索一种革命性的笔记方法&#xff0c;它将彻底改变你的学习体验&#xff01; 目录 引言&#xff1a;为什么我们需要…
阅读更多...
鸿蒙（API 12 Beta3版）【本地媒体会话概述】 音视频播控服务

鸿蒙（API 12 Beta3版）【本地媒体会话概述】 音视频播控服务

交互过程 本地媒体会话的数据源均在设备本地&#xff0c;交互过程如图所示。 此过程中涉及两大角色&#xff0c;媒体会话提供方和媒体会话控制方。 说明 媒体会话控制方为系统应用&#xff0c;三方应用可以成为媒体会话提供方。 本地媒体会话中&#xff0c;媒体会话提供方通…
阅读更多...
[大模型实战] DAMODEL云算力平台部署LLama3.1大语言模型

[大模型实战] DAMODEL云算力平台部署LLama3.1大语言模型

[大模型实战] DAMODEL云算力平台部署LLama3.1大语言模型 目录 一、LLama3.1二、DAMODEL云算力平台2.1 提供的服务2.1.1 AI训练2.1.2 AI推理2.1.3 高性能计算2.1.4 图像&#xff0f;视频渲染2.1.5 定制化部署 2.2 支持的GPU 三、在DAMODEL部署LLama3.13.1 在DAMODEL创建实例&…
阅读更多...
【案例43】打开节点-后台任务日志优化案例

【案例43】打开节点-后台任务日志优化案例

问题现象 通过SPR日志发现 打开节点-后台任务日志节点sql调用严重。 通过nmc查看&#xff0c;后台线程耗时20s &#xff0c;基本都卡在sql层面 一直在执行如下sql selectl.pk_workingtasklog frompub_workingtasklog l inner joinpub_alertregistry ron l.pkregistry r.pk_a…
阅读更多...
Black Forest Labs 的 Flux——文本转图像模型的下一个飞跃，它比 Midjourney 更好吗？

Black Forest Labs 的 Flux——文本转图像模型的下一个飞跃，它比 Midjourney 更好吗？

一、前言 Black Forest Labs是开创性稳定扩散模型的团队&#xff0c;现已发布Flux——一套最先进的模型&#xff0c;有望重新定义 AI 生成图像的功能。但 Flux 是否真正代表了该领域的飞跃&#xff1f;它与 Midjourney 等行业领导者相比如何&#xff1f;让我们深入探索 Flux 的…
阅读更多...
【Kubernetes】Service 概念与实战

【Kubernetes】Service 概念与实战

Service 概念与实战 1.通过 Service 向外部暴露 Pod2.Service 的多端口设置3.集群内部的 DNS 服务4.无头 Service 在 Kubernetes 中部署的应用可能对应一个或者多个 Pod&#xff0c;而每个 Pod 又具有独立的 IP 地址。Service&#xff08;服务&#xff09;能够为一组功能相同的…
阅读更多...
DI (providedIn: XXXModule)

DI (providedIn: XXXModule)

angular版本为^17.3.0&#xff1b; 依赖注入Module 代码结构如下&#xff1a; 点击后为 demo2 works!demo2 providedIn Demo1Module depdemo2 works!demo2 providedIn Demo1Module 打包后大小为 改写为 demo2去掉 imports: [Demo1Module], 打包后大小为 结果比较&#…
阅读更多...
DAMA学习笔记(十五)-数据管理组织与角色期望

DAMA学习笔记(十五)-数据管理组织与角色期望

1.引言 随着数据领域的快速发展&#xff0c;组织需要改进管理和治理数据的方式。当前&#xff0c;大多数组织正面临着越来越多的数据。这些数据格式多样、数量 庞大&#xff0c;并来源于不同的渠道。由于数据数量和种类的增加&#xff0c;加剧了数据 管理的复杂性。与此同时&am…
阅读更多...
shiro注解不起作用：shiro进行权限校验时，@RequireRoles(“admin“)注解不起作用的解决方法

shiro注解不起作用：shiro进行权限校验时，@RequireRoles(“admin“)注解不起作用的解决方法

今天在写前后端分离项目时&#xff0c;用jwt加shiro进行登录权限校验时&#xff0c;RequireRoles("admin")注解不起作用&#xff0c;记录一下。 前提&#xff1a;数据库里面的user_type代表用户类型 &#xff1a;0普通用户 &#xff1b;1&#xff1a;专家&#xff1…
阅读更多...
Introduction to Snapdragon Profiler (Snapdragon 分析器)

Introduction to Snapdragon Profiler (Snapdragon 分析器)

Introduction to Snapdragon Profiler {Snapdragon 分析器} 1. Snapdragon Profiler2. Release Notes3. Tools and resourcesReferences Snapdragon Profiler (骁龙分析器) https://www.qualcomm.com/developer/software/snapdragon-profiler Snapdragon Profiler Documentati…
阅读更多...
HAProxy基本配置及参数实操

HAProxy基本配置及参数实操

目录 ​编辑什么是负载均衡 为什么用负载均衡 四层和七层的区别 实验环境 实验步骤 webserver上安装nginx 启动nginx 安装haproxy 编辑配置文件 多进程 多线程 SORRY SERVER 访问重定向 maxconne最大可承受连接 socat 工具 常用示例 ha p r ox y 的 算 法 静 …
阅读更多...
思科静态路由配置1

思科静态路由配置1

#路由协议实现# #任务一静态路由配置1# #1配置Switch-A的名称及其接口IP地址 Switch>enable Switch(config)#hostname Switch-A Switch-A(config)#ip routing Switch-A(config)#int f0/1 Switch-A(config-if)#no switchport Switch-A(config-if)#ip add 192.168.10…
阅读更多...
leetcode日记（72）最大矩形

leetcode日记（72）最大矩形

依旧是看了答案才知道大概方法…太难想到了 和上一道题思路相似&#xff01;可以直接调用上题的函数&#xff0c;只不过调用前的准备非常难想到&#xff0c;就是建造形状相同的矩阵&#xff0c;第i行j列的元素是i行中j列前相邻的“1”的个数。 class Solution { public:int m…
阅读更多...
RS®ZN-Z8x 开关矩阵

RS®ZN-Z8x 开关矩阵

R&SZN-Z8x 开关矩阵 专为多端口矢量网络分析仪测量而设计 R&SZN-Z8x 开关矩阵经过优化设计&#xff0c;专门用于罗德与施瓦茨的矢量网络分析仪。这款经济高效的多方位解决方案可用于多端口设备或多个设备的简单和复杂的测量任务。开关矩阵支持宽频率范围&#xff0…
阅读更多...
北斗科技助力运动健身：开启智能健身新篇章

北斗科技助力运动健身：开启智能健身新篇章

近年来&#xff0c;随着科技的迅猛发展&#xff0c;智能化设备已逐渐渗透到健身领域&#xff0c;为运动健身爱好者带来了无尽的利好。作为中国自主研发的全球卫星导航系统&#xff0c;北斗定位技术凭借其高精度和可靠性&#xff0c;正在成为运动健身领域的新宠。本文将深入探讨…
阅读更多...
Git相关教程

Git相关教程

版本控制 学习目标 理解版本控制的必要性了解常用的版本控制方式熟悉 Git 的使用方法 什么是版本控制 可以把一个版本控制系统理解为一个“数据库”&#xff0c;在需要的时候&#xff0c;它可以帮你完整地保存一个项目的快照。当你需要查看一个之前的快照&#xff08;称之为…
阅读更多...
Vue3 el-table里input设置为必填

Vue3 el-table里input设置为必填

Vue3 el-table里input设置为必填 Vue3 el-table里input设置为必填页面效果实现代码 Vue3 el-table里input设置为必填 页面效果 实现代码 <template><el-form :model"tableData" ref"formRef"><el-table :data"tableData" style…
阅读更多...
MPU6050详细介绍

MPU6050详细介绍

一、MPU6050介绍 MPU6050是由三个陀螺仪和三个加速度传感器组成的6轴运动处理组件 内部主要结构&#xff1a;陀螺仪、加速度计、数字运动处理器DMP&#xff08;Digital Motion Processor&#xff09; MPU6050有两个IIC接口&#xff0c;第一IIC接口可作为主接口给单片机传输数…
阅读更多...
对信/ 对信开源系统+后台+PC+H5 (多圈)

对信/ 对信开源系统+后台+PC+H5 (多圈)

系统商标名称&#xff1a;对信 核心&#xff1a;PHP8.0 CodeIgniter4框架 后台管理&#xff1a;PHP&#xff0c;html&#xff0c;jquery&#xff0c;迅锐&#xff0c;css3 PAI接口&#xff1a;php生成json格式 电脑PC端&#xff1a;html&#xff0c;jquery&#xff0c;css…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023