1.设置路由定义

1.1修改路由

修改 src/router/index.js 文件，重新定义constantRouterMap

**注意：**每个路由的name不能相同

 export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  // 首页
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '硅谷课堂后台管理系统', icon: 'dashboard' }
    }]
  },
    // 讲师管理
    //讲师管理接口路由
  {
    path: '/vod',
    component: Layout,
    redirect: '/vod/teacher/list',
    name: 'vod',
    meta: { title: '点播管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'teacher/list',
        name: 'TeacherList',
        component: () => import('@/views/vod/teacher/list'),//页面路径
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'teacher/create',
        name: 'TeacherCreate',
        component: () => import('@/views/vod/teacher/form'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

  { path: '*', redirect: '/404', hidden: true }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

1.2创建vue组件

在src/views文件夹下创建以下文件夹和文件

1.3form.vue

<template>
  <div class="app-container">
    讲师表单
  div>
template>
1
2
3
4
5

1.4list.vue

<template>
  <div class="app-container">
    讲师列表
  div>
template>
1
2
3
4
5

2.讲师分页列表

2.1定义api

创建文件 src/api/vod/teacher.js

import request from '@/utils/request'

const api_name='/admin/vod/teacher'
export default{
    //讲师的条件查询分页
    //current :当前页
    //limit ：每页显示的记录数
    //searchObj ：查询条件
    pageList(current,limit,searchObj){
        return request({
            url: `${api_name}/findQueryPage/${current}/${limit}`,
            method: 'post',
            //使用JSON格式传递，写法 data：searchObj
            //使用普通格式船体， 写法 params ：searchObj

            data:searchObj
          })
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.2初始化vue组件

src/views/vod/teacher/list.vue

<template>
  <div class="app-container">
    医院设置列表
  div>
template>
<script>
import teacherApi from '@/api/vod/teacher'
export default {
  // 定义数据模型
  data() {
    return {
    }
  },
  // 页面渲染成功后获取数据
  created() {
    this.fetchData()
  },
  // 定义方法
  methods: {
    fetchData() {
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.3 list.vue 中定义data，methods

<script>
// 引入定义接口的js文件
import teacherApi from '@/api/vod/teacher.js'
export default {
    data(){ //初始值
        return{
            list: [], // 讲师列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 10, // 每页记录数
            searchObj: {} // 查询条件
        }
    },
    created(){//页面渲染之前
        this.fetchData()
    },
    methods:{//具体方法
        fetchData(){
            //ajax
            teacherApi.pageList(this.page,this.limit,this.searchObj).then(
                response=>{
                    this.list=response.data.records
                    this.total=response.data.total
                }
            )
        }

    }
    
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. 4list.vue中表格渲染

<template>
    <div class="app-container">
        讲师列表
        
        <el-table
            :data="list"
            border
            stripe
            @selection-change="handleSelectionChange">
            <el-table-column type="selection"/>
            <el-table-column
                label="#"
                width="50">
                <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="90">
                <template slot-scope="scope">
                <el-tag v-if="scope.row.level === 1" type="success" size="mini">高级讲师el-tag>
                <el-tag v-if="scope.row.level === 0" size="mini">首席讲师el-tag>
                template>
            el-table-column>
            <el-table-column prop="intro" label="简介" />
            <el-table-column prop="sort" label="排序" width="60" />
            <el-table-column prop="joinDate" label="入驻时间" width="160" />
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                <el-button type="text" size="mini" @click="removeById(scope.row.id)">删除el-button>
                <router-link :to="'/vod/teacher/edit/'+scope.row.id">
                    <el-button type="text" size="mini">修改el-button>
                router-link>
                template>
            el-table-column>
        el-table>
    div>
template>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2. 5list.vue中添加分页组件

  
  <el-pagination
    :current-page="page"
    :total="total"
    :page-size="limit"
    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
    style="padding: 30px 0; text-align: center;"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="changePageSize"
    @current-change="changeCurrentPage"
  />
1
2
3
4
5
6
7
8
9
10
11

添加方法

        //改变每页显示的记录数
        changePageSize(size){
            this.limit=size
            this.fetchData()
        },
        //改变页页码数
        changeCurrentPage(page){
            this.page=page
            this.fetchData()
        }
1
2
3
4
5
6
7
8
9
10

2.6顶部查询表单

<el-card class="operate-container" shadow="never">
  <el-form :inline="true" class="demo-form-inline">
  <el-form-item label="名称">
    <el-input v-model="searchObj.name" placeholder="讲师名" /> 
  el-form-item>

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

  <el-form-item label="入驻时间">
    <el-date-picker
      v-model="searchObj.joinDateBegin"
      placeholder="开始时间"
      value-format="yyyy-MM-dd" />
  el-form-item>
  <el-form-item label="-">
    <el-date-picker
      v-model="searchObj.joinDateEnd"
      placeholder="结束时间"
      value-format="yyyy-MM-dd" />
  el-form-item>

    <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询el-button>
    <el-button type="default" @click="resetData()">清空el-button>
el-form>
el-card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

分页和清空方法

    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    // 重置表单
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3讲师删除

3.1定义api

src/api/vod/teacher.js

 //讲师的删除
 removeTeacherId(id){
     return request({
         url: `${api_name}/remove/${id}`,
         method: 'delete'
       })
 }
1
2
3
4
5
6
7

3.2定义methods

src/views/vod/teacher/list.vue

使用MessageBox 弹框组件

// 根据id删除数据

removeById(id){
     this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        //调用接口删除
        teacherApi.removeTeacherId(id).then(response=>{
            //提示
            this.$message({
                type:'success',
                message:'删除成功'
            
            });
            //刷新
            this.fetchData()
            
        })
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4.讲师新增

4.1定义api

src/api/vod/teacher.js

save(teacher) {
  return request({
    url: `${api_name}/save`,
    method: `post`,
    data: teacher
  })
},
1
2
3
4
5
6
7

4.2初始化组件

src/views/vod/teacher/form.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-date-picker v-model="teacher.joinDate" value-format="yyyy-MM-dd" />
      el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" :min="0"/>
      el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level">
          
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        el-select>
      el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro"/>
      el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career" :rows="10" type="textarea"/>
      el-form-item>

      
      <el-form-item label="讲师头像">
      el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate()">保存el-button>
      el-form-item>
    el-form>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

4.3实现新增功能

<script>
import teacherApi from '@/api/vod/teacher'
export default {
  data() {
    return {
      BASE_API: 'http://localhost:8301',
      // 初始化讲师默认数据
      teacher: {
        sort: 0,
        level: 1
      },
      saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交
    }
  },
  // 页面渲染成功
  created() {
 
  },
  methods: {
    saveOrUpdate() {
    // 禁用保存按钮
      this.saveBtnDisabled = true
      if (!this.teacher.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    // 新增讲师
    saveData() {
    // debugger
      teacherApi.save(this.teacher).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push({ path: '/vod/teacher/list' })
      })
    },
    // 根据id更新记录
    updateData() {
      
    }
  }
}
</script>

<style scoped>
  .avatar-uploader .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar-uploader .avatar-uploader-icon:hover {
    border-color: #409EFF;
  }
  .avatar-uploader img {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

5.讲师修改-数据回显

5.1定义api

src/api/vod/teacher.js

    //根据id 查询
    getTeacherById(id){
        return request({
            url: `${api_name}/getTeacher/${id}`,
            method: 'get'
          })
    }
1
2
3
4
5
6
7

5.2form.vue组件中调用api

methods中定义fetchDataById

 //根据id 查询讲师信息
 fetchDataById(id){
     teacherApi.getTeacherById(id)
         .then(response=>{
             this.teacher=response.data
         })
 },
1
2
3
4
5
6
7

5.3页面渲染前调用fetchDataById

  // 页面渲染成功
    created(){
        //获取路径中的id值，根据id查询得到数据
        if(this.$route.params.id){
            const id =this.$route.params.id
            this.fetchDataById(id)
        }
    }
1
2
3
4
5
6
7
8

6.讲师修改-更新

6.1js 定义api

  updateById(teacher) {
    return request({
      url: `${api_name}/update`,
      method: `put`,
      data: teacher
    })
  },
1
2
3
4
5
6
7

6.2组件中调用api

methods中定义updateData

// 根据id更新记录
updateData() {
  // teacher数据的获取
  teacherApi.updateById(this.teacher).then(response => {
    this.$message({
      type: 'success',
      message: response.message
    })
    this.$router.push({ path: '/vod/teacher/list' })
  })
},
1
2
3
4
5
6
7
8
9
10
11

6.3完善saveOrUpdate方法

根据是否含有id 判断是 修改还是添加操作

//新增或修改讲师的保存
saveOrUpdate(){
    if(!this.teacher.id){ //没有id，为添加操作
        this.save()
    }else{//有id，为修改操作
        this.update()
    }
}
1
2
3
4
5
6
7
8

7.讲师批量删除

7.1定义api

src/api/vod/teacher.js

//批量删除讲师
batchRemove(idList) {
    return request({
      url: `${api_name}/removeBatch`,
      method: `delete`,
      data: idList
    })
}
1
2
3
4
5
6
7
8

7.2初始化组件

src/views/vod/teacher/list.vue

在table组件上添加 批量删除 按钮

<el-card class="operate-container" shadow="never">
  <i class="el-icon-tickets" style="margin-top: 5px">i>
  <span style="margin-top: 5px">数据列表span>
  <el-button class="btn-add" @click="add()" style="margin-left: 10px;">添加el-button>
  <el-button class="btn-add" @click="batchRemove()" >批量删除el-button>
el-card>
1
2
3
4
5
6
7

在table组件上添加复选框

<el-table
  :data="list"
  border
  stripe
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"/>
1
2
3
4
5
6
7

7.3实现功能

data定义数据

multipleSelection: []// 批量删除选中的记录列表
1

完善方法

//批量删除
batchRemove(){
    //非空判断
    if(this.multipleSelection.length===0){
            this.$message.warning('请选择要删除的记录！')
            return
    }
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(response=>{
        var idList=[]
        //遍历数组
        for(var i=0;i<this.multipleSelection.length;i++){
            var obj=this.multipleSelection[i]
            var id =obj.id
            // id 放到数组
            idList.push(id)
        }
        //调用接口删除
        teacherApi.batchRemove(idList)
        .then((response) => {
            //提示
            this.$message({
                type:'success',
                message:'删除成功'
            
            });
            //刷新
            this.fetchData()
        })
    })
},


//复选框发生变化，调用方法，选中复选框行所对应的内容
handleSelectionChange(selection){
    this.multipleSelection=selection
    console.log(this.multipleSelection)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41