1. Toy模板网首页
  2. > Toy博客

【Vue+Django】Training Management Platform分页功能 - 20230621

10月前 作者：i see the future 分类：Toy博客 阅读(39) 违法举报

这篇具有很好参考价值的文章主要介绍了【Vue+Django】Training Management Platform分页功能 - 20230621。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求描述

分页显示数据，避免造成服务器宕机。

Django：根据pageNum返回数据切片

Views.py写入业务逻辑

# 数据接口：暴露trs_training_and_test_record数据
def api_trs_training_and_test_record(request,myDateS,myDateE,mySystem,category,EmployeeID,courseName,pageNum=1):

    print('api_trs_training_and_test_record收到数据请求,参数为',myDateS,myDateE,mySystem,category,EmployeeID,courseName,pageNum)

    # ORM取得数据
    data_all = trs_training_and_test_record.objects.all()
    data_count = trs_training_and_test_record.objects.count()
    data_choose = data_all
    pageNum = int(pageNum)

    # 筛选&转码
    if myDateS:
        data_choose = data_choose.filter(Start_Date__gte=myDateS)
    if myDateE:
        data_choose = data_choose.filter(End_Date__lte=myDateE)
    if category:
        if category == 'training':
            data_choose = data_choose.filter(Type='課程')
        elif category == 'test':
            data_choose = data_choose.filter(Q(Type='考試')|Q(Type='考核'))
        elif category == 'All':
            pass
    if EmployeeID and EmployeeID !='NA':
        data_choose = data_choose.filter(Employee_NO=EmployeeID)
    if courseName and courseName !='NA':
        data_choose = data_choose.filter(Course__icontains=courseName)

    # 记录页码
    total = data_choose.count()

    # 分页，默认10笔数据为一页
    if data_choose:
        if (pageNum*10 >= 10) and (pageNum*10 <= data_count):
            data_choose = data_choose[(pageNum-1)*10:pageNum*10]
        elif (pageNum*10 >= 0) and (pageNum*10 > data_count) and (data_count<10):
            data_choose = data_choose[0:data_count]
        elif (pageNum*10 >= 10) and ((pageNum-1)*10 <= data_count) and (pageNum*10 > data_count):
            data_choose = data_choose[(pageNum-1)*10:data_count]

    # 初始化data
    data = []


    # 将数据塞进去data
    for each_queryset in data_choose:
        temp_data = {
                  'training_system': 'TRS',
                  'Location': each_queryset.Location,
                  'Function_Code': each_queryset.Function_Code,
                  'Function_Name': each_queryset.Function_Name,
                  'Plant': each_queryset.Plant,
                  'Dept': each_queryset.Dept,
                  'Employee_NO': each_queryset.Employee_NO,
                  'Name': each_queryset.Name,
                  'Grade_Range': each_queryset.Grade_Range,
                  'Training_Type': each_queryset.Training_Type,
                  'Priority': each_queryset.Priority,
                  'Type': each_queryset.Type,
                  'Course': each_queryset.Course,
                  'Schedule_Code': each_queryset.Schedule_Code,
                  'Schedule_Name': each_queryset.Schedule_Name,
                  'Course_or_Test': each_queryset.Course_or_Test,
                  'Delivery_Way_or_Test_Way': each_queryset.Delivery_Way_or_Test_Way,
                  'Start_Date': str(each_queryset.Start_Date),
                  'End_Date': str(each_queryset.End_Date),
                  'Present_Status': each_queryset.Present_Status,
                  'Pass_Score': each_queryset.Pass_Score,
                  'Listening_Score': each_queryset.Listening_Score,
                  'Reading_Score': each_queryset.Reading_Score,
                  'Score': each_queryset.Score,
                  'Pass_YN': each_queryset.Pass_YN,
                  'Effective_Date': each_queryset.Effective_Date,
                  'Duration': each_queryset.Duration,
                  'Venue': each_queryset.Venue,
                  'Trainer_Assesor': each_queryset.Trainer_Assesor,
                },
        data.append(temp_data)

    # 将data转化为trs_training_and_test_record_data
    trs_training_and_test_record_data = {
        'data':  data,
        'pageSize': 10,
        'pageNum':pageNum,
        'data_count':data_count,
        'total':total,

    }
    print('api_trs_training_and_test_record发送数据')

    # 暴露api
    return HttpResponse(json.dumps(trs_training_and_test_record_data,ensure_ascii=False,indent=4), content_type='application/json')

