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

短命女 2023-10-05 18:21 13阅读 0赞

#### Vue框架使用流程 ####

*  1.添加路由
 *   *  修改讲师模块
 *  2.根据路由查看页面
 *  3.实现页面功能
 *  4.创建页面
 *  5.测试

## 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`

`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.测试 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]  
到这里讲师模块的一个功能就实现了 剩下的是页面的整理部分

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210124200014120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70