Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“学生类型”（前端+后端数据）

项目为整个研究生管理系统，博客中已经提供“学生类型”页面的vue文件源代码，本文将对在vue文件中import api方法：

1.axios（引用源）

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR（XMLHttpRequest）的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

2.studentType.js

import axios from "@/axios";
//获取学生列表
export async function studentApi() {
    const response = await axios.get(
        "/api/studentType/list", {
            params: {

            }
        }
    );
    return response.data;
}
//添加学生
export async function addStudentApi(form) {
    const response = await axios.post(
        "api/studentType/insert",
        null, {
            params: {
                typeNum:form.typeNum,
                name: form.name,
                degreeTypeNum:form.degreeTypeNum,
                level: form.level,
            }
        }
    );
    return response.data;
}
//修改学生
export async function upStudentApi(form) {
    const response = await axios.post(
        "api/studentType/update",
        null, {
            params: {
                id:form.id,
                typeNum:form.typeNum,
                name: form.name,
                degreeTypeNum:form.degreeTypeNum,
                level: form.level,
            }
        }
    );
    return response.data;
}
//删除学生
export async function deStudentApi(id) {
    const response = await axios.get(
        "api/studentType/delete",
         {
            params: {
                id
            }
        }
    );
    return response.data;
}

3.studentType.vue

<template>
  <div class="studentType">
    <!-- 添加学生类型对话框 -->
    <el-dialog title="添加研究生类型" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-position="right" >
        <el-form-item label="类型代码" prop="typeNum" :label-width="formLabelWidth">
          <el-input v-model="form.typeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学位类型代码" prop="degreeTypeNum" :label-width="formLabelWidth">
          <el-input v-model="form.degreeTypeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="层次" prop="level" :label-width="formLabelWidth">
          <el-select v-model="form.level" collapse-tags placeholder="选择层次">
          <el-option label="硕士" value="master"></el-option>
          <el-option label="博士" value="phd"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button type="primary" @click="clickAddStudent('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改学生类型 -->
    <el-dialog title="修改学生类型" :visible.sync="updialogVisible" width="600px">
      <el-form :model="upform" :rules="rules" ref="upform" label-position="right">
        <el-form-item label="类型代码" prop="typeNum" :label-width="formLabelWidth">
          <el-input v-model="upform.typeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="upform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学位类型代码" prop="degreeTypeNum" :label-width="formLabelWidth">
          <el-input v-model="upform.degreeTypeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="层次" prop="level" :label-width="formLabelWidth">
          <el-select v-model="upform.level" collapse-tags placeholder="选择层次">
              <el-option label="硕士" value="master"></el-option>
              <el-option label="博士" value="phd"></el-option>
          </el-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="clickUpStudent('upform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 课程类型设置 -->
        <el-dialog title="设置课程类型" :visible.sync="coursedialogVisible" width="600px">
      <el-form :model="form" :rules="courserules" ref="courseform" label-position="right" >
        <el-form-item label="类型编号" prop="courseTypeNum" :label-width="formLabelWidth">
          <el-input v-model="courseform.courseTypeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="courseTypeName" :label-width="formLabelWidth">
          <el-input v-model="courseform.courseTypeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否必修" prop="relearn" :label-width="formLabelWidth">
          <el-select v-model="courseform.relearn" collapse-tags placeholder="是/否">
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="coursedialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('courseform')">重置</el-button>
        <el-button type="primary" @click="clickSetCourse('courseform')">确 定</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">
      <div class="studentType__upbtn">
        <div>
          <el-button type @click="addstudent('form')">添加类型</el-button>
          <el-button type @click="setcourse('courseform')">课程类型设置</el-button>
        </div>
      </div>
      <el-table :data="studentTypeData" class="table" ref="multipleTable">
      <el-table-column type="selection" width="55" select=""></el-table-column>
        <el-table-column prop="typeNum" label="类型代码" width="200" ></el-table-column>
        <el-table-column prop="name" label="类型名称" width="300"></el-table-column>
        <el-table-column prop="degreeTypeNum" label="学位类型代码" width="200"></el-table-column>
        <el-table-column prop="level" label="层次" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="upstudent(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="opendel(scope.row)" type="text" style="color:red" 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="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//引入接口
import {
  studentApi,
  addStudentApi,
  upStudentApi,
  deStudentApi
} from "@/api/student/studentType";
export default {
  name: "studentType",
  data() {
    return {
      currentPage4: 1,
      dialogVisible: false,
      updialogVisible: false,
      coursedialogVisible: false,
      formLabelWidth: "110px",
      studentTypeData: [],
      form: {
        typeNum: "",
        name: "",
        degreeTypeNum: "",
        level: ""
      },
      upform: {
        id:"",
        typeNum: "",
        name: "",
        degreeTypeNum: "",
        level: ""
      },
      courseform: {
        courseTypeNum: "",
        courseTypeName: "",
        relearn: ""
      },
      rules: {
        typeNum: [{ required: true, message: "必填", trigger: "change" }],
        name: [{ required: true, message: "必填", trigger: "change" }],
        degreeTypeNum: [{ required: true, message: "必填", trigger: "change" }],
        level: [{ required: true, message: "必填", trigger: "change" }]
      },
      courserules: {
        courseTypeNum: [{ required: true, message: "必填", trigger: "change" }],
        courseTypeName: [
          { required: true, message: "必填", trigger: "change" }
        ],
        relearn: [{ required: true, message: "必填", trigger: "change" }]
      }
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.getStudent();
  },
  methods: {
    //获得学生信息
    async getStudent() {
      const result = await studentApi();
      this.studentTypeData = result.data;
      // console.log(this.studentTypeData);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //添加学生
    addstudent(formName) {
      this.dialogVisible = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    //确认添加学生
    async clickAddStudent(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          const result = await addStudentApi(this.form);
          // console.log(result);
          if (result.status == 1) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.dialogVisible = false;
            this.getStudent();
          } else {
            this.$message.error(result.msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //设置课程类型
    setcourse(formName) {
      this.coursedialogVisible = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    //确认设置课程类型
    async clickSetCourse(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          this.coursedialogVisible = false;
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //确认修改学生
    clickUpStudent(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          const result = await upStudentApi(this.upform);
          // console.log(result);
          if (result.status == 1) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.updialogVisible = false;
            this.getStudent();
          } else {
            this.$message.error(result.msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改学生
    upstudent(row) {
      this.upform.id=row.id,
      this.upform.typeNum=row.typeNum,
      this.upform.name=row.name,
      this.upform.degreeTypeNum=row.degreeTypeNum,
      this.upform.level=row.level,
      this.updialogVisible = true;
      if (this.$refs[this.upform] !== undefined) {
        this.$refs[this.upform].resetFields();
      }
    },
    //删除学生
    opendel(row) {
      this.$confirm("此操作将永久删除学生数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const result = await deStudentApi(row.id);
          if (result.status == 1) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getStudent();
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
// .scoreInquiry {
//   &__sebox {
//     &-selectCase {
//       span {
//         line-height: 32px;
//       }
//     }
//   }
// }
.studentType {
  &__upbtn {
    margin-bottom: 10px;
  }
  &__row {
    &-spanclass {
      font-size: 13px;
    }
  }
}
.el-select {
  width: 100%;
}
.el-row {
  width: 100%;
}
.el-col {
  margin-bottom: 10px;
  display: flex;
  span {
    line-height: 32px;
  }
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>

3.路由文件：index.js

                {
                    path: '/studentType',
                    component: resolve => require(['../components/page/student/studentType.vue'], resolve),
                    meta: {
                        title: '学生类型'
                    },
                },