urls.py

    path('api/api_trs_down_load_training_and_test_record/<myDateS>/<myDateE>/<mySystem>/<category>/<EmployeeID>/<courseName>/', views.trs_down_load_training_and_test_record, name='trs_down_load_training_and_test_record'),

Vue前端

index.vue写入样式
主要逻辑如下：

  1. 按照系统不同，来使用v-if显示不同系统数据。
  2. GoQuery(myDate,mySystem,category,EmployeeID,courseName,pageNum)传入pageNum，以便服务器切片返回数据。
  3. 使用ElementUI中分页组件的回调参数val。@next-click=“handlenextClick”。【Vue+Django】Training Management Platform分页功能 - 20230621
  4. ElementUI中分页组件尽量使用state的数据。:total=TrsTrainingTestData.total
<template>
  <div class="container-fluid">
    <!-- 筛选栏 -->
    <el-row class="tac p-3">
      <el-col span="24">
        <h3>数据汇总</h3>
        <div class="block py-1">
          <span class="demonstration">日期筛选</span>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-date-picker 
            value-format="yyyy-MM-dd"
            v-model="myDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>

        <div class="block py-1">
          <span class="demonstration">训练系统</span>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>
            <el-radio-group v-model="mySystem">
              <el-radio-button label="TRS" :mySystem="TRS"></el-radio-button>
              <el-radio-button label="CSOD" :mySystem="CSOD"></el-radio-button>
              <el-radio-button label="DLT" :mySystem="DLT"></el-radio-button>
            </el-radio-group>
          </span>
        </div>

        <div class="block py-1">
          <span class="demonstration">关键指标</span>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>
            <el-radio-group v-model="category">
              <el-radio-button label="All" :category="All">All</el-radio-button>
              <el-radio-button label="training" :category="training">培训数据</el-radio-button>
              <el-radio-button label="test" :category="test">考试数据</el-radio-button>
            </el-radio-group>
          </span>
        </div>

        <div class="block py-1">
          <span class="demonstration">员工工号</span>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>
            <el-input 
              class="w-25"
              placeholder="请输入内容"
              v-model="EmployeeID"
              clearable>
            </el-input>
          </span>
        </div>

        <div class="block py-1">
          <span class="demonstration">课程名称</span>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>
            <el-input 
              class="w-25"
              placeholder="请输入内容"
              v-model="courseName"
              clearable>
            </el-input>
          </span>
          <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="float-left">
            <el-button type="info" plain  @click="GoQuery(myDate,mySystem,category,EmployeeID,courseName,pageNum)">查询</el-button>
            <el-button type="info" plain  @click="DownLoadExcel(myDate,mySystem,category,EmployeeID,courseName)">下载</el-button>
          </span>
        </div>

      </el-col>


    </el-row>


    

    <!-- TRS -->
    <el-row class="tac" v-if="mySystem=='TRS'">
      <el-col span="24">
        <table class="table table-striped table-sm table-bordered text-center">
                <thead>
                    <tr class="" style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
                        <th scope="col">训练类别</th>
                        <th scope="col">厂别</th>
                        <th scope="col">部门代码</th>
                        <th scope="col">人员工号</th>
                        <th scope="col">人员姓名</th>
                        <th scope="col">知识点名称</th>
                        <th scope="col">培训日期</th>
                        <th scope="col">时间</th>
                        <th scope="col">培训地点</th>
                        <th scope="col">培训讲师</th>
                    </tr>
                </thead>

                <!-- TRS -->
                <tr v-for="item in TrsTrainingTestData.data" :key="item.Employee_NO" valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;">
                        <td class="col">{{ item[0].training_system }}</td>
                        <td class="col">{{ item[0].Plant }}</td>
                        <td class="col">{{ item[0].Dept }}</td>
                        <td class="col">{{ item[0].Employee_NO }}</td>
                        <td class="col">{{ item[0].Name }}</td>
                        <td class="col">{{ item[0].Schedule_Name }}</td>
                        <td class="col">{{ item[0].Start_Date }}</td>
                        <td class="col">{{ item[0].Start_Date }}</td>
                        <td class="col">{{ item[0].Venue }}</td>
                        <td class="col"></td>
                  </tr>
            </table>
      </el-col>
    </el-row>

    <!-- 页码 -->
    <el-row class="tac" v-if="mySystem=='TRS'">
      <el-col span="24">
        <el-pagination
          background
          layout="prev, pager, next"
          :total=TrsTrainingTestData.total
          @current-change="handlenextClick"
          @prev-click="handlenextClick"
          @next-click="handlenextClick"
          >
        </el-pagination>
      </el-col>
    </el-row>
    


    <!-- CSOD -->
    <el-row class="tac" v-if="mySystem=='CSOD'">
      <el-col span="24">
        <table class="table table-striped table-sm table-bordered text-center">
                <thead>
                    <tr class="" style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
                        <th scope="col">训练类别</th>
                        <th scope="col">厂别</th>
                        <th scope="col">部门代码</th>
                        <th scope="col">人员工号</th>
                        <th scope="col">人员姓名</th>
                        <th scope="col">知识点名称</th>
                        <th scope="col">培训日期</th>
                        <th scope="col">时间</th>
                        <th scope="col">培训地点</th>
                        <th scope="col">培训讲师</th>
                    </tr>
                </thead>

                <!-- CSOD -->
                <tr v-for="item in CsodTrainingTestData.data" :key="item.Employee_NO" valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;">
                        <td class="col">{{ item[0].training_system }}</td>
                        <td class="col"></td>
                        <td class="col"></td>
                        <td class="col">{{ item[0].USER_ID }}</td>
                        <td class="col">{{ item[0].USER }}</td>
                        <td class="col">{{ item[0].TRAINING_TITLE }}</td>
                        <td class="col">{{ item[0].TRAINING_RECORD_DATE }}</td>
                        <td class="col">{{ item[0].TRAINING_RECORD_DATE }}</td>
                        <td class="col"></td>
                        <td class="col">{{ item[0].Instructor_Full_Name }}</td>
                </tr>
            </table>
      </el-col>
    </el-row>

    <!-- 页码 -->
    <el-row class="tac" v-if="mySystem=='CSOD'">
      <el-col span="24">
        <el-pagination
          background
          layout="prev, pager, next"
          :total=CsodTrainingTestData.total
          @current-change="handlenextClick"
          @prev-click="handlenextClick"
          @next-click="handlenextClick"
          >
        </el-pagination>
      </el-col>
    </el-row>



  </div>


