开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师列表（1）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11335
讲师管理前端-讲师列表(1)
内容简介
一、讲师列表前端的实现步骤一
二、讲师列表前端的实现步骤二
三、讲师列表前端的实现步骤三
四、讲师列表前端的实现步骤四
一、讲师列表前端的实现步骤一
添加路由
1、在 Example 位置添加讲师管理，讲师管理中具有讲师列表。路由的添加位置在src 中 router 的 index中，添加代码与 Example 类似，复制之后进行修改即可，代码为：
｛
path：＇/example＇,
component：Layout，
redirect：＇example/table＇，
name：＇Example＇，
meta：｛title：＇Example＇，icon：＇example＇｝，
children：[
｛
path：＇table＇，
name：＇Table＇，
component：()=﹥ import(＇@/views/table/index＇)，
meta：｛title：＇Table＇，icon：＇table＇｝
｝，
｛
path：＇tree＇，
name:＇Tree＇，
component：()=﹥import(＇@/views/tree/index＇)，
meta：｛title：＇Tree＇，icon：＇tree＇｝
｝
]
｝
2.现在我们对其进行修改，path 改为 teacher 讲师，component 中的 Layout 布局不需要改变，响应的 redirect 访问地址也要改为 teacher，然后将名字 name改为讲师管理，然后 icon 不需要改变，这里只是控制图标的代码，这样我们就完成了一层目录。
最终代码为：
｛
path：＇/teacher＇,
component：Layout，
redirect：＇teacher/table＇，
name：＇讲师管理＇，
meta：｛title：＇讲师管理＇，icon：＇example＇｝，
3.下面我们进行下一层代码的改写，首先将 name 改为讲师列表，title也改为讲师列表，再写入添加讲师的路径，同时 meta 中的 title 也改为添加讲师，图标我们可以不进行修改，使用默认的即可，当然我们也可以对其进行修改，如果想要更改，在 icons 中找到 svg，选择合适的图标即可，
最终代码为：
children：[
｛
path：＇table＇，
name：＇讲师列表＇，
component：()=﹥ import(＇@/views/table/index＇)，
meta：｛title：＇讲师列表＇，icon：＇table＇｝
｝，
｛
path：＇save＇，
name:＇添加讲师＇，
component：()=﹥import(＇@/views/tree/index＇)，
meta：｛title：＇添加讲师＇，icon：＇tree＇｝
｝
]
｝，
这样我们就完成了路由的添加，然后进入到页面进行刷新查看，可以清楚到看到讲师管理的界面，里面就具有了讲师列表和添加讲师的功能。
二、讲师列表前端的实现步骤二
创建路由对应页面内容
1.改变当前页面，此时页面都放入了 views 里面，也可以放到别的目录，但是views 前面的/@是不能进行随意改动的，这是一个默认情况，相当于我们之前了解的./，表示指认当前路径。
开始写页讲师列表与添加讲师的页面，可以参考table的书写，为了明显，我们在views 里面新建一个文件夹 edu,然后在edu目录下新建文件夹 teacher,在 teacher 中需要写入两个页面，一个页面是列表，一个页面是添加，即 list.vue 和 save.vue，到添加完成之后我们把这个需要对地址位置进行修改，component：()=﹥ import(＇@/views/edu/teacher/list＇)，component：()=﹥ import(＇@/views/edu/teacher/save＇),其中.vue 可以省略不写。
此时页面我们就已经写好了，将路径引入进来了。
注意在引入时，一定要将路径位置写对，如果书写错误，会出现报错的情况.例如将component：()=﹥ import(＇@/views/teacher/save＇),中的edu漏写，保存后出现提示词，告知我们这个 dependency 不存在，因此如果看到dependency was not found 的提示词，注意去看自己的路径有没有写错。
2.下面我们进行简单的测试，例如为界面中添加一个 name，我们参考其他写入name的方法，可以看到 template 与 div 是必不可少的，按照这种方式复制相应代码，例如在讲师列表中添加 name，
代码如下所示:
<template>
<div class-" app-container" >
讲师列表
</div>
</template>
同理，在添加讲师中的代码为：
<template>
<div class-" app-container" >
讲师添加
</div>
</template>
写完之后，进入页面刷新后点击讲师管理，点击讲师列表就会进入到讲师添加的界面，点讲师添加就会进入到讲师添加的界面
三、讲师列表前端的实现步骤三
在 api 文件夹创建js文件，定义接口地址和参数
1.不一定在 api 中进行操作，只要是能够调用的都可以。我们以在 api 中为例进行讲解，在 api 中新建一个文件夹或是一个文件，例如新建一个文件夹，命名为 teacher，然后在特 ache二文件夹中新建一个文件，这个文件命名为 teacher.js，创建完成之后，我们参考其他的方式将接口放置尽量，
参考代码：
import request from '@/uti1s/request'
export function getList(params){
return request({
url: "/table/list ' ,method: 'get ' ,
params
})
}
const res =response.data
if (res.code !=2００００){
Message（{
message: res.message,
type: 'error',
duration: 5 *1000
}）
- 代码解释：
第一行是固定的，表示引入 uti1s 中的 request，这里面封装了 axios，我们不需要再去写入 axios 的代码，使用时只需要调用即可。首先创建 axios 对象，取到 BASE-API，timeout 表示超时时间。
然后进行判断，通过 response．date 得到数据，如果值不是代码设定值，就表示失败，并将失败信息进行输出，如果是设定值则直接将信息进行返回。
下面只需要按照结构将方法进行定义即可，
export function getList(params){
return request({
url: ‘/table/list ' ,
method:‘get’,
params
})
｝
另外还有一种写法，
export default {
getTeacherListPage() {
return request({
url: '/toble/list' ,
method:'get ' ,
params
})
}
}
2.在接口中找到条件查询带分页的方法，地址是 eduservice/teacher 和 pageTeacherCondition。
注意在接口中，我们传入了几个参数，像 current 当前页、limit 每页记录数还有teacherQuery 条件对象，在js中传入参数，和 json 不一样，不需要将参数的类型一并写入。
现在将值传入参数中 current 是在路径后面传入，有很多种方法可以实现，我们进行逐一讲解。第一种是url:'/table/list/'+current+"/"+limit,进行字符串的拼接；还有一种是通过添加符合来完成，将地址eduservice/teacher/pageTeacherCondition 复制,然后放置在符号中，此时为参数传值就不需要拼接了，这个时候可以通过表达式来完成，
最终代码为：url:`eduservice/teacher/pageTeacherCondition/${current}/limit}`。
虽然上述两种方式都可以将值传入到参数中，但是建议大家还是使用第二种，因为第一种方式很容易漏写内容。
下面进行提交方法的定义，已知提交方式为 Post 提交，代码为method：‘post’。
由于后端使用 RequestBody 获取数据，因此前端需要添加一个属性，代码为data：teacherQuery。
这是因为使用 RequestBody 获取数据时需要 json 进行数据的传输，加入data就表示将对象转换成了 json 格式，然后传入到接口中。至此，我们就完成了方法的定义，
完整代码为：
import request from "@/utils/request'
export default {
getTeacherListPage(current,limit,teacherQuery) {
return request({url:`/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
method: "post",
data: teacherQuery
})
}
}
四、讲师列表前端的实现步骤四
在讲师列表页面 list.vue 页面调用定义的接口方法，得到接口返回数据
1.首先写入扎所部分，这里与我们之前的写入方法有所区别，因为之前我们是按照框架的方式来写的，可以参考通过框架是如何书写的，加上标签，
然后在标签中加上 export defult 结构，核心代码都会写入到该结构中，export defult 表示可以被调用，对最原始的代码我们都使用了new Vue，现在我们不写也可以达到其效果，它在 main.js 中做了封装，在结构中写具体内容即可。
2.整体架构写出之后，我们就需要将方法引入了，这一步要写在export defult结构之前，
具体代码为：
import teacher from‘’，其中单引号双引号都可以，习惯使用的是单引号，然后输入@/,效果与./一致，但是这种引入方式并不识别./，最终代码为：import teacher from "@/api/edu/teacher.js'最后的.js可以省略。
3.在export defult结构中分别写入data、created、methods，data的写入方法是data：{},或data（）{return{}}即在 return 中写方法，两种方法都可以，不过第二种更为常见；created 的写入方法是 created(){},；methods的写入方法是：{}。
现在为每个结构中写入内容：
data的作用是定义变量和初始值
首先定义参数，page:1表示当前页，limit:10，表示每页记录数，total：0，表示总记录数，teacherQuery:{}表示条件封装对象，list：null，表示查询之后接口返回集合。
这几个参数是必须的，后面如有其他需要我们还可以进行添加，参数的名字是可以随便定义的，
完整代码为：
data({//
return {
list:nul1，
page:1,
limit:10,
total:0,
teacherQuery{}
}
}
methods 创建具体的方法，调用 teacher.js 定义的方法
以讲师列表的方法为例，首先命名为 getList，然后进行具体方法的定义，之前我们需要输入axios.post("").then( ).catch()然后再去进行下一步的操作，但是有很多方法已经进行了封装，我们只需要调用即可
代码为：
teacher.getTeacherListPage
（this.page,this.limit,this.teacherQuery)，
并传入了三个参数，然后输入.then()和.catch(),.then()表示请求成功，.catch()表示请求失败。
在then()加上response和箭头函数，response表示接口返回的数据，在.catch()加上error和箭头函数，
完整代码为：
methods:{
getList() {
teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
.then( response =>{
console. log(response)
})
catch(error =>{
console. log(error)
})
}
}
created 表示在页面渲染之前执行，一般调用 methods 定义的方法。
代码为：
created(){
this.getList()
}
细节讲解：
在进行方法的书写时，若担心误将名字写错，我们可以将方法名称进行统一。
