项目为整个研究生管理系统,博客中已经提供“学生类型”页面的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: '学生类型'
},
},