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

    目录

    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：表格渲染

    1. <template>
    2.   <div>
    3.     <el-table
    4.       v-loading="listLoading"
    5.       :data="teacherList"
    6.       border
    7.       fit
    8.       highlight-current-row
    9.       style="width: 100%;"
    10.     >
    11.       <el-table-column label="ID" prop="id" align="center" width="80">
    12.         <template slot-scope="{row}">
    13.           <span>{{ row.id }}span>
    14.         template>
    15.       el-table-column>
    16.       <el-table-column label="姓名" prop="name" align="center" width="80">
    17.       el-table-column>
    18.       <el-table-column label="头衔" prop="id" align="center" width="120">
    19.         <template slot-scope="{row}">
    20.           <span>{{ row.level == 1 ? '高级讲师' : '首席讲师' }}span>
    21.         template>
    22.       el-table-column>
    23.       <el-table-column label="资历" prop="intro" align="center" width="350">
    24.       el-table-column>
    25.       <el-table-column label="添加时间" width="150px" align="center">
    26.         <template slot-scope="{row}">
    27.           {{row.gmtCreate}}
    28.           <span>{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}span>
    29.         template>
    30.       el-table-column>
    31.       <el-table-column label="排序" prop="sort" width="80px" min-width="50px">
    32.       el-table-column>
    33.       <el-table-column label="状态" width="100px" align="center">
    34.         <template slot-scope="{row}">
    35.           <span>{{ row.isDeleted == 1 ? '已删除' : '未删除' }}span>
    36.         template>
    37.       el-table-column>
    38.       <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
    39.         <template slot-scope="{row,$index}">
    40.           <el-button type="primary" size="mini" @click="updateTeacher(row)">
    41.             修改
    42.           el-button>
    43.           <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="deleteTeacher(row,$index)">
    44.             删除
    45.           el-button>
    46.         template>
    47.       el-table-column>
    48.     el-table>
    49.     {{teacherList}}
    50.   div>
    51. template>
    52.  
    53. <script>
    54. // 导入接口文件，并解构指定的方法
    55. import { findAll } from '@/api/teacher'
    56. import { parseTime } from '@/utils'
    57.  
    58. export default {
    59.   data() {
    60.     return {
    61.       listLoading: true,
    62.       teacherList: []
    63.     }
    64.   },
    65.   methods: {
    66.     async findAllTeacher() {
    67.       this.listLoading = true
    68.       // 调用接口文件中接口到的方法
    69.       let { data } = await findAll()
    70.       this.teacherList = data
    71.       // 恢复状态
    72.       this.listLoading = false
    73.     },
    74.     updateTeacher() {
    75.  
    76.     },
    77.     deleteTeacher() {
    78.  
    79.     }
    80.  
    81.   },
    82.   mounted() {
    83.     // 页面加载成功，查询所有老师
    84.     this.findAllTeacher()
    85.   },
    86. }
    87. script>
    88.  
    89. <style>
    90.  
    91. style>

    2，分页列表

    2.1：定义请求axios

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

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

    2.2：分页

    2.  
    3. <script>
    4. // 导入ajax方法
    5. import { condition, findById, update, deleteById } from "@/api/edu/teacher";
    6. import Pagination from '@/components/Pagination' // secondary package based on el-pagination
    7. import waves from '@/directive/waves' //导入waves指令 waves directive
    8.  
    9. export default {
    10.   components: { Pagination },
    11.   directives: { waves },                        //声明指令
    12.   data() {
    13.     return {
    14.       teacherPage: {  
    15.              size: 3,  
    16.         current: 1,                        //分页
    17.     
    18.         total: 0
    19.       },
    20.       teacherVo: {                              //条件
    21.  
    22.       },
    23.       listLoading: true,                        // 列表加载效果
    24.       teacherUpdateDialogFormVisible: false,    //修改弹出框
    25.       teacher: {},                              //修改表单
    26.     }
    27.   },
    28.   methods: {
    29.     async conditionFn() {
    30.       // 查询开始
    31.       this.listLoading = true
    32.       /*
    33.       let baseResult = await condition( this.teacherPage, this.teacherVo )
    34.       this.teacherPage = baseResult.data
    35.       */
    36.       // 调用ajax -- request.js对响应结果进行二次处理，将获得BaseResult
    37.       let {code,data,message} = await condition( this.teacherPage, this.teacherVo )
    38.       // 保存数据
    39.       this.teacherPage = data
    40.  
    41.       // 查询结果
    42.       this.listLoading = false
    43.     },
    44.     openUpdateDialog(teacherId) {
    45.       
    46.     },
    47.     async findByIdFn(teacherId) {
    48.       
    49.     },
    50.     async updateFn() {
    51.     
    52.     },
    53.     deleteByIdFn(teacherId) {
    54.     
    55.     }
    56.   },
    57.   mounted() {
    58.     // 调用方法，执行ajax，查询所有
    59.     this.conditionFn()
    60.   },
    61. }
    62. script>
    63.  
    64. <style>
    65.  
    66. style>

    2.3：条件         

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

    2.4：条件表单

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

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

    2.5：测试

    3，添加老师

    3.1：定义请求axios

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

    3.2：显示添加页面

    编写路由 （已有）

    1.  {
    2.         path: 'teacherAdd',
    3.         component: () => import('@/views/edu/teacher/teacherAdd'),
    4.         name: '添加老师',
    5.         meta: { title: '添加老师' }   //二级菜单名称
    6.       }
    2.  
    3. <script>
    4. // 导入ajax
    5. import { save } from "@/api/edu/teacher";
    6.  
    7. export default {
    8.   data() {
    9.     return {
    10.       teacher: {},
    11.     }
    12.   },
    13.   methods: {
    14.    
    15.   },  
    16. }
    17. script>
    18.  
    19. <style>
    20.   .teacher-add-card{
    21.     width: 500px;
    22.   }
    23. style>

    3.3：实现新增功能

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

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

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

    分析：

    1. //操作vuex的标准写法
    2. this.$store
    3.  
    4. //执行vuex的action的标准写法
    5. this.$store.dispatch
    6.  
    7. // 执行模块“tagsView”中，名称为“delView”的action
    8. tagsView/delView
    9.  
    10. // 参数为当前路由
    11. this.$route

    vuex的位置

    • 模块文件的位置

     

    action的位置  

     

    代码出处

     

    4，修改老师

    4.1：定义回显请求axios

    src/api/teacher.js

     

     

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

    4.2：显示修改弹出框

    添加弹出框

    1.     
    2.     <el-dialog title="讲师修改" :visible.sync="teacherUpdateDialogFormVisible">
    3.       
    4.       <el-form ref="form" :model="teacher" label-width="80px">
    5.         <el-form-item label="讲师姓名">
    6.           <el-input v-model="teacher.name">el-input>
    7.         el-form-item>
    8.         <el-form-item label="讲师头像">
    9.           <el-input v-model="teacher.avatar">el-input>
    10.         el-form-item>
    11.         <el-form-item label="头衔">
    12.           <el-select v-model="teacher.level" placeholder="请选择头衔" clearable style="width: 120px">
    13.             <el-option label="高级讲师" value="1" />
    14.             <el-option label="首席讲师" value="2" />
    15.           el-select>
    16.         el-form-item>
    17.         <el-form-item label="排序">
    18.           <el-input v-model="teacher.sort">el-input>
    19.         el-form-item>
    20.         <el-form-item label="资历">
    21.           <el-input v-model="teacher.intro">el-input>
    22.         el-form-item>
    23.         <el-form-item label="讲师简介">
    24.           <el-input type="textarea" v-model="teacher.career">el-input>
    25.         el-form-item>
    26.       el-form>
    27.       
    28.       <div slot="footer" class="dialog-footer">
    29.         <el-button @click="teacherUpdateDialogFormVisible = false">取消el-button>
    30.         <el-button type="primary" @click="updateFn">修改el-button>
    31.       div>
    32.     el-dialog>
    33.

    定义两个变量  

    teacherUpdateDialogFormVisible: false, //修改弹出框

    teacher: {}, //修改表单

    4.3：调用回显请求axios

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

    • 从api解构 findById

     

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

     

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

    显示弹出框，并回显表单

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

    4.4.：测试回显

     

    4.5：定义修改请求axios

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

    4.6：调用修改请求

     

     

    1.   async updateFn() {
    2.       // 修改
    3.       let { message } = await update( this.teacher )
    4.       // 提示
    5.       this.$message.success(message)
    6.       // 关闭弹出框
    7.       this.teacherUpdateDialogFormVisible = false
    8.       // 刷新
    9.       this.conditionFn()
    10.     },

     

    4.7：测试修改功能

    ok

    5，删除功能

    5.1：定义删除请求

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

     

    5.2：调用删除请求

    1.   deleteByIdFn(teacherId) {
    2.       //询问
    3.       this.$confirm('您确定要删除么？', '删除提示', {
    4.         confirmButtonText: '确定',
    5.         cancelButtonText: '取消',
    6.         type: 'warning'
    7.       }).then(async () => {
    8.         //成功-- 确定之后，进行删除
    9.         let {message} = await deleteById(teacherId)
    10.         // 提示、刷新
    11.         this.conditionFn()
    12.         this.$message.success(message)
    13.       }).catch((error) => {
    14.         // debugger
    15.         //失败或取消
    16.         this.$message.warning('删除失败或用户已取消')          
    17.       });
    18.     }

     

    6，批量删除

    6.1：后端实现

    1.   /**
    2.      * 批量删除
    3.      * @param ids
    4.      * @return
    5.      */
    6.     @PostMapping("/batchDelete")
    7.     @ApiOperation("进行批量删除")
    8.     public BaseResult batchDelete(@RequestBody List ids) {
    9.         // 批量删除
    10.         boolean result = eduTeacherService.removeByIds(ids);
    11.         // 返回
    12.         if(result) {
    13.             return BaseResult.ok("批量删除成功");
    14.         }
    15.         return BaseResult.error("批量删除失败");
    16.  
    17.     }

     

     

    6.2：定义请求

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

     

     

    6.3：前端多选

    添加多选框

      "selection" width="55">

     添加多选事件

     

     

    1.     handleSelectionChange(val) {
    2.       this.multipleSelection = val;
    3.     }

    multipleSelection: [] , //多选内容 

    6.4：调用批量删除请求

    批量删除方法

    1.  deleteTeacherBatch() {
    2.       
    3.       // 校验
    4.       if(this.multipleSelection.length <=0) {
    5.         this.$message.warning('请选择删除项')
    6.         return
    7.       }
    8.       // 确认
    9.       this.$confirm('您确定要删除所选讲师么?', '批量删除提示', {type: 'error'})
    10.       .then(async () => {
    11.         // 从选择内容中过滤所有的id
    12.         this.ids = this.multipleSelection.map(teacher=>teacher.id)
    13.         // 发送ajax
    14.         let { message } = await deleteBatch( this.ids )
    15.         // 提示
    16.         this.$message.success(message)
    17.         // 刷新列表
    18.         this.conditionFn()
    19.       }).catch(() => {
    20.         // 取消
    21.       });
    22.     },

    6.5：批量删除按钮

    批量删除

     

  • 相关阅读:
    基于flowable的upp(统一流程平台)运行性能优化（2）
    spring boot是如何加载Tomcat的
    玩法专利获批，发布4年《Beat Saber》为何持续火爆
    万里路，咫尺间：汽车与芯片的智能之遇
    一文搞懂Zookeeper原理
    网络安全（黑客）自学
    Sentinel学习（2）——sentinel的使用，引入依赖和配置 & 对消费者进行流控 & 对生产者进行熔断降级
    卡片翻转效果的实现思路
    华为 2024 届实习校园招聘-硬件通⽤/单板开发——第八套
    【译】命名变得简单：AI 支持的重命名建议
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126695325