Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“考试档期”（前端+后端数据）

内容实现如题

1.examSchedule.vue

<template>
   <div class="examSchedule">
<!-- 修改考试档期 -->
    <el-dialog title="修改考试档期" :visible.sync="updialogVisible" width="400px">
      <el-form :model="upform" :rules="rules" ref="upform" label-position="right">
        <el-form-item label="档期" prop="schedule" :label-width="formLabelWidth">
          <el-select v-model="upform.schedule" autocomplete="off" style="width:220px" >
            <el-option label="早上" value="早上"></el-option>
            <el-option label="下午" value="下午"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime">
          <el-time-select placeholder="开始时间" v-model="upform.startTime" :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
            }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
          <el-time-select placeholder="结束时间" v-model="upform.endTime" :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: upform.startTime,
            }">
          </el-time-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('upform')">重置</el-button>
        <el-button type="primary" @click="clickUpSchedule('upform')">确 定</el-button>
      </div>
    </el-dialog>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 考试档期
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-table :data="examScheduleData" class="table" ref="multipleTable">
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column type="index" :index="indexMethod" width="50" ></el-table-column>
        <el-table-column prop="schedule" label="档期" width="150" ></el-table-column>
        <el-table-column prop="startTime" label="开始时间" sortable ></el-table-column>
        <el-table-column prop="endTime" label="终止时间" sortable ></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
                <el-button @click="upschedule(scope.row)" type="primary" size="small">修改</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  upScheduleApi,
} from "@/api/student/examSchedule";
export default {
  name: "examSchedule",
  data() {
    return {
    currentPage4: 1,
    pageNo:1,
    pageSize:10,
    total:1,
    examScheduleData: [{
      schedule:"早上",
      startTime:"9:00",
      endTime:"11:00",
    }],
    updialogVisible:false,
    formLabelWidth: "110px",
    upform: {
    id:"",
    schedule:"",
    startTime:"",
    endTime:"",
    },
    rules: {
        schedule: [{ required: true, message: "必填", trigger: "change" }],
        startTime: [{ required: true, message: "必填", trigger: "change" }],
        endTime: [{ required: true, message: "必填", trigger: "change" }],
    },
    };
  },
  created() {},
  computed: {},
  mounted() {
    // this.getSchedulelist();
  },
  methods: {
    handleSizeChange(val) {
        this.pageSize=val;
        this.getSchedulelist();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        this.pageNo=val;
        this.getSchedulelist();
      console.log(`当前页: ${val}`);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    indexMethod(index) {
        return (this.pageNo-1)*this.pageSize+index+1;
      },
    upschedule(row) {
      this.upform.id = row.id;
      this.upform.schedule = row.schedule;
      this.upform.startTime = row.startTime;
      this.upform.endTime = row.endTime;
      this.updialogVisible = true;
      if (this.$refs[this.upform] !== undefined) {
        this.$refs[this.upform].resetFields();
      }
    },
  //确认修改档期
    async clickUpSchedule(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          const result = await upScheduleApi(this.upform);
          // console.log(result);
          if (result.status == 1) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.updialogVisible = false;
            // this.getSchedule();
          } else {
            this.$message.error(result.msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
}
   
</script>
<style lang="scss">
.examSchedule {
  width: 100%;
  font-size: 14px;
  &__upbtn {
    display: flex;
    margin-bottom: 10px;
  }
}

.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
</style>

2.examSchedule.js（只有一个修改的接口）

import axios from "@/axios";
//修改档期
export async function upScheduleApi(form) {
    const response = await axios.post(
        "/api/examSchedule/update",
        null, {
            params: {
                id:form.id,
                schedule:form.schedule,
                startTime: form.startTime,
                endTime:form.endTime,
            }
        }
    );
    return response.data;
}

3.index.js(vue-router)

{
                path: '/examSchedule',
                component: resolve => require(['../components/page/xiaoruiYang/examSchedule.vue'], resolve),
                meta: {
                    title: '考试档期'
                },
            },