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

港控/mmm° 2023-10-01 23:51 9阅读 0赞

**目录**

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：需求 ####

![6f678797048049eda61812721cfe6b61.png][]

#### 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，分页列表 ###

![304f176a527041ce903d61f3b46d86a1.png][]

#### 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">
        
        <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>
        
        
        <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>
        
    
        
        <pagination v-show="teacherPage.total>0" 
          :total="teacherPage.total" 
          :page.sync="teacherPage.current" 
          :limit.sync="teacherPage.size" 
          :pageSizes="[1,2,3,5]" 
          @pagination="conditionFn" />
        
    
        
        <el-dialog title="讲师修改" :visible.sync="teacherUpdateDialogFormVisible">
          
          <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>
          
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherUpdateDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updateFn">修改</el-button>
          </div>
        </el-dialog>
        
      </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：条件 ####

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

#### 2.4：条件表单 ####

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

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

#### 2.5：测试 ####

![73bc7880395c4e959237ae3fedc23d09.png][]

### 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
 *  ![b5f55854248c48289dc569c9036582d6.png][]

#### 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的位置

*  模块文件的位置

![3b1f9f2606cd48f998991bdcd1c70878.png][]

action的位置

![41839c175e19445795ceaac7e43a1acd.png][]

代码出处

![e996f8612dd34d65a894dcd82ff1c002.png][]

### 4，修改老师 ###

#### 4.1：定义回显请求axios ####

src/api/teacher.js

![695b3b2fa82147cfba6eb321e68798a3.png][]

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

#### 4.2：显示修改弹出框 ####

添加弹出框

<el-dialog title="讲师修改" :visible.sync="teacherUpdateDialogFormVisible">
          
          <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>
          
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherUpdateDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updateFn">修改</el-button>
          </div>
        </el-dialog>

定义两个变量

> teacherUpdateDialogFormVisible: false, //修改弹出框
> 
> teacher: \{\}, //修改表单

#### 4.3：调用回显请求axios ####

*  改 src/views/edu/teacher/list.vue
 *  从api解构 findById

![78806d7d074541779cba6ab5dfacbe3b.png][]

> import \{ condition, findById, update, deleteById \} from "@/api/edu/teacher";

![690b79d5a89343c9afd9bcbdfc6d1c1a.png][]

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

显示弹出框，并回显表单

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

#### 4.4.：测试回显 ####

![63a572c85920438da03f1cd0c11a77a0.png][]

#### 4.5：定义修改请求axios ####

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

#### 4.6：调用修改请求 ####

![cd193834ad0b4dc3b31193a5afbd825f.png][]

![1665bb16a1cf4dbb8c7d3150b420beff.png][]

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

#### 4.7：测试修改功能 ####

### 5，删除功能 ###

#### 5.1：定义删除请求 ####

![1371befcb90842f888ed38bcd2d3b502.png][]

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

#### 5.2：调用删除请求 ####

![f1b9251394224aa0850478c5a487da7b.png][]

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('删除失败或用户已取消')          
          });
        }

![1fcc60d03ee04739895440b47c8ebf9a.png][]

### 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("批量删除失败");
    
        }

![fbd2d9df36e642668ae03c5688187848.png][]

#### 6.2：定义请求 ####

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

![77d6661cda2e48c9a808158d0b05237d.png][]

#### 6.3：前端多选 ####

添加多选框

![c2c3754fee6a4aa9a202fb339e335780.png][]

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

添加多选事件

![a23fa38dcb91459296f022ac6f533746.png][]

![df8f978ab2e94b7ca50b9815cf923df8.png][]

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

> multipleSelection: \[\] , //多选内容

#### 6.4：调用批量删除请求 ####

![11445e3f40984d3aa60c6cc13fa542c1.png][]

批量删除方法

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：批量删除按钮 ####

![303c503528c14783bfc0f979efce2ed0.png][]

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

[6f678797048049eda61812721cfe6b61.png]: https://img-blog.csdnimg.cn/6f678797048049eda61812721cfe6b61.png
[304f176a527041ce903d61f3b46d86a1.png]: https://img-blog.csdnimg.cn/304f176a527041ce903d61f3b46d86a1.png
[73bc7880395c4e959237ae3fedc23d09.png]: https://img-blog.csdnimg.cn/73bc7880395c4e959237ae3fedc23d09.png
[b5f55854248c48289dc569c9036582d6.png]: https://img-blog.csdnimg.cn/b5f55854248c48289dc569c9036582d6.png
[3b1f9f2606cd48f998991bdcd1c70878.png]: https://img-blog.csdnimg.cn/3b1f9f2606cd48f998991bdcd1c70878.png
[41839c175e19445795ceaac7e43a1acd.png]: https://img-blog.csdnimg.cn/41839c175e19445795ceaac7e43a1acd.png
[e996f8612dd34d65a894dcd82ff1c002.png]: https://img-blog.csdnimg.cn/e996f8612dd34d65a894dcd82ff1c002.png
[695b3b2fa82147cfba6eb321e68798a3.png]: https://img-blog.csdnimg.cn/695b3b2fa82147cfba6eb321e68798a3.png
[78806d7d074541779cba6ab5dfacbe3b.png]: https://img-blog.csdnimg.cn/78806d7d074541779cba6ab5dfacbe3b.png
[690b79d5a89343c9afd9bcbdfc6d1c1a.png]: https://img-blog.csdnimg.cn/690b79d5a89343c9afd9bcbdfc6d1c1a.png
[63a572c85920438da03f1cd0c11a77a0.png]: https://img-blog.csdnimg.cn/63a572c85920438da03f1cd0c11a77a0.png
[cd193834ad0b4dc3b31193a5afbd825f.png]: https://img-blog.csdnimg.cn/cd193834ad0b4dc3b31193a5afbd825f.png
[1665bb16a1cf4dbb8c7d3150b420beff.png]: https://img-blog.csdnimg.cn/1665bb16a1cf4dbb8c7d3150b420beff.png
[1371befcb90842f888ed38bcd2d3b502.png]: https://img-blog.csdnimg.cn/1371befcb90842f888ed38bcd2d3b502.png
[f1b9251394224aa0850478c5a487da7b.png]: https://img-blog.csdnimg.cn/f1b9251394224aa0850478c5a487da7b.png
[1fcc60d03ee04739895440b47c8ebf9a.png]: https://img-blog.csdnimg.cn/1fcc60d03ee04739895440b47c8ebf9a.png
[fbd2d9df36e642668ae03c5688187848.png]: https://img-blog.csdnimg.cn/fbd2d9df36e642668ae03c5688187848.png
[77d6661cda2e48c9a808158d0b05237d.png]: https://img-blog.csdnimg.cn/77d6661cda2e48c9a808158d0b05237d.png
[c2c3754fee6a4aa9a202fb339e335780.png]: https://img-blog.csdnimg.cn/c2c3754fee6a4aa9a202fb339e335780.png
[a23fa38dcb91459296f022ac6f533746.png]: https://img-blog.csdnimg.cn/a23fa38dcb91459296f022ac6f533746.png
[df8f978ab2e94b7ca50b9815cf923df8.png]: https://img-blog.csdnimg.cn/df8f978ab2e94b7ca50b9815cf923df8.png
[11445e3f40984d3aa60c6cc13fa542c1.png]: https://img-blog.csdnimg.cn/11445e3f40984d3aa60c6cc13fa542c1.png
[303c503528c14783bfc0f979efce2ed0.png]: https://img-blog.csdnimg.cn/303c503528c14783bfc0f979efce2ed0.png