谷粒学院（七）讲师列表前端实现

一、讲师查询功能

1、添加路由

在/src/router/index.js中添加前端页面的菜单路由

	 {
        path: '/teacher',
        component: Layout, //布局
        redirect: '/teacher/table',
        name: '讲师管理',
        meta: { title: '讲师管理', icon: 'example' },
        children: [{
                path: 'list',
                name: '讲师列表',
                component: () =>
                    import ('@/views/edu/teacher/list'),
                meta: { title: '讲师列表', icon: 'table' }
            },
            {
                path: 'add',
                name: '添加讲师',
                component: () =>
                    import ('@/views/edu/teacher/add'),
                meta: { title: '添加讲师', icon: 'tree' }
            }
        ]
    }

2、创建路由对应的页面

list.vue

<template>
  <div class="app-container">
    讲师列表
  </div>
</template>

add.vue

<template>
  <div class="app-container">
    讲师添加
  </div>
</template>

3、在api文件夹中定义访问接口

import request from '@/utils/request'

export default {
    //查询讲师列表(分页) current:当前页  limit:每页记录数 teacherQuery:条件对象
    getTeacherListPage(current, limit, teacherQuery) {
        return request({
            // url: '/eduservice/teacher/pageQuery/'+current+'/'+limit,
            url: `/eduservice/teacher/pageQuery/${current}/${limit}`,
            method: 'post',
            //teacherQuery条件对象,后端使用RequestBody获取对象
            //data表示把对象转为json进行传递到接口里面
            data: teacherQuery
        })
    }
}

4、在讲师列表页面调用接口

list.vue

<script>
import teacher from '@/api/edu/teacher'

export default {
    //注意不可以这样哦 Vue实例里面data可以写函数式或者对象式，但是组件里面只能写函数式！！！
    // data:{}  
   data() {//定义变量和初始值
     return {
       list:null,//查询之后接口返回集合
       page:1,//当前页
       limit:5,//每页记录数
       total:0,//总记录数
       teacherQuery:{}//条件封装对象
     }
   },
   created() {//在页面渲染之前执行,一般调用methods中的方法
      this.getList();
   },
   methods: {//创建具体的方法,调用teacher.js定义方法
    //讲师列表的方法
      getList(page = 1){//page默认值为1,当使用分页组件时会传入新的page参数
        this.page = page
        teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
        .then(response=>{
          this.list = response.data.rows;
          this.total = response.data.total;
          // console.log(response);
        }).catch(error=>{
          console.log(error)
        })
      }
  }
}
</script>

5、页面数据渲染

在讲师列表页面 list.vue 页面

<template>
  <div class="app-container">
    //讲师列表
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>
      
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名称" width="80" />

      <el-table-column label="头衔" width="80">
        <template slot-scope="scope">
          {{ scope.row.level===1?'高级讲师':'首席讲师' }}
        </template>
      </el-table-column>

      <el-table-column prop="intro" label="资历" />

      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

      <el-table-column prop="sort" label="排序" width="60" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

6、分页功能

在src/views/edu/teacher/list.vue中添加代码

<!-- 分页 -->
<el-pagination
  :current-page="page"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center;"
  layout="total, prev, pager, next, jumper"
  @current-change="getList"
/>

分页方法修改，添加页码参数(因为分页时,会自动传入新的page,所以需要重新赋值)

效果:

7、顶部查询表单

注意：element-ui的 date-picker 组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时

设置 value-format=“yyyy-MM-dd HH:mm:ss” 改变绑定的值

<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
  <el-form-item>
    <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
  </el-form-item>

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

  <el-form-item label="添加时间">
    <el-date-picker
      v-model="teacherQuery.begin"
      type="datetime"
      placeholder="选择开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      default-time="00:00:00"
    />
  </el-form-item>

  <el-form-item>
    <el-date-picker
      v-model="teacherQuery.end"
      type="datetime"
      placeholder="选择截止时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      default-time="00:00:00"
    />
  </el-form-item>

  <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
  <el-button type="default" @click="resetData()">清空</el-button>
</el-form>

清空表单功能:

resetData(){//清空表单
 //表单输入项数据清空
 this.teacherQuery = {}
  //查询所有讲师数据
 this.getList()
}

8、结果展示

二、讲师删除功能

1、在每条记录后面添加删除按钮

2、在按钮绑定事件 @click="removeDataById"

3、在绑定事件的方法传递删除讲师的id值 @click="removeDataById(scope.row.id)"

4、在api文件夹teacher.js 定义删除接口

//删除讲师
removeById(id) {
    return request({
        url: `/eduservice/teacher/removeById/${id}`,
        method: 'delete'
    })
},

5、list.vue页面定义方法调用删除接口

//删除讲师
removeDataById(id){
    this.$confirm('此操作将永久删除讲师记录,是否继续?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
    }).then(()=>{//点击确定
        teacher.removeById(id).then((response)=>{
            this.$message({
                type:'success',
                message:'删除成功!' 
            }) 
            //回到列表页面
            this.getList()
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除!'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败!'
            })
        }
    })
}

三、讲师添加功能

1、定义api

//添加
addTeacher(teacher) {
    return request({
        url: `/eduservice/teacher/addTeacher`,
        method: 'post',
        //data表示把对象转为json进行传递到接口里面
        data: teacher
    })
},