</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data() {
    return {
      pageNum:1,
      myDate:[],
      mySystem:'TRS',
      category: 'training',
      EmployeeID:'',
      courseName:'',
      pageNum:1,
      pageSize:10,
      reqTrsTrainingTestData:{'data':''},
      //日期筛选
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

    };
  },
    mounted() {
    },
    computed: {
      ...mapState({
        DLTOrientData: (state) => state.home.DLTOrientData,
        DLTGeneralData: (state) => state.home.DLTGeneralData,
        DLTSkillTrainingData: (state) => state.home.DLTSkillTrainingData,
        DLTSkillLevelTrainingData: (state) => state.home.DLTSkillLevelTrainingData,
        TrsTrainingTestData: (state) => state.home.TrsTrainingTestData,
        TrsTrainerMaintainData: (state) => state.home.TrsTrainerMaintainData,
        CsodTrainingTestData: (state) => state.home.CsodTrainingTestData,
      }),
    },

    methods: {
      GoQuery(myDate,mySystem,category,EmployeeID,courseName,pageNum){
        // 初始化值
        var today=new Date();
        console.log('today',today)
        if (mySystem == 'TRS'){
          if(myDate == ''){
            //程序bug：today.getMonth()+1表示当前月
            myDate = [today.getFullYear()+"-"+(today.getMonth())+"-"+today.getDate(),
                      today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate()
                    ];
          }
          if(EmployeeID == ''){EmployeeID = 'NA'}
          if(courseName == ''){courseName = 'NA'}
          this.$store.dispatch('getTrsTrainingTestData',
            {
                "myDateS":myDate[0],
                "myDateE":myDate[1],
                "mySystem":mySystem,
                "category":category,
                "EmployeeID":EmployeeID,
                "courseName":courseName,
                "pageNum":pageNum,
            })
        }
        if (mySystem == 'CSOD'){
          if(myDate == ''){
            //程序bug：today.getMonth()+1表示当前月
            myDate = [today.getFullYear()+"-"+(today.getMonth())+"-"+today.getDate(),
                      today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate()
                    ];
          }
          if(EmployeeID == ''){EmployeeID = 'NA'}
          if(courseName == ''){courseName = 'NA'}
          this.$store.dispatch('getCsodTrainingTestData',
            {
                "myDateS":myDate[0],
                "myDateE":myDate[1],
                "mySystem":mySystem,
                "category":category,
                "EmployeeID":EmployeeID,
                "courseName":courseName,
                "pageNum":pageNum,
            })
        }

        if (mySystem == 'DLT'){
          this.$store.dispatch('getDLTOrientData', 
            {
                // "myDate":myDate,
                "mySystem":mySystem,
                "category":category,
                "courseName":courseName,
            })
        }

        console.log(123,myDate,mySystem,category,EmployeeID,courseName,pageNum)
      },

      handlenextClick(val){
        //把回调参数val给pageNum
        this.GoQuery(this.myDate,this.mySystem,this.category,this.EmployeeID,this.courseName,val)
        console.log('当前页码：',val)
      },

      DownLoadExcel(myDate,mySystem,category,EmployeeID,courseName){

        //初始值
        var today=new Date();
        if(myDate == ''){
            //程序bug：today.getMonth()+1表示当前月
            myDate = [today.getFullYear()+"-"+(today.getMonth())+"-"+today.getDate(),
                      today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate()
                    ];
          }
        if(EmployeeID == ''){EmployeeID = 'NA'}
        if(courseName == ''){courseName = 'NA'}
        if (mySystem == 'TRS'){
          window.open('http://127.0.0.1:8000/api/api_trs_down_load_training_and_test_record/'+myDate[0]+'/'+myDate[1]+'/'+mySystem+'/'+category+'/'+EmployeeID+'/'+courseName+'/')
        }
        if (mySystem == 'CSOD'){
          window.open('http://127.0.0.1:8000/api/api_csod_down_load_training_and_test_record/'+myDate[0]+'/'+myDate[1]+'/'+mySystem+'/'+category+'/'+EmployeeID+'/'+courseName+'/')
        }        

       console.log('DownLoadExcel',mySystem)
      },



    },
  }
