开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师添加】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11340
讲师管理前端-讲师添加
内容简介
一、添加讲师功能
二、在表单页面点击保存，提交接口，添加数据库
一、添加讲师功能
路由里面有一个添加讲师，点击添加讲师按钮，添加讲师数据，进入表单页面，输入讲师信息，点击添加讲师到表单的页面中，输入讲师名称、头衔和资历等，会保存到数据库中。
表单用 element –UI，刚才做条件查询中部分加到讲师位置，加上一个表单，直接复制表单，复制页面，复制到表单页面中，在路由里面的添加讲师，把代码复制到save 的页面中，复制 el-form 表单。
save.vue teacheris
<template>
<div class="app-container">
讲师添加
<el-form label-width="120px">
el-form-item- label="讲师名称">
<el-input v-model="teacher. name"/>
</el-form-item>
<el-form-item label=讲师排序“>
<el-input-numberv-model="teacher.sort" controls-position="right" min=""/>
</el-form-item>
<el-form-item- label="讲师头衔
el-select- v-model-="teacher. level" clearable placeholder=请选择">
<--
数据类型一定要和取出的 json 中的一致,否则没法回填，因此,这里 value 使用动态绑定的值,保证其数据类型是 number
--
el-option-: value=1 label=高级讲师/
el-option: value=2 label="首席讲师"
</el-select>
</el-form-item>
1: node
调试控制台传端
有一个 button 保存按钮，头衔在数据库存的不是高级特级讲师，保存的是一和二，写上一个 select option，最终 value 值会提交，一和二最终显示是高级讲师和首席讲师。
表单中清楚的看到一个地方，v-model 是一个双向数据绑定，条件值最终会封装到一个对象中去，接口中做的特点是直接用 jason 的数据保存到对象中去，做添加。
结构写完之后，先写几个初始值，就是v-model 的值，对象用于封装里面的这些值，teacher 里面可以加上具体的属性，不加也可以，加上也没有错，在例子中没有加，换一种写法，把这些值都加上，直接从课件中复制。
除了这几个值之外，disabled 的表示是否可用，在页面中点击添加之后，预防重复多次停掉的问题，默认值 false，下面把初始值都加进去了。
先看一下默认的效果，之后再写接口的调用过程。重新刷新，点击添加讲师，看下效果，出现表单，讲师名称，比如张老师，讲师头衔为首席讲师，讲师资历和讲师简介都随便写，最后点击保存数据都加到数据库中。
二、在表单页面点击保存，提交接口，添加数据库
因为最后要点击保存，保存是一个 button 的按钮，在按钮中保存一个事件，方法叫 saveOrUpdate，这个方法曾经提到，可以加括号，也可以不写。
在 methonds 中添加方法，这个方法有个特点，方法的命名特点，save 是保存，or 是或者，update 是修改。以下做修改的时候，修改和添加共用一个表单，这样更加方便。
下面单独写方法，叫做添加讲师的方法，这个页面就要做添加，也要做修改。先写一个保存，saveTeacher 的方法，里边先做个调用，之后再完善。
这个写完之后，方法就做出来了 包括teacher在上面有 v-model，最后调用接口，在 API 中的里面直接把方法定义出来。
方法就叫做加讲师，Add teacher，对象是 teacher，结构跟上面一样，在结构中 首先添加上接口的路径，就是 add teacher，前面都一样，用Post提交。
接口中用的是 request body，需要通过 jason 传递，页面中需要传递 jason，要添加 data： teacher，就可以把 teacher 转换到 jason 传进去，所以在 API 中添加一个这样的方法。
(1)API 定义接口地址
代码：
//添加讲师
addTeacher(teacher){
return request({
url: /eduservice/teacher/addTeacher',
method: 'post',
data: teacher
})
}
在 teacher.js 中把方法定义出来
(2)、在页面实现调用
在页面中需要调用，首先进行引入。
import teacher from '@/api/edu/teacher
再进行调用，为了区分明显，把名字换一下。
/添加讲师的方法
saveTeacher(){
teacherApi. addTeacher( this. teacher)
thenresponse=添加成功
/提示信息
this. Smessage({
type: 'success',
message:添加成功!
})
回到列表页面路由跳转
this.Srouter. push( {path: '/teacher/table'})
}
在页面中添加数据，保存之后添加成功，第一个事情需要给用户提示，提示添加数据成功。
第二步，当保存之后，回到列表页面中，在列表中显示你添加之后的最新数据。
调整格式，写完之后需要回到列表中去，是在添加讲师的页面中，回到列表中需要到讲师列表中 这两个是不同的界面，有一个说法叫做路由的切换。
看一下，这个是默认的路径，点击讲师列表 叫做 teacher/ table，再次点击添加讲师到 Teacher /save，需要变成table才可以，这叫做路由跳转。
可以用重定向操作来理解，这个代码是比较固定的代码，
加上地址叫做 table，复制，当点击保存之后 先提示成功 然后路由跳转 回到列表页面中 在列表页面中进行调用，才可以查出最新的数据。
如果一个地方到另一个地方，需要路由跳转方式。
写完之后，试一下最后的效果。路由中的表单用v-model 双向绑定，绑定中可以加属性 不加也可以，加完之后点击保存会提交数据 到接口中去把接口的方法调用进来。
在页面中先引入，再进行调用，调用之后添加成功 成功之后先提示信息，再回到列表页面，因为是不同的路由，每次的值不一样，通过的方式叫路由跳转，这个写法是固定的。
在写的过程中，不需要 created 调用，这个调用是点击按钮调用，不需要多写。写完之后试一下最终的结果，首先刷新，点击添加讲师，在这里面随便写几个值，点击保存查看效果，显示成功，并且回到了列表页面，数据没有做排序，为了更加明显，数据简单排个序。
一般来讲，每次新加的数据应该在第一行显示，要把数据排序，先根据时间排序，把代码稍微改造一下，找到列表方法中，加一个排序的条件。
wrapper. orderByDesc(...columns: "gmt_create"):
根据时间做一个降序排列，这样每次新加的数据都在第一个显示。
重启，试一下。
重新试一下，点击添加教师加数据，点击保存 提示成功 回到列表页面，在列表中的第一个数据，就是刚刚添加的。
data 表示把数据变成 jason 添加。
