前端页面开发流程——讲师的查询修改删除功能实现

刺骨的言语ヽ痛彻心扉 2021-07-24 12:12 495阅读 0赞

# 一 前端项目开发流程图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 二 实战 #

## 1 定义路由模块 ##

src/router/index.js

配置讲师管理相关路由

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',
        hidden: true,
        children: [{
          path: 'dashboard',
          component: () => import('@/views/dashboard/index')
        }]
      },
    
      // 讲师管理
      {
        path: '/teacher',
        component: Layout,
        redirect: '/teacher/list',
        name: 'Teacher',
        meta: { title: '讲师管理' },
        children: [
          {
            path: 'list',
            name: 'TeacherList',
            component: () => import('@/views/teacher/list'),
            meta: { title: '讲师列表' }
          },
          {
            path: 'create',
            name: 'TeacherCreate',
            component: () => import('@/views/teacher/form'),
            meta: { title: '添加讲师' }
          },
          {
            path: 'edit/:id',
            name: 'TeacherEdit',
            component: () => import('@/views/teacher/form'),
            meta: { title: '编辑讲师' },
            hidden: true
          }
        ]
      },
    
      { path: '*', redirect: '/404', hidden: true }
    ]

## 2 定义api模块 ##

创建文件 src/api/teacher.js

// @ 符号在build/webpack.base.conf.js 中配置 表示 'src' 路径
    import request from '@/utils/request'
    
    export default{
      // 老师列表
      list() {
        return request({
          url: '/admin/edu/teacher/list',
          method: 'get'
        })
      },
      // 分页老师列表
      pageList(page, limit, searchObj) {
        return request({
          url: `/admin/edu/teacher/list/${page}/${limit}`,
          method: 'get',
          params: searchObj
        })
      },
      // 根据id删除老师
      removeById(id) {
        return request({
          url: `/admin/edu/teacher/remove/${id}`,
          method: 'delete'
        })
      },
      // 保存老师信息
      save(teacher) {
        return request({
          url: '/admin/edu/teacher/save',
          method: 'post',
          data: teacher
        })
      },
      // 根据id查询老师信息
      getById(id) {
        return request({
          url: `/admin/edu/teacher/get/${id}`,
          method: 'get'
        })
      },
      // 更新老师信息
      updateById(teacher) {
        return request({
          url: `/admin/edu/teacher/update`,
          method: 'put',
          data: teacher
        })
      }
    }

## 3 定义页面组件脚本 ##

src/views/teacher/list.vue

## 4 定义页面组件模块 ##

src/views/teacher/list.vue

<template>
      <div class="app-container">
        
        
        <el-form :inline="true">
          <el-form-item>
            
            <el-input v-model="searchObj.name" placeholder="讲师"/>
          </el-form-item>
          <el-form-item>
            
            <el-select v-model="searchObj.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="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-form-item>
            
            <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
            
            <el-button type="default" @click="resetData()">清空</el-button>
          </el-form-item>
        </el-form>
    
    
        
        
        <el-table :data="list" border stripe>
          
          <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 prop="level" label="头衔" >
            
            <template slot-scope="scope">
              <el-tag v-if="scope.row.level === 1" type="success">高级讲师</el-tag>
              <el-tag v-if="scope.row.level === 2" >首席讲师</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">
            <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
                size="mini"
                type="danger"
                @click="removeById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        
        <el-pagination
          :current-page="page"
          :total="total"
          :page-size="limit"
          :page-sizes="[5, 10, 20]"
          style="padding: 30px 0; text-align: center"
          layout="sizes, prev, pager, next, jumper, ->, total"
          @current-change="changeCurrentPage"
          @size-change="changePageSize"/>
      </div>
    </template>

# 三 测试 #

## 1 页面加载流程 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

## 2 页面渲染流程 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/2346ff79aa464ab1b06e8a4e3933a5e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/7382354dfb5747d0bb90fa608f0a5112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/ec94a4b861a34621ae4b879793db50a0.png