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

2023-05-16

一、讲师查询功能

1、添加路由

在/src/router/index.js中

在这里插入图片描述

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

2、创建路由对应的页面

在这里插入图片描述
list.vue

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

save.vue

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

3、在api文件夹中创建teacher.js定义访问的接口地址

import request from '@/utils/request'

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

4、在讲师列表页面 list.vue 页面调用定义的接口方法，得到接口返回数据

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

export default {
  // data:{
  // },
  data(){//定义变量和初始值
    return {
      list:null,//查询之后接口返回集合
      page:1,//当前页
      limit:10,//每页记录数
      total:0,//总记录数
      teacherQuery:{}//条件封装对象
    }
  },
  created(){//在页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList()
  },
  methods:{//创建具体的方法，调用teacher.js定义方法
    //讲师列表的方法
    getList(page = 1){
      this.page = page
      teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
          .then(response =>{
              //response接口返回的数据
              //console.log(response)
              this.list = response.data.rows
              this.total = response.data.total
              console.log(this.list)
              console.log(this.total)
          }) //请求成功
          .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"
/>

分页的方法修改，添加页码参数

在这里插入图片描述

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
}

二、讲师删除功能

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

2、在按钮绑定事件

@click="removeDataById"

3、在绑定事件的方法传递删除讲师的id值

@click="removeDataById(scope.row.id)"

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

在 src/api/edu/teacher.js

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

5、页面调用实现删除方法

在src/views/edu/teacher/list.vue

//删除讲师方法
removeDataById(id) {
  this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {//点击确定，删除成功
      //调用删除方法
      teacher.deleteTeacher(id)
      .then(response => {//删除成功
          //提示信息
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //回到查询列表
          this.getList()
      }) 
    })//点击取消，删除失败
}

6、运行项目测试

三、讲师添加功能

1、定义api

在 src/api/edu/teacher.js

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

2、初始化页面组件

在src/views/edu/teacher/save.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 teacherApi from '@/api/edu/teacher'

export default {
  data() {
    return {
      teacher:{
        name:'',
        sort:0,
        level:1,
        career:'',
        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'})
        })
        .catch(error => {

        })
    }
  }
}
</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',
  name: 'EduTeacherEdit',
  component: () => import('@/views/edu/teacher/save'),
  meta: { title: '编辑讲师', noCache: true },
  hidden: true
}

4、在表单页面显示数据回显

（1）在teacher.js定义根据id查询接口

//根据id查询讲师，回显数据
getTeacherInfo(id) {
    return request({
        url: `/eduservice/teacher/getTeacher/${id}`,
        method: 'get'
    })
}

（2）在页面调用接口实现数据回显

//根据讲师id查询的方法
getInfo(id) {
  teacherApi.getTeacherInfo(id)
    .then(response => {
      this.teacher = response.data.teacher
    })
},

（3）调用根据id查询的方法

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

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

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

5、最终修改实现

（1）在api的teacher.js中定义修改接口

在 src/api/edu/teacher.js

//修改讲师
updateTeacherInfo(teacher) {
    return request({
        url: `/eduservice/teacher/updateTeacher`,
        method: 'post',
        data: teacher
    })
}

（2）在页面中调用修改方法

在src/views/edu/teacher/save.vue

saveOrUpdate() {
  //判断修改还是添加
  //根据teacher是否有id
  if(!this.teacher.id) {
    //添加
    this.saveTeacher()
  } else {
    //修改
    this.updateTeacher()
  }     
},
//修改讲师方法
updateTeacher() {
  teacherApi.updateTeacherInfo(this.teacher)
    .then(response => {
      //提示信息
      this.$message({
        type: 'success',
        message: '修改成功!'
      });
      //回到列表页面  路由跳转
      this.$router.push({path:'/teacher/table'})
    })
},

五、存在问题

第一次点击修改进行数据回显

第二次在去点击添加讲师，进入表单页面，但是问题：表单页面还是显示修改回显数据，正确效果应该是表单数据清空。

解决方式：

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

init() {
//判断路径有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()
  }
},

如果有收获！！！希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

谷粒学院

讲师列表前端实现