Element UI框架学习篇(六)

1 删除数据

1.1 前台核心函数

1.1.1 elementUI中的消息提示框语法

//①其中type类型和el-button中的type类型是一致的,有info灰色,success绿色,danger红色,warning黄色,primary蓝色
//②message是你所要填写的提示信息
//③建议都用'',因为比双引号打字更快
this.$message({
    type: 'info',
    message: '文本内容'
});

1.1.2 elementUI中的确认框语法

 //confirmButtonText代表确认操作的文本
//cancelButtonText代表取消操作的文本
//type和el-button中的type是一致的,
//个人决定这里用waring或者danger会好些,因为确认框操作都是涉及到数据变更才会触发的,这样会醒目点
this.$confirm('提示信息', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
 }).then(() => {
     //异步提交的地址写在这(axios.post方法写的位置)
 }).catch(() => {
     //取消操作时的逻辑写这里
     this.$message({
         type: 'info',
         message: '取消某操作的提示'
     });          
 });

1.1.3 del方法

 del(t){
         // t指的是当前行对象(点击删除时)
         console.log(t);
         this.$confirm('确定删除员工编号为:'+t.empno+',姓名为'+t.ename+'的员工吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //异步提交的地址写在这
            axios.post("http://127.0.0.1:8080/emp/delete/"+t.empno).
            then(jg=>{
                 if(jg.data==true){
                   //需要再次去查询一次
                   this.find();
                   this.$message({
                     type: 'success',
                     message: '删除成功'
                   });     
                 }else{
                   this.$message({
                     type: 'danger',
                     message: '删除失败'
                   });   
                 }
            })
          }).catch(() => {
            //取消修改时候的处理逻辑写这里
            this.$message({
              type: 'info',
              message: '已取消修改'
            });          
          });
       }

1.1.4 把删除按钮绑定点击事件,并把当前行对象传递过去(因为要告知用户删除的是哪个对象)

  <!-- 需要得到特定行的数据需要把按钮放在template标签里面
具体是通过该标签的slot-scope属性来得到当前行的数据                
-->
<el-button type="danger" @click="del(s.row)">删除</el-button>

1.2 后台核心代码

//删除操作,empno随便取的,是自定义的,但是requestMapping和delete方法中的需要保持一致
@RequestMapping("delete/{empno}")
    public boolean delete(@PathVariable Integer empno){
        return  empService.removeById(empno);
    }

1.3 完整代码

1.3.1 前台部分

a html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ①导入文件: 1.1需要导入el相关样式和vue.js文件 ②需要导入element的js文件③导入异步提交的css文件 -->
    <link rel="stylesheet" href="../elementUI/elementUI.min.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../elementUI/elementUI.min.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <el-form inline :model="empDTO">
          <el-form-item label="按照姓名搜索">
               <!-- 这里一定要写v-model 不然就不能在里面输入值 这个里面的值需要和对象实例中的值保持一致-->
               <el-input v-model="empDTO.name" placeholder="请输入姓名" ></el-input>
          </el-form-item>
          <el-form-item label="按照职位搜索">
            <el-input v-model="empDTO.zhiwei" placeholder="请输入职位"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="find()">搜索</el-button>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="findAll()">全部搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- ②el-table代表表格  el-table-column代表表格中的每一列
          :data需要对应vue实例中的对象数组,lable表示每一列列名,prop是保证能填入每一条数据中对象的字段值 -->
         <el-table :data="emps" :cell-style="{'text-align':'center'}"
         :header-cell-style="{'text-align':'center'}" border >
            <el-table-column label="编号" prop="empno"></el-table-column>
            <el-table-column label="姓名" prop="ename"></el-table-column>
            <el-table-column label="工作" prop="job"></el-table-column>
            <el-table-column label="工资" prop="sal"></el-table-column>
            <el-table-column label="奖金" prop="comm"></el-table-column>
            <el-table-column label="入职日期" prop="hiredate"></el-table-column>
            <el-table-column  label="操作">
              <!-- slot-scope可以用来得到当前行的数据 里面的值自定义
                需要得到特定行需要使用template标签
              -->
              <template slot-scope="s">
                  <el-button type="success" @click="showEmp(s.row.empno)">编辑</el-button>
                  <el-button type="danger" @click="del(s.row)">删除</el-button>
              </template>
           </el-table-column> 
         </el-table>
         <!--layout是用于显示分页插件所要展示的部分 total总页码数 sizes每页条数 prev前箭头
          pager点点点 next后箭头 jumper跳页  -->
         <el-pagination background :total="total" :current-page.sync="current" 
         :page-size.sync="size" @current-change="find()" layout="total,prev, pager, next, jumper">            
         </el-pagination>
         <!-- visible的条件为true就显示,为false就不显示 -->
         <el-dialog title="编辑员工信息界面" :visible.sync="editStatus" center>
            <!-- 如果相对对话框中的表单居中,直接套上一个center标签即可 -->
            <center>
              <el-form :model="emp" inline label-width="80px">
                <el-form-item label="编号">
                     <el-input readonly v-model="emp.empno"></el-input>     
                </el-form-item>
                <el-form-item label="姓名">
                 <el-input v-model="emp.ename"></el-input>     
                </el-form-item>
                <el-form-item label="入职日期">
                 <el-input v-model="emp.hiredate"></el-input>     
                </el-form-item>
                <el-form-item label="职位">
                 <el-input v-model="emp.job"></el-input>     
                </el-form-item>
                <el-form-item label="工资">
                 <el-input v-model="emp.sal"></el-input>     
                </el-form-item>
                <el-form-item label="奖金">
                 <el-input v-model="emp.comm"></el-input>     
                </el-form-item>
                <el-form-item>
                 <el-button type="success" @click="editEmp()">修改</el-button>
                 <el-button type="info" @click="showEmp(emp.empno)">重置</el-button>
                </el-form-item>
              </el-form>
            </center>
         </el-dialog>
    </div>
    <script src="../js/edit.js"></script>