2、初始化页面组件==> >== 添加表单

add.vue

<el-form label-width="120px">
  <el-form-item label="讲师名称">
    <el-input v-model="teacher.name"/>
  </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" 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="teacher.career"/>
  </el-form-item>

  <el-form-item label="讲师简介">
    <el-input v-model="teacher.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>

3、定义方法调用接口

<script>
import teacher from '@/api/edu/teacher'

export default {
  data() {
    return {
      teacher:{//这里边写不写属性都可,因为程序会自动把页面绑定的属性添加进去
        name:'',
        sort:0,
        level:1,
        career:'',
        intro:'',
        avatar:''
      },
      saveBtnDisabled: false//保存按钮是否禁用
    }
  },
  created() {

  },
  methods:{
    saveOrUpdate() {
      this.saveTeacher()
      this.saveBtnDisabled = true//禁止重复提交(可以不写,因为后续会跳转到查询页面)
    },
    //添加讲师方法
    saveTeacher(){
      teacher.addTeacher(this.teacher).then(response=>{
        this.$message({
          type:'success',
          message:'添加成功!'
        });
      }).catch(error=>{
        this.$message({
          type:'error',
          message:'添加失败!'
        });
      })
      //回到列表页面,进行路由跳转
      this.$router.push({path:'/teacher/list'})
    }
  }
}
</script>

四、讲师修改功能

1、添加修改按钮

<router-link :to="'/teacher/edit/'+scope.row.id">
  <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>

2、点击修改按钮进入表单页面.先根据讲师 id 查询数据显示,之后进行表单提交,修改记录

3、在路由index页面添加路由

{
    path: 'edit/:id', //隐藏路由的写法. :id类似于sql中的占位符,用来接收参数
    name: '修改讲师',
    component: () =>
    import ('@/views/edu/teacher/add'), //因为修改和编辑使用同一个表单,所以使用同一个路由.
    meta: { title: '编辑讲师', noCache: true },
	hidden: true //将该路由进行隐藏,让用户看起来如同是在当前页面进行修改.
}

4、在表单页面进行数据回显

• 在api中定义查询接口

//通过id获取用户信息(用于修改用户信息前的数据回显操作)
getById(id) {
    return request({
        url: `/eduservice/teacher/getById/${id}`,
        method: 'get',
    })
},

• 在页面调用接口实现数据回显

//根据讲师id查询讲师
getTeacherInfo(id){
    teacher.getById(id)
        .then(response=>{
        this.teacher = response.data.teacher;
    })
},

• 调用根据id查询的方法

因为添加和修改都使用add页面，区别添加还是修改，只有修改时候查询数据回显。

依据：判断路径里面是否有讲师id值，如果有id值修改，没有id值直接添加。

created() {//页面渲染之前执行
  //判断路径是否有id值
  if(this.$route.params && this.$route.params.id) {
    //从路径获取id值
    const id = this.$route.params.id
    //调用根据id查询的方法
    this.getTeacherInfo(id)
  }
},

5、进行讲师表单提交

• 在api中定义更新接口

//根据id修改讲师
updateById(teacher) {
    return request({
        url: `/eduservice/teacher/updateById`,
        method: 'put',
        data: teacher
    })
}

• 在add.vue页面中调用修改Api

saveOrUpdate(){
    if(!this.teacher.id){//通过判断id属性是否为空,来决定是添加还是修改
        //添加
        this.saveTeacher();
    }else{
        this.updateTeacher();
    }
    this.saveBtnDisabled = true
},
	//修改讲师
    updateTeacher(){
        teacher.updateById(this.teacher)
            .then(response=>{
            this.$message({
                type:'success',
                message:'修改成功!'
            });      
        }).catch(error=>{
            this.$message({
                type:'error',
                message:'修改失败!'
            });
        })
        //回到列表页面,路由跳转
        this.$router.push({path:'/teacher/list'})

    }        

五、存在问题

点击修改进行数据回显,然后直接去点击添加讲师，进入表单页面，但是 表单页面还是显示修改回显数据，正确效果应该是表单数据清空。

错误的解决方式：

在做添加讲师时候，表单数据清空就可以了。

created() {
//判断路径有id值，做修改
  if(this.$route.params && this.$route.params.id) {
    //从路径获取id值
    const id = this.$route.params.id
    //调用根据id查询的方法
    this.getInfo(id)
  }else {//路径没有id值，做添加
    //清空表单
    this.teacher = {}
  }
}

上面代码没有解决问题，为什么？

多次路由跳转到同一个页面，在页面中created方法只会执行第一次，后面在进行跳转不会执行的。【路由切换问题】

最终解决：使用vue监听

 created() {
    this.init()
  },
  watch:{//监听
    $route(to,from){//当路由路径发生变化时,方法就会被执行
      this.init()
    }
  },
  methods: {
    //初始化
    init(){
      //判断路径中是否有id来决定是否进行回显功能
      if(this.$route.params && this.$route.params.id){
        //从路径中获取id值
        const id = this.$route.params.id
        this.getTeacherInfo(id)//进行回显
      }else{
        this.teacher = {}
      }
    },
        ...
  }