讲师添加功能

103 阅读1分钟

1、在src/api/teacher.js增加添加讲师的接口方法

//添加讲师
  addTeacher(eduTeacher){
    return request({
      url: `/eduservice/eduteacher/addTeacher`,
      method: 'post',
      data: eduTeacher//用json格式传输
    })
  }

2、添加页面表单

<template>
  <div class="app-container">
    讲师表单
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="eduTeacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="eduTeacher.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="eduTeacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致,否则没法回填
            因此,这里value使用动态绑定的值,保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="eduTeacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="eduTeacher.intro" :rows="10" type="textarea"/>
      </el-form-item>

      <!-- 讲师头像:TODO -->

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

3、编写js代码

<script>
import teacher from "@/api/teacher";
export default {
  data() {
    return {
      eduTeacher: {},
      saveBtnDisabled: false
    };
  },
  created() {},
  methods: {
    saveOrUpdate() {
      //添加讲师
      teacher.addTeacher(this.eduTeacher).then(response => {
        //提示成功
        this.$message({
          type: "success",
          message: "添加成功!"
        });
        //路由切换
        this.$router.push({path:'/teacher/list'})

      });
    }
  }
};
</script>