</body>
</html>

b js文件

new Vue({
    el:"#app",
    data:{
       emps:[],
       current:0,//当前页码数
       size:0,//每页显示条数
       total:0,//总条数
       editStatus:false,//editStatus为false时,只是隐藏该标签,实例并没有取消
       emp:{
          empno:null,//员工编号,需要与数据库字段对应
          ename:null,//员工姓名
          hiredate:null,//员工入职日期
          job:null,//员工工作
          sal:null,//员工薪水
          comm:null,//员工奖金
       },
       //empDTO对象,用于传输数据到后台
       empDTO:{
          name:null,
          zhiwei:null,
       }
    },
    mounted(){
      //④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.
      this.find();
    },
    methods:{
       //③创建自定义查询方法,减少冗余,注意:地址里面的find需要加上斜杠
       //因为加上了自定义条件,所以这里需要传入查询对象过去
       find(){
         axios.post("http://127.0.0.1:8080/emp/find/"+this.current,this.empDTO)
         .then(jg=>{
            //jg.data是后台返回的Ipage对象,其中.records才是对应的数据
            console.log(jg.data);
            this.current=jg.data.current;
            this.size=jg.data.size;
            this.total=jg.data.total;
            this.emps=jg.data.records;
         })
       },
       //查询所有方法
       findAll(){
          this.empDTO.name=null,
          this.empDTO.zhiwei=null,
          //设置全部搜素后回到首页
          this.current=1;
          this.find();
       },
       showEmp(empid){
        //带上map集合过去,需要使用{key:value}的形式
         axios.post("http://localhost:8080/emp/findid",{id:empid})
         .then(jg=>{
            this.emp=jg.data;
            this.editStatus=true;
         })
       },
       
       editEmp(){
          this.$confirm('此操作将修改员工信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //第二个参数带{}的是map集合,直接逗号的是后台可以直接接收的 
          axios.post("http://127.0.0.1:8080/emp/update",this.emp).
          then(jg=>{
             if(jg.data==true){
                this.editStatus=false;  
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                // 方法与方法之间使用this.调用
                this.find();
             }else{
                this.$message({
                    type: 'info',
                    message: '修改失败!'
                });   
             }
          })   
        
        }).catch(() => {
          this.showEmp(this.emp.empno);
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
       },
       del(t){
         // t指的是当前行对象(点击删除时)
         // alert("进入了方法没有");
         console.log(t);
         this.$confirm('确定删除员工编号为:'+t.empno+',姓名为'+t.ename+'的员工吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //异步提交的地址写在这
            axios.post("http://127.0.0.1:8080/emp/delete/"+t.empno).
            then(jg=>{
                 if(jg.data==true){
                   //需要再次去查询一次
                   this.find();
                   this.$message({
                     type: 'success',
                     message: '删除成功'
                   });     
                 }else{
                   this.$message({
                     type: 'danger',
                     message: '删除失败'
                   });   
                 }
            })
          }).catch(() => {
            //取消修改时候的处理逻辑写这里
            this.showEmp(this.emp.empno);
            this.$message({
              type: 'info',
              message: '已取消修改'
            });          
          });
       }
    }
})

1.3.2 后台部分

package com.zlz.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zlz.dto.EmpDTO;
import com.zlz.entity.Emp;
import com.zlz.service.IEmpService;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author zlz
 * @since 2023-02-10
 */
@RestController
@RequestMapping("/emp")
//解决跨域
@CrossOrigin
public class EmpController {
    //先按照名字,再按照类型
    @Resource
    IEmpService empService;
//    @RequestMapping("find")
//    public List<Emp> find(){
//        return empService.list();
//    }
    @RequestMapping({"find","find/{page}"})
    //引用数据类型为空
    public IPage<Emp> find(@PathVariable(required = false) Integer page, @RequestBody EmpDTO empDTO){
        //使用mybatis-plus的后端插件
        System.out.println(page+"当前页码");
        System.out.println(empDTO);
        if(page==null) {
            page = 1;
        }
        IPage<Emp> iPage=new Page<>(page,3);
        //带上条件构造器
        QueryWrapper<Emp> qw = new QueryWrapper<>();
        //写的是列名,满足条件就查询,qw默认是and
        qw.like(empDTO.getName()!=null,"ename",empDTO.getName());
        //qw.or().like是或者 单元测试里面测试sql语句
        qw.like(empDTO.getZhiwei()!=null,"job",empDTO.getZhiwei());
        return empService.page(iPage,qw);
    }
    //增删改查用vue的方式也可以,用之前的方式也行
    @RequestMapping("findid")
    //json格式的数据
    public Emp findid(@RequestBody Map<String,Object> map){
        return  empService.getById(map.get("id").toString());
    }
    //修改界面
    @RequestMapping("update")
    //json格式的数据接收只能用requestBody
    public boolean update(@RequestBody Emp emp){
        //try---catch的方式在控制器
//        System.out.println(emp);
        return  empService.updateById(emp);
    }
    //删除操作,empno随便取的,是自定义的,但是requestMapping和delete方法中的需要保持一致
    @RequestMapping("delete/{empno}")
    public boolean delete(@PathVariable Integer empno){
        return  empService.removeById(empno);
    }
}