【谷粒学院】017-前端框架开发过程介绍、添加讲师模块

àì夳堔傛蜴生んèń 2023-10-05 16:20 42阅读 0赞

# **目录** #

一、前端框架开发过程介绍

1、框架使用过程

第一步：添加路由

第二步：点击某个路由，显示对应页面

第三步：在页面中添加内容

二、添加讲师模块

1、在路由src\\router\\index.js中添加路由

2、添加对应vue页面

图示：

代码示例：

3、讲师模块最终效果展示

4、在api文件夹下创建teacher.js文件，封装数据请求

5、前端拿取

--------------------

# 一、前端框架开发过程介绍 #

## 1、框架使用过程 ##

### 第一步：添加路由 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

### 第二步：点击某个路由，显示对应页面 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

### 第三步：在页面中添加内容 ###

编写内容和请求数据的逻辑，其中请求数据进行了封装：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

所封装的内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

# 二、添加讲师模块 #

## 1、在路由src\\router\\index.js中添加路由 ##

import Vue from 'vue'// vue
    import Router from 'vue-router'// 路由
    
    Vue.use(Router)
    
    /* Layout */
    import Layout from '@/layout'
    
    /**
     * Note: sub-menu only appear when route children.length >= 1
     * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
     *
     * hidden: true                   if set true, item will not show in the sidebar(default is false)
     * alwaysShow: true               if set true, will always show the root menu
     *                                if not set alwaysShow, when item has more than one children route,
     *                                it will becomes nested mode, otherwise not show the root menu
     * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
     * name:'router-name'             the name is used by <keep-alive> (must set!!!)
     * meta : {
        roles: ['admin','editor']    control the page roles (you can set multiple roles)
        title: 'title'               the name show in sidebar and breadcrumb (recommend set)
        icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
        breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
        activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
      }
     */
    
    /**
     * constantRoutes
     * a base page that does not have permission requirements
     * all roles can be accessed
     */
    /**
     * 导出模块开始
     */
    /**
     * 路由：
     * 这里的路由分为两种，constantRoutes 和 asyncRoutes：
     * 1、constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面；
     * 2、asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面；
     */
    export const constantRoutes = [// 不需要动态判断权限的路由
      {
        path: '/login', // 登录
        component: () => import('@/views/login/index'),
        hidden: true
      },
    
      {
        path: '/404', // 404
        component: () => import('@/views/404'),
        hidden: true
      },
    
      /**
       * 首页
       */
      {
        path: '/', // 首页
        component: Layout,
        redirect: '/dashboard', // 重定向
        children: [{ // 子地址
          path: 'dashboard', // 路径
          name: 'Dashboard', // 名字
          component: () => import('@/views/dashboard/index'),
          meta: { title: '首页', icon: 'dashboard' }
        }]
      },
      /**
       * 讲师管理模块
       */
      {
        path: '/teacher', // 路径
        component: Layout,
        redirect: '/teacher/add', // 重定向到/example/table
        name: '讲师管理',
        meta: { title: '讲师管理', icon: 'el-icon-s-help' }, // 名字和图标
        children: [
          {
            path: 'add', // 路径是 /example/table
            name: '添加讲师', // 名字
            component: () => import('@/views/teacher/add'), // 指向
            meta: { title: '添加讲师', icon: 'table' } // 基本信息：名字和图标
          },
          {
            path: 'list',
            name: '讲师列表',
            component: () => import('@/views/teacher/list'),
            meta: { title: '讲师列表', icon: 'tree' }
          }
        ]
      },  
      /**
       * Example
       */
      {
        path: '/example', // 路径
        component: Layout,
        redirect: '/example/table', // 重定向到/example/table
        name: 'Example',
        meta: { title: 'Example', icon: 'el-icon-s-help' }, // 名字和图标
        children: [
          {
            path: 'table', // 路径是 /example/table
            name: 'Table', // 名字
            component: () => import('@/views/table/index'), // 指向
            meta: { title: 'Table', icon: 'table' } // 基本信息：名字和图标
          },
          {
            path: 'tree',
            name: 'Tree',
            component: () => import('@/views/tree/index'),
            meta: { title: 'Tree', icon: 'tree' }
          }
        ]
      },
      /**
       * Form
       */
      {
        path: '/form',
        component: Layout,
        children: [
          {
            path: 'index',
            name: 'Form',
            component: () => import('@/views/form/index'),
            meta: { title: 'Form', icon: 'form' }
          }
        ]
      },
      /**
       * Nested
       */
      {
        path: '/nested',
        component: Layout,
        redirect: '/nested/menu1',
        name: 'Nested',
        meta: {
          title: 'Nested',
          icon: 'nested'
        },
        children: [
          {
            path: 'menu1',
            component: () => import('@/views/nested/menu1/index'), // Parent router-view
            name: 'Menu1',
            meta: { title: 'Menu1' },
            children: [
              {
                path: 'menu1-1',
                component: () => import('@/views/nested/menu1/menu1-1'),
                name: 'Menu1-1',
                meta: { title: 'Menu1-1' }
              },
              {
                path: 'menu1-2',
                component: () => import('@/views/nested/menu1/menu1-2'),
                name: 'Menu1-2',
                meta: { title: 'Menu1-2' },
                children: [
                  {
                    path: 'menu1-2-1',
                    component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                    name: 'Menu1-2-1',
                    meta: { title: 'Menu1-2-1' }
                  },
                  {
                    path: 'menu1-2-2',
                    component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                    name: 'Menu1-2-2',
                    meta: { title: 'Menu1-2-2' }
                  }
                ]
              },
              {
                path: 'menu1-3',
                component: () => import('@/views/nested/menu1/menu1-3'),
                name: 'Menu1-3',
                meta: { title: 'Menu1-3' }
              }
            ]
          },
          {
            path: 'menu2',
            component: () => import('@/views/nested/menu2/index'),
            name: 'Menu2',
            meta: { title: 'menu2' }
          }
        ]
      },
      /**
       * External Link
       */
      {
        path: 'external-link',
        component: Layout,
        children: [
          {
            path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
            meta: { title: 'External Link', icon: 'link' }
          }
        ]
      },
    
      // 404 page must be placed at the end !!!
      { path: '*', redirect: '/404', hidden: true }
    ]
    /**
     * 导出模块结束
     */
    
    /**
     * 路由
     */
    const createRouter = () => new Router({
      // mode: 'history', // require service support
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes
    })
    
    /**
     * 路由
     */
    const router = createRouter()
    
    // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
    /**
     * 导出：重置路由
     */
    export function resetRouter() {
      const newRouter = createRouter()
      router.matcher = newRouter.matcher // reset router
    }
    
    /**
     * 导出：路由
     */
    export default router

## 2、添加对应vue页面 ##

### 图示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

### 代码示例： ###

## 3、讲师模块最终效果展示 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

## 4、在api文件夹下创建teacher.js文件，封装数据请求 ##

（仿照table.js写）

import request from '@/utils/request'
    
    export function getList() {
      return request({
        url: '/edu-admin/teacher/list', // 路径
        method: 'get'
      });
    }

## 5、前端拿取 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

到这里，我发现已经有很多内容跟视频里面不一样了，接下来，我打算做重点笔记，不再一步一步做完整笔记了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201223110050611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201223110344129.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201223110753613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201223110931894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201223142848820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201223143006779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201223214303943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70