【项目】小帽学堂（五）

小帽学堂

4. 后台系统登录功能改造

5. 前端框架开发过程介绍

十、讲师管理前端

1. 讲师列表

// 1. 添加路由
// 2. 创建路由对应的页面
// src\router\index.js
{
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/table/index'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'tree',
        name: '添加讲师',
        component: () => import('@/views/tree/index'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
},

// 3.在api文件夹创建teacher.js定义访问的接口地址
// src\api\edu\teacher.js
import request from '@/utils/request'

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

// 4.list.vue中定义接口方法，得到接口数据
// src\views\edu\teacher\list.vue
<template>
  <div class="app-container">
    讲师列表  
    
    <el-table
      :data="list"
      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="'/edu/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>

   
    <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"
    />
  div>
template>
<script>
// 引入调用teacher.js文件
import teacher from '@/api/edu/teacher'
export default {
  // 写核心代码位置
  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
      })   
      .catch(error => {
        console.log(error);
      })  // 请求失败
    }
  }
}
script>

2. 讲师分页和添加、查询

3. 讲师条件删除

// src\api\edu\teacher.js
    // 删除讲师
    deleteTeacherId(id) {
      return request({
        // url: '/table/list/' + current + "/" + limit,
        url: `/eduservice/teacher/${id}`,
        method: 'delete'
      })
    }

// src\views\edu\teacher\list.vue
    // 删除讲师的方法
    removeDataById(id) {
      this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击确定，执行then方法
          // 调用删除方法
          teacher.deleteTeacherId(id)
          .then(response => { // 删除成功
            // 提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // 回到列表页面
            this.getList()
          })
        })
    }

4. 讲师添加

// src\views\edu\teacher\save.vue
<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-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="请选择">
          
          <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>
      
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存el-button>
      el-form-item>
    el-form>
  div>
template>

<script>
import teacherApi from '@/api/edu/teacher'
export default {
  data() {
    return {
      teacher: {
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  methods: {
    saveOrUpdate() {
      this.saveBtnDisabled = true
      this.saveTeacher()
    },
    // 添加讲师的方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher)
      .then(response => { // 添加成功
        // 提示信息
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        // 回到列表页面 路由跳转
        this.$router.push({path: '/teacher/table'})
      })
    }
  }
}
script>

// src\api\edu\teacher.js
// 添加讲师
    addTeacher(teacher) {
      return request({
        url: `/eduservice/teacher/addTeacher`,
        method: 'post',
        data: teacher
      })
    }

5. 讲师修改

6. 路由切换的问题

7. 完整代码

// src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'

// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading

Vue.use(Router)

export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },

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

export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

// src\api\edu\teacher.js
import request from '@/utils/request'

export default {
    // 1. 讲师列表（条件查询分页）
    // current 当前页 limit 每页记录数 teacherQuery 条件对象
    getTeacherListPage(current,limit,teacherQuery) {
      return request({
        // url: '/table/list/' + current + "/" + limit,
        url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
        method: 'post',
        // teacherQuery条件对象，后端使用RequestBody获取数据
        // data表示把对象转换成json进行传递，到接口里面
        data: teacherQuery
      })
    },
    // 删除讲师
    deleteTeacherId(id) {
      return request({
        // url: '/table/list/' + current + "/" + limit,
        url: `/eduservice/teacher/${id}`,
        method: 'delete'
      })
    },
    // 添加讲师
    addTeacher(teacher) {
      return request({
        url: `/eduservice/teacher/addTeacher`,
        method: 'post',
        data: teacher
      })
    },
    // 根据id查询讲师
    getTeacherInfo(id) {
      return request({
        url: `/eduservice/teacher/getTeacher/${id}`,
        method: 'get',
      })
    },
    // 修改讲师
    updateTeacherInfo(teacher) {
      return request({
        url: `/eduservice/teacher/updateTeacher`,
        method: 'post',
        data: teacher
      })
    }
}

// src\views\edu\teacher\list.vue
<template>
  <div class="app-container">
    讲师列表
    
    <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>
    
    <el-table
      :data="list"
      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>

   
    <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"
    />
  div>
template>
<script>
// 引入调用teacher.js文件
import teacher from '@/api/edu/teacher'
export default {
  // 写核心代码位置
  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
      })   
      .catch(error => {
        console.log(error);
      })  // 请求失败
    },
    resetData() { // 清空的方法
      // 表单输入项数据清空
      this.teacherQuery = {}
      // 查询所有讲师数据
      this.getList()
    },
    // 删除讲师的方法
    removeDataById(id) {
      this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击确定，执行then方法
          // 调用删除方法
          teacher.deleteTeacherId(id)
          .then(response => { // 删除成功
            // 提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // 回到列表页面
            this.getList()
          })
        })
    }
  }
}
script>

// src\views\edu\teacher\save.vue
<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-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="请选择">
          
          <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>
      
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存el-button>
      el-form-item>
    el-form>
  div>
template>

<script>
import teacherApi from '@/api/edu/teacher'
export default {
  data() {
    return {
      teacher: {
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  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
        // 调用根据id查询的方法
        this.getInfo(id)
      } else {  // 路径没有id值，做添加
        // 清空表单
        this.teacher = {}
      }
    },
    // 根据讲师id查询的方法
    getInfo(id) {
      teacherApi.getTeacherInfo(id)
      .then(response => {
        this.teacher = response.data.teacher
      })
    },
    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'})
      })
    },
    // 添加讲师的方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher)
      .then(response => { // 添加成功
        // 提示信息
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        // 回到列表页面 路由跳转
        this.$router.push({path: '/teacher/table'})
      })
    }
  }
}
script>