</script>

api请求数据接口文章来源地址https://www.toymoban.com/news/detail-506438.html


//请求TRS
export const reqTrsTrainingTestData = (dict)=> requests(
    {   
        url:`/api/api_trs_training_and_test_record/${dict["myDateS"]}/${dict["myDateE"]}/${dict["mySystem"]}/${dict["category"]}/${dict["EmployeeID"]}/${dict["courseName"]}/${dict["pageNum"]}/`,
        method:'get',
        data:dict,
    }
);


export const reqCsodTrainingTestData = (dict)=> requests(
    {   
        url:`/api/api_csod_training_and_test_record/${dict["myDateS"]}/${dict["myDateE"]}/${dict["mySystem"]}/${dict["category"]}/${dict["EmployeeID"]}/${dict["courseName"]}/${dict["pageNum"]}/`,
        method:'get',
        data:dict,
    }
);

到了这里，关于【Vue+Django】Training Management Platform分页功能 - 20230621的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue3+emelenui实现前端分页功能—最简单

    vue3+emelenui实现前端分页功能—最简单

    在一些后台管理系统或者博客管理系统中分页功能是很常见的一种服务，因为总不可能把很多数据放在一块，那样阅读起来很麻烦，所以需要分页。也是前后端中最为常见的一个功能  先看一下分页场景的模拟。  首先我们要去后端写点数据通过接口给前端： 连接数据库：

    2024年02月09日
    浏览(45)

  • vue使用element-ui实现分页功能

    element-ui官网上有分页实现的功能，简单方便又好用，也有很多分页的样式，你可以根据需要去选择自己想要的样式。这里讲的是完整功能样式的一个分页实现。过程如下： 分页方法完成。

    2024年02月13日
    浏览(46)

  • 前端vue3+element plus 分页table排序功能实现

    我有如下所示的一个table，数据data是一个computed计算属性，一般情况下筛选使用element的sortable属性就可以了，可查看Element - The world\\\'s most popular Vue UI framework 但我的 table 是一个分页的 table ，当我使用 sortable 时发现，它只是对当前页的数据进行排序，但这并不是我需要的，我的

    2024年02月14日
    浏览(52)
  • 基于RuoYi若依vue的数据分页功能的前后端代码详解

    基于RuoYi若依vue的数据分页功能的前后端代码详解

    目录 1.前端代码 1.1首先在前端会有一个 组件，为分页组件 1.2前端获取列表函数以及访问后端的URL与请求方式 1.3开发者工具查看前端访问后端信息  1.4开发者工具查看前端接收到后端的回应信息 2.后端代码 2.1接口 2.2接口内方法的代码 2.3后端Log输出如下   在打开相应的表后

    2023年04月16日
    浏览(41)
  • Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页：         当table的数据量比较大的时候，一个屏幕展示不出全部的数据，这个时候就需要分页显示。而多数情况下都是做的后端分页，就是将分页参数和查询条件一并传到后端，后端将当前页要

    2024年01月20日
    浏览(55)

  • 从vue小白到高手，从一个内容管理网站开始实战开发第七天，登录功能后台功能设计--通用分页、枚举以及相关工具类

    上一篇实现了数据库访问层的相关功能，还没有了解的小伙伴可以去看前面文章实现的内容，因为每一篇内容都是连贯的，不学习的话可能下面的内容学习起来会有点摸不着头脑 从vue小白到高手，从一个内容管理网站开始实战开发第六天，登录功能后台功能设计--API项目中的

    2024年01月22日
    浏览(40)

  • Vue2 + element ui el-select 远程搜索分页懒加载功能实现

    新建指令 ：         1、 在 src 目录下 新建文件夹 directive / loadmore         2、在 loadmore 文价夹下新建 elSelectLoadmore.js 和 index.js 文件：            elSelectLoadmore.js index.js 3、在main 文件中注册该指令 4、 基于 el-select 封装 懒加载 远程搜索框 remoteSelect.vue 组件提示

    2024年01月21日
    浏览(52)
  • vue3+element-plus实现表格多选功能（可以清除选项或分页保留选项）

    vue3+element-plus实现表格多选功能（可以清除选项或分页保留选项）

    如图所示，在实际开发中，数据量大的表格基本都添加上了分页功能，每个页面请求的数据回交换更新，第一页的选中效果在跳转至第二页后，如果没有做相关处理，选中项会被清空，具体解决方法如下 在需要处理的表格标签中加上 :row-key=\\\"getRowKeys\\\" 以及 @selection-change=“ha

    2024年02月12日
    浏览(62)
  • 快速搭建Python（Django）+Vue环境并实现页面登录注册功能

    快速搭建Python（Django）+Vue环境并实现页面登录注册功能

    选择一个要存放代码位置，使用cmd进入该位置，然后输入 npm init vue@lastest 创建vue项目 然后输入项目名称，其余都选择NO 创建好项目之后，使用cd命令进入创建好项目的目录 执行 npm install 命令即可创建好一个vue项目 vue项目的启动命令为 npm run dev 使用VsCode打开创建的项目，删

    2024年02月16日
    浏览(36)

  • 深度探索.NET Feature Management功能开关的魔法

    .NET Feature Management 是一个用于管理应用程序功能的库，它可以帮助开发人员在应用程序中轻松地添加、移除和管理功能。使用 Feature Management ，开发人员可以根据不同用户、环境或其他条件来动态地控制应用程序中的功能。这使得开发人员可以更灵活地管理应用程序的功能，

    2024年03月27日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包