教育项目--前端--讲师模块【23】

1.添加路由

将框架包中的\vue-admin-1010\src\router\index.js文件中的

 {
   // 最终路径
    path: '/teacher',
    //  页面布局
    component: Layout,
    //  重定向
    redirect: '/teacher/table',
    //  模块内容
    name: '讲师管理',
    //  标题  图标
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        //  子模块的路径
        path: 'list',
        //  子模块的名称
        name: '讲师列表',
        //  @/==>./
        component: () => import('@/views/table/index'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/tree/index'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

这个内容就是前端进行接口调用的路由，我们只需要进行修改就好了

修改讲师模块

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

2.根据路由查看页面

component: () => import('@/views/table/index'),对应的页面路径是vue-admin-1010\src\views\tree\index.vue

3.实现页面功能

首先在vue-admin-1010\src\api这个包下进行创建业务上的edu\teacher\teacher.js文件

import request from '@/utils/request'



export default {

    // 1.讲师列表（条件查询分页）
    pageQuery(page, limit, eduTeacherVO) {
        return request({

            // url: '/eduService/edu-teacher/PaginationCondition /' + page + '/' + limit,

            url: `/eduService/edu-teacher/PaginationCondition / ${page} / ${limit}`,

            method: 'post',
            //eduTeacherVO条件对象，后端使用requestBody获取数据
            //data表示将对象转换为json格式进行传递到接口中
            data: eduTeacherVO
        })
    }
}

4.创建页面

vue-admin-1010\src\views在这个包下进行创建页面，引入刚刚写好的js文件调用方法实现功能

创建vue-admin-1010\src\views\edu\teacher包
save.vue

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

list.vue

<template>
  <div class="app-container">讲师列表</div>
</template>
<script>
//  引入调用teacher.js文件
import teacher from '@/api/edu/teacher/teacher.js'

export default {
  //    写核心代码位置
  //    定义变量和初始值
  data() {
    return {
      list: null,
      total: 0,
      page: 1,
      limit: 5,
      eduTeacherVO: {}
    }
  },
  //   页面渲染之前执行，一般是调用method定义的方法
  created() {
    this.getList()
  },
  //    创建具体的方法，调用的是编写好的js文件的方法
  method: {
    //  讲师列表的方法
    getList() {
      teacher
        .pageQuery(this.page, this.limit, this.eduTeacherVO)
        .then((response) => {
          //    请求成功
          //    response返回的数据
          console.log(response)
        })
        .catch((error) => {
          //    请求失败
          console.log(error)
        })
    }
  }
}
</script>

5.测试

到这里讲师模块的一个功能就实现了 剩下的是页面的整理部分

大家可以之后到我的资源中去下载资源包好了