Day05-讲师列表前端-讲师信息添加

1、讲师添加

添加讲师功能：点击添加讲师按钮，进入表单页面，输入表单信息


在表单上填好用户信息，点击保存，提交接口，添加到数据库

（1）定义api接口地址

代码：

//添加讲师
    addTeacher(teacher){
      return request({ 
          url:`/eduservice/teacher/addTeacher`,
          method:'post',
          data:teacher
      })
    }

（2）在页面实现调用

代码：

<template>
  <div class="app-container">
    讲师添加
    <!-- 表单 -->
    <el-form label-width="120px">
        <el-form-item label="讲师名称">
          <el-input v-model="teacher.name"></el-input>
        </el-form-item>

        <el-form-item label="讲师排序">
          <el-input-number v-model="teacher.sort" controls-position="right" :min="0"/>
        </el-form-item>

        <el-form-item label="讲师头衔">
          <el-select v-model="teacher.level" placeholder="请选择">
            <el-option :value="1" label="高级讲师"></el-option>
            <el-option :value="2" label="首席讲师"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="讲师资历">
          <el-input v-model="teacher.career" placeholder="一句话介绍讲师"></el-input>
        </el-form-item>
        
        <el-form-item label="讲师简介">
          <el-input type="textarea"  :rows="9" v-model="teacher.intro"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdate()">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>

    </el-form>

  </div>
</template>

<script>
//引入调用teacher.js文件
import teacherApi from '@/api/edu/teacher.js'

  export default {
    data() {
      return {
        teacher: {
          name:'',
          sort:0,
          level:1,
          carrer:'',
          intro:'',
          avatar:''
        },
        saveBtnDisabled:false// 保存按钮是否禁用,
      }
    },
    created(){

    },
    methods: {
      saveOrUpdate() {
        //调用添加
        this.saveTeacher()
      },
      //添加讲师方法
      saveTeacher(){
        teacherApi.addTeacher(this.teacher)
          .then(response=>{//添加成功
                //提示信息
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //回到列表页面，路由跳转
                this.$router.push({path:"/teacher/table"})
          })
      }
    } 
  }
</script>`