day06教育项目课堂笔记版

1、内容回顾内容介绍讲师删除功能1、添加按钮，添加2、编写删除功能 JS 代码（1）完成和的接口调用 api/teacher.jsdeleteTeacherId(id)return request(url: /eduservice/eduteacher/$id, method: 'delete')<el-button type="danger" size="mini" icon="el-icon-delete" click="removeTeacherId(scope.row.id)" >删

2、除</el-button>1、讲师删除功能2、讲师添加功能3、讲师修改功能4、添加讲师上传头像（1）阿里云OSS1、Wck2、引入前端工程3、前端环境介绍4、把前端环境登录改造本地5、前端框架开发过程介绍6、讲师管理模块准备7、开发讲师列表(2)调用接口（3）删除提示/删除讲师信息removeTeacherId(id) this.$confirm("此操作将删除该讲师, 是否继续?", "提示", confirmButtonText: "确定",cancelButtonText: "取消", type:

3、 "warning").then() => /调接口删除数据teacher.deleteTeacherId(id).then(response => console.log("删除");this.$message( type: "success", message: "删除!");/刷新数据this.getTeacherList();););,/删除讲师信息removeTeacherId(id)/调接口删除数据teacher.deleteTeacherId(id).then(response=>

4、console.log('删除')/刷新数据this.getTeacherList(),讲师添加功能1、 增加页面表单<template><div class="app-container"><el-form label-width="120px"><el-form-item label="讲师名称"><el-input v-m=""/></el-form-item><el-form-item la

5、bel="讲师排序"><el-input-number v-m="teacher.sort" controls- position="right" min="0"/></el-form-item><el-form-item label="讲师头衔"><el-select v-m="teacher.level" clearable placeholder="请选择"><!-数据类型一定要和取出的 j

6、son 中的一致，否则没法回填因此，这里 value 使用动态绑定的值，保证其数据类型是 number-><el-option :value="1" label="高级讲师"/><el-option :value="2" label="首席讲师"/></el-select></el-form-item><el-form-item label="讲师资历"><el-input v-m="teacher.career&

7、quot;/></el-form-item><el-form-item label="讲师简介"><el-input v-m="ro" :rows="10" type="textarea"/></el-form-item><!- 讲师头像：TODO -><el-form-item><el-button :disabled="saveBtnDisabled" type="primar

8、y"2、 编写 js 代码（1） 在 api/teacher.js 添加接口方法（2） 页面（3） js 方法实现<script>import teacher from "/api/teacher" export default data() returneduTeacher:, saveBtnDisabled:false,created () ,methods: /添加讲师saveOrUpdate()teacher.addTeacher(Teacher)click="saveOrUpdate">保存</

9、el-button></el-form-item></el-form></div></template>import teacher from "/api/teacher"addTeacher(eduTeacher)return request(url: /eduservice/eduteacher/addTeacher, method: 'post',data:eduTeacher)讲师修改功能1、新增按钮2、点击按钮跳转页面（1）添加路由，并隐藏path: 'add/:id',name

10、: 'EduTeacherEdit',component: () => import('/views/teacher/add'), meta: title: '编辑讲师', noCache: true ,hidden: true<router-link :to="'/teacher/add/'+scope.row.id"><el-button type="primary" size="mini" icon="el-icon-edit&qu

11、ot;>修改</el-button></router-link>.then(response=>/提示 this.$message( type: "success", message: "添加!");/路由切换this.$router.push(path:'/teacher/list')</script>/提示this.$message(type: "success",message: "修改);/路由切换!"this.$router.push( pa

12、th: "/teacher/list");),第三步是保存还是更新，进行操作/更新讲师updateEduTeacher()teacher.updateTeacher(Teacher).then(response=>/提示this.$message(type: "success",message: "修改);/路由切换!"this.$router.push( path: "/teacher/list");),/添加讲师addTeacher()teacher.addTeacher(

13、Teacher).then(response/提示=> this.$message(type: "success",message: "添加!");解决 bug（路由切换 bug）/路由切换this.$router.push( path: "/teacher/list" ););,/添加修改讲师saveOrUpdate() if(Teacher.id) this.updateEduTeacher() else this.addTeacher()阿里云 OSS阿里云 oss 开发添加讲师上传头像功能（后端）添加讲师

14、上传头像接口（完善）添加讲师上传头像（前端）1、整合上传组件2 页面添加组件代码<!- 讲师头像 -><el-form-item label="讲师头像"><!- 头衔缩略图 -><pan-thumb :image="eduTeacher.avatar"/><!- 文件上传按钮 -><el-button type="primary" icon="el-icon-upload" click="imagecropperShow=true">更换头像</el-button><!-v-show：是否显示上传组件:key：类似于 id，如果一个页面多个图片上传控件，可以做区分:url：上传的 url 地址close：关闭上传组件crop-upload-success：上传后的回调-><image-cropperv-show="imagecropperShow"配置 nginx:width="300":height="300":key="imagecropperKey&