投稿
  1. 极客之音首页
  2. 后端漫谈

在线教育项目【老师管理-前端实现】

seven_ • • 后端漫谈 • 阅读 189

导读：本篇文章讲解 在线教育项目【老师管理-前端实现】，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

目录

1，查询所有

1.1：需求

1.2：表格渲染

2，分页列表

2.1：定义请求axios

2.2：分页

2.3：条件         

2.4：条件表单

2.5：测试

3，添加老师

3.1：定义请求axios

3.2：显示添加页面

3.3：实现新增功能

3.4：拓展：关闭选项卡分析

4，修改老师

4.1：定义回显请求axios

4.2：显示修改弹出框

4.3：调用回显请求axios

4.4.：测试回显

4.5：定义修改请求axios

4.6：调用修改请求

4.7：测试修改功能

5，删除功能

5.1：定义删除请求

5.2：调用删除请求

6，批量删除

6.1：后端实现

6.2：定义请求

6.3：前端多选

6.4：调用批量删除请求

6.5：批量删除按钮

1，查询所有

1.1：需求

在线教育项目【老师管理-前端实现】

1.2：表格渲染

<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="teacherList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center" width="80">
      </el-table-column>
      <el-table-column label="头衔" prop="id" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.level == 1 ? '高级讲师' : '首席讲师' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资历" prop="intro" align="center" width="350">
      </el-table-column>
      <el-table-column label="添加时间" width="150px" align="center">
        <template slot-scope="{row}">
          {{row.gmtCreate}}
          <span>{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" width="80px" min-width="50px">
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.isDeleted == 1 ? '已删除' : '未删除' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="updateTeacher(row)">
            修改
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="deleteTeacher(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    {{teacherList}}
  </div>
</template>

<script>
// 导入接口文件，并解构指定的方法
import { findAll } from '@/api/teacher'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      listLoading: true,
      teacherList: []
    }
  },
  methods: {
    async findAllTeacher() {
      this.listLoading = true
      // 调用接口文件中接口到的方法
      let { data } = await findAll()
      this.teacherList = data
      // 恢复状态
      this.listLoading = false
    },
    updateTeacher() {

    },
    deleteTeacher() {

    }

  },
  mounted() {
    // 页面加载成功，查询所有老师
    this.findAllTeacher()
  },
}
</script>

<style>

</style>

2，分页列表

在线教育项目【老师管理-前端实现】

2.1：定义请求axios

  • 在 src/api/teacher.js 中添加

  • // 功能方法
// 条件查询
export function condition(teacherPage, teacherVo) {
  let url = `/teacher-service/teacher/condition/${teacherPage.size}/${teacherPage.current}`
  return axios.post(url ,teacherVo)
}

2.2：分页

<template>
  <div class="app-container">
    <!-- 条件查询 start -->
    <div class="filter-container">
      <el-input v-model="teacherVo.name" placeholder="请输入讲师名" style="width: 150px;" class="filter-item" @keyup.enter.native="conditionFn" />
      <el-select v-model="teacherVo.level" placeholder="请选择头衔" clearable style="width: 120px" class="filter-item">
        <el-option label="高级讲师" value="1" />
        <el-option label="首席讲师" value="2" />
      </el-select>
      <el-date-picker v-model="teacherVo.beginDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"></el-date-picker>
      <el-date-picker v-model="teacherVo.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"></el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="conditionFn">搜索</el-button>
    </div>
    <!-- 条件查询 end -->
    <!-- 列表展示 start -->
    <el-table
      v-loading="listLoading"
      :data="teacherPage.records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80" >
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center" width="150" >
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头衔" prop="level" align="center" width="80" >
        <template slot-scope="{row}">
          <span>{{ row.level == 1 ? '高级讲师': '首席讲师' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资历" prop="intro" align="center" width="250" >
        <template slot-scope="{row}">
          <span>{{ row.intro }}</span>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="gmtCreate" align="center" width="140" >
        <template slot-scope="{row}">
          <span>{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" align="center" width="80" >
        <template slot-scope="{row}">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="isDeleted" align="center" width="80" >
        <template slot-scope="{row}">
          <span>{{ row.isDeleted == 0 ? '未删除' : '已删除' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="openUpdateDialog(row.id)" >修改</el-button>
          <el-button size="mini" type="danger" @click="deleteByIdFn(row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表展示 end -->

    <!-- 分页条 start -->
    <pagination v-show="teacherPage.total>0" 
      :total="teacherPage.total" 
      :page.sync="teacherPage.current" 
      :limit.sync="teacherPage.size" 
      :pageSizes="[1,2,3,5]" 
      @pagination="conditionFn" />
    <!-- 分页条 end -->

    <!-- 修改弹出框start -->
    <el-dialog title="讲师修改" :visible.sync="teacherUpdateDialogFormVisible">
      <!-- 修改表单start -->
      <el-form ref="form" :model="teacher" label-width="80px">
        <el-form-item label="讲师姓名">
          <el-input v-model="teacher.name"></el-input>
        </el-form-item>
        <el-form-item label="讲师头像">
          <el-input v-model="teacher.avatar"></el-input>
        </el-form-item>
        <el-form-item label="头衔">
          <el-select v-model="teacher.level" placeholder="请选择头衔" clearable style="width: 120px">
            <el-option label="高级讲师" value="1" />
            <el-option label="首席讲师" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="teacher.sort"></el-input>
        </el-form-item>
        <el-form-item label="资历">
          <el-input v-model="teacher.intro"></el-input>
        </el-form-item>
        <el-form-item label="讲师简介">
          <el-input type="textarea" v-model="teacher.career"></el-input>
        </el-form-item>
      </el-form>
      <!-- 修改表单end -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="teacherUpdateDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateFn">修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹出框end -->
  </div>
</template>

<script>
// 导入ajax方法
import { condition, findById, update, deleteById } from "@/api/edu/teacher";
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import waves from '@/directive/waves' //导入waves指令 waves directive

export default {
  components: { Pagination },
  directives: { waves },                        //声明指令
  data() {
    return {
      teacherPage: {  
             size: 3,  
        current: 1,                        //分页
    
        total: 0
      },
      teacherVo: {                              //条件

      },
      listLoading: true,                        // 列表加载效果
      teacherUpdateDialogFormVisible: false,    //修改弹出框
      teacher: {},                              //修改表单
    }
  },
  methods: {
    async conditionFn() {
      // 查询开始
      this.listLoading = true
      /*
      let baseResult = await condition( this.teacherPage, this.teacherVo )
      this.teacherPage = baseResult.data
      */
      // 调用ajax -- request.js对响应结果进行二次处理，将获得BaseResult
      let {code,data,message} = await condition( this.teacherPage, this.teacherVo )
      // 保存数据
      this.teacherPage = data

      // 查询结果
      this.listLoading = false
    },
    openUpdateDialog(teacherId) {
      
    },
    async findByIdFn(teacherId) {
      
    },
    async updateFn() {
    
    },
    deleteByIdFn(teacherId) {
    
    }
  },
  mounted() {
    // 调用方法，执行ajax，查询所有
    this.conditionFn()
  },
}
</script>

<style>

</style>

2.3：条件         


    <!-- 分页条 start -->
    <pagination v-show="teacherPage.total>0" 
      :total="teacherPage.total" 
      :page.sync="teacherPage.current" 
      :limit.sync="teacherPage.size" 
      :pageSizes="[1,2,3,5]" 
      @pagination="conditionFn" />
    <!-- 分页条 end -->

2.4：条件表单

    <!-- 条件查询 start -->
    <div class="filter-container">
      <el-input v-model="teacherVo.name" placeholder="请输入讲师名" style="width: 150px;" class="filter-item" @keyup.enter.native="conditionFn" />
      <el-select v-model="teacherVo.level" placeholder="请选择头衔" clearable style="width: 120px" class="filter-item">
        <el-option label="高级讲师" value="1" />
        <el-option label="首席讲师" value="2" />
      </el-select>
      <el-date-picker v-model="teacherVo.beginDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"></el-date-picker>
      <el-date-picker v-model="teacherVo.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"></el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="conditionFn">搜索</el-button>
    </div>
    <!-- 条件查询 end -->

日期格式化： value-format=”yyyy-MM-dd”

2.5：测试

在线教育项目【老师管理-前端实现】

3，添加老师

3.1：定义请求axios

// 添加
export function save(teacher) {
  return axios.post(`/teacher-service/teacher`, teacher)
}

3.2：显示添加页面

编写路由 （已有）

 {
        path: 'teacherAdd',
        component: () => import('@/views/edu/teacher/teacherAdd'),
        name: '添加老师',
        meta: { title: '添加老师' }   //二级菜单名称
      }
<template>
  <el-card class="teacher-add-card">  
    <el-form ref="form" :model="teacher" label-width="80px">
      <el-form-item label="讲师姓名">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师头像">
        <el-input v-model="teacher.avatar"></el-input>
      </el-form-item>
      <el-form-item label="头衔">
        <el-select v-model="teacher.level" placeholder="请选择头衔" clearable style="width: 120px">
          <el-option label="高级讲师" value="1" />
          <el-option label="首席讲师" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="teacher.sort"></el-input>
      </el-form-item>
      <el-form-item label="资历">
        <el-input v-model="teacher.intro"></el-input>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input type="textarea" v-model="teacher.career"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveFn">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// 导入ajax
import { save } from "@/api/edu/teacher";

export default {
  data() {
    return {
      teacher: {},
    }
  },
  methods: {
   
  },  
}
</script>

<style>
  .teacher-add-card{
    width: 500px;
  }
</style>

3.3：实现新增功能

  • 导入 api，并修改 saveTeacher 发送ajax

  • 在线教育项目【老师管理-前端实现】

3.4：拓展：关闭选项卡分析

// 关闭当前选项卡,【注意：必须放在跳转之前】
this.$store.dispatch(‘tagsView/delView’, this.$route)

分析：

//操作vuex的标准写法
this.$store

//执行vuex的action的标准写法
this.$store.dispatch

// 执行模块“tagsView”中，名称为“delView”的action
tagsView/delView

// 参数为当前路由
this.$route

vuex的位置

  • 模块文件的位置

在线教育项目【老师管理-前端实现】 

action的位置  

在线教育项目【老师管理-前端实现】

 

代码出处

在线教育项目【老师管理-前端实现】

 

4，修改老师

4.1：定义回显请求axios

src/api/teacher.js

在线教育项目【老师管理-前端实现】 

 

// 通过id查询详情
export function findById(teacherId) {
  return axios.get(`/teacher-service/teacher/${teacherId}`)
}

4.2：显示修改弹出框

添加弹出框

    <!-- 修改弹出框start -->
    <el-dialog title="讲师修改" :visible.sync="teacherUpdateDialogFormVisible">
      <!-- 修改表单start -->
      <el-form ref="form" :model="teacher" label-width="80px">
        <el-form-item label="讲师姓名">
          <el-input v-model="teacher.name"></el-input>
        </el-form-item>
        <el-form-item label="讲师头像">
          <el-input v-model="teacher.avatar"></el-input>
        </el-form-item>
        <el-form-item label="头衔">
          <el-select v-model="teacher.level" placeholder="请选择头衔" clearable style="width: 120px">
            <el-option label="高级讲师" value="1" />
            <el-option label="首席讲师" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="teacher.sort"></el-input>
        </el-form-item>
        <el-form-item label="资历">
          <el-input v-model="teacher.intro"></el-input>
        </el-form-item>
        <el-form-item label="讲师简介">
          <el-input type="textarea" v-model="teacher.career"></el-input>
        </el-form-item>
      </el-form>
      <!-- 修改表单end -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="teacherUpdateDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateFn">修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹出框end -->

定义两个变量  

teacherUpdateDialogFormVisible: false, //修改弹出框

teacher: {}, //修改表单

4.3：调用回显请求axios

  • 改 src/views/edu/teacher/list.vue

  • 从api解构 findById

 在线教育项目【老师管理-前端实现】

 import { condition, findById, update, deleteById } from “@/api/edu/teacher”;

 在线教育项目【老师管理-前端实现】

    async findByIdFn(teacherId) {
      let {data} = await findById(teacherId)
      // 将查询结果存放teacher进行回显
      this.teacher = data
    },

显示弹出框，并回显表单

 openUpdateDialog(teacherId) {
      // 打开弹出框
      this.teacherUpdateDialogFormVisible = true
      // 调用查询详情
      this.findByIdFn(teacherId)
    },

4.4.：测试回显

在线教育项目【老师管理-前端实现】

 

4.5：定义修改请求axios

// 修改
export function update(teacher) {
  return axios.put(`/teacher-service/teacher`, teacher)
}

4.6：调用修改请求

在线教育项目【老师管理-前端实现】

在线教育项目【老师管理-前端实现】 

 

  async updateFn() {
      // 修改
      let { message } = await update( this.teacher )
      // 提示
      this.$message.success(message)
      // 关闭弹出框
      this.teacherUpdateDialogFormVisible = false
      // 刷新
      this.conditionFn()
    },

 

4.7：测试修改功能

ok

5，删除功能

5.1：定义删除请求

在线教育项目【老师管理-前端实现】

export function deleteById(teacherId) {
  return axios.delete(`/teacher-service/teacher/${teacherId}`)
}

 

5.2：调用删除请求

在线教育项目【老师管理-前端实现】

  deleteByIdFn(teacherId) {
      //询问
      this.$confirm('您确定要删除么？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //成功-- 确定之后，进行删除
        let {message} = await deleteById(teacherId)
        // 提示、刷新
        this.conditionFn()
        this.$message.success(message)
      }).catch((error) => {
        // debugger
        //失败或取消
        this.$message.warning('删除失败或用户已取消')          
      });
    }

 在线教育项目【老师管理-前端实现】

6，批量删除

6.1：后端实现

  /**
     * 批量删除
     * @param ids
     * @return
     */
    @PostMapping("/batchDelete")
    @ApiOperation("进行批量删除")
    public BaseResult batchDelete(@RequestBody List<Integer> ids) {
        // 批量删除
        boolean result = eduTeacherService.removeByIds(ids);
        // 返回
        if(result) {
            return BaseResult.ok("批量删除成功");
        }
        return BaseResult.error("批量删除失败");

    }

在线教育项目【老师管理-前端实现】 

 

6.2：定义请求

// 批量删除
export function deleteBatch( ids ) {
  return axios.post(`/teacher-service/teacher/deleteBatch`, ids )
}

在线教育项目【老师管理-前端实现】 

 

6.3：前端多选

添加多选框

在线教育项目【老师管理-前端实现】

  <el-table-column type="selection" width="55">  </el-table-column>

 添加多选事件

在线教育项目【老师管理-前端实现】

 在线教育项目【老师管理-前端实现】

 

    handleSelectionChange(val) {
      this.multipleSelection = val;
    }

multipleSelection: [] , //多选内容 

6.4：调用批量删除请求

在线教育项目【老师管理-前端实现】

批量删除方法

 deleteTeacherBatch() {
      
      // 校验
      if(this.multipleSelection.length <=0) {
        this.$message.warning('请选择删除项')
        return
      }
      // 确认
      this.$confirm('您确定要删除所选讲师么?', '批量删除提示', {type: 'error'})
      .then(async () => {
        // 从选择内容中过滤所有的id
        this.ids = this.multipleSelection.map(teacher=>teacher.id)
        // 发送ajax
        let { message } = await deleteBatch( this.ids )
        // 提示
        this.$message.success(message)
        // 刷新列表
        this.conditionFn()
      }).catch(() => {
        // 取消
      });
    },

6.5：批量删除按钮

在线教育项目【老师管理-前端实现】

<!– 批量删除 –>

<el-button size=”mini” type=”danger” @click=”deleteTeacherBatch”>批量删除</el-button>

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/120837.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！