Element UI框架学习篇(四)

Element UI框架学习篇(四)

1 准备工作

1.0 创建Emp表并插入相应数据的sql语句

/*MySQL数据库*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for emp
-- ----------------------------
DROP TABLE IF EXISTS `emp`;
CREATE TABLE `emp`  (
  `EMPNO` int NOT NULL AUTO_INCREMENT,
  `ENAME` varchar(10) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `JOB` varchar(9) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `MGR` double NULL DEFAULT NULL,
  `HIREDATE` date NULL DEFAULT NULL,
  `SAL` double NULL DEFAULT NULL,
  `COMM` double NULL DEFAULT NULL,
  `DEPTNO` int NULL DEFAULT NULL,
  PRIMARY KEY (`EMPNO`) USING BTREE,
  INDEX `DEPTNO`(`DEPTNO`) USING BTREE,
  CONSTRAINT `emp_ibfk_1` FOREIGN KEY (`DEPTNO`) REFERENCES `dept` (`DEPTNO`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 8894 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of emp
-- ----------------------------
INSERT INTO `emp` VALUES (7369, '老张23', 'CLERK', 7902, '1980-12-17', 1200, 0, 20);
INSERT INTO `emp` VALUES (7499, 'ALLEN', 'SALESMAN', 7698, '1981-02-20', 1700, 300, 30);
INSERT INTO `emp` VALUES (7521, 'WARD', 'SALESMAN', 7698, '1981-02-22', 1250, 500, 30);
INSERT INTO `emp` VALUES (7566, 'JONES', 'MANAGER', 7839, '1981-04-02', 3975, NULL, 20);
INSERT INTO `emp` VALUES (7654, 'MARTIN', 'SALESMAN', 7698, '1981-09-28', 1250, 1400, 30);
INSERT INTO `emp` VALUES (7698, 'BLAKE', 'MANAGER', 7839, '1981-05-01', 2850, NULL, 30);
INSERT INTO `emp` VALUES (7782, 'CLARK', 'MANAGER', 7839, '1981-06-09', 2450, NULL, 10);
INSERT INTO `emp` VALUES (7788, 'SCOTT', 'ANALYST', 7566, '1987-07-13', 4000, NULL, 20);
INSERT INTO `emp` VALUES (7839, 'KING', 'PRESIDENT', NULL, '1981-11-17', 5000, NULL, 10);
INSERT INTO `emp` VALUES (7844, 'TURNER', 'SALESMAN', 7698, '1981-09-08', 1500, 0, 30);
INSERT INTO `emp` VALUES (7876, 'ADAMS', 'CLERK', 7788, '1987-07-13', 2100, NULL, 20);
INSERT INTO `emp` VALUES (7900, 'JAMES', 'CLERK', 7698, '1981-12-03', 950, NULL, 30);
INSERT INTO `emp` VALUES (7902, 'FORD', 'ANALYST', 7566, '1981-12-03', 4000, NULL, 20);
INSERT INTO `emp` VALUES (8890, '小红', '大合照', 5678, '1975-09-23', 8899, 66, 30);

SET FOREIGN_KEY_CHECKS = 1;

1.1 复制好之前项目中写好的代码生成器类,其内容如下所示

package com.zlz;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.config.rules.DateType;

import java.util.Collections;

public class MyGenerator {
    public static void main(String[] args) {
        //不需要写一个重复的实体类,把模块也覆盖掉 注释掉,一般是只开一次
        FastAutoGenerator.create("jdbc:mysql://127.0.0.1:3305/db0618", "root", "root")
                .globalConfig(builder -> {
                    builder.author("zlz") // 设置作者
                            .dateType(DateType.ONLY_DATE) // 时间策略,日期以什么样子的类型去生成
                            .outputDir("F:\\boot\\boot-shiro2\\src\\main\\java"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.zlz") // 设置父包名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, "F:\\boot\\boot-shiro2\\src\\main\\resources\\mapper")); // 设置mapperXml生成路径,
                    // 注意:这个mapper文件夹是可以不存在的,运行该main方法会自动创建的
                })
                .strategyConfig(builder -> {
                    //开启lombok
                    builder.entityBuilder().enableLombok();
                    //覆盖现有文件,第二次不会覆盖
//                    builder.entityBuilder().fileOverride();
                    builder.addInclude("emp"); // 设置需要生成的表名,想一次性生成多张表,就用逗号隔开,如:addInclude("songs","music")
                })
                .execute();
    }
}

1.2 运行代码生成器会自动生成如下图所示的这些类

1.3 变更Emps类,变更后的内容如下所示

package com.zlz.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.io.Serializable;
import java.util.Date;

import lombok.*;
@AllArgsConstructor
@NoArgsConstructor
@Data
public class Emp implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(value = "EMPNO", type = IdType.AUTO)
    private Integer empno;

    private String ename;

    private String job;

    private Integer mgr;

    private String hiredate;

    private Double sal;

    private Double comm;

    private Integer deptno;
}

1.4 在EmpServiceImpl类上加上@Transactional注解,保证数据库执行出错会回滚

package com.zlz.service.impl;

import com.zlz.entity.Emp;
import com.zlz.mapper.EmpMapper;
import com.zlz.service.IEmpService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@Service
/*业务实现类加该注解*/
@Transactional
public class EmpServiceImpl extends ServiceImpl<EmpMapper, Emp> implements IEmpService {

}

1.5 在EmpController类变更并新增注解

2 在表格中全部展示数据

2.1 在EmpController类上定义查询全部数据的方法(不含分页)

@Resource
IEmpService empService;
@RequestMapping("find")
public List<Emp> find(){
    return empService.list();
}

2.2 创建find01.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-table代表表格  el-table-column代表表格中的每一列
          :data需要对应vue实例中的对象数组,lable表示每一列列名,prop是保证能填入每一条数据中对象的字段值 -->
         <el-table :data="emps">
            <!-- prop属性来对应对象中的键名,需要和实体类中的保持一致-->
            <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="hiredate"></el-table-column>
         </el-table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
               emps:[]
            },
            mounted(){

              //④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.
              this.find();
            },
            methods:{
               //③创建自定义查询方法,减少冗余 
               find(){
                 axios.post("http://127.0.0.1:8080/emp/find")
                 .then(jg=>{
                    //jg.data是后台返回的结果
                    console.log(jg.data);
                    this.emps=jg.data;
                 })
               }
            }
        })
    </script>
</body>
</html>

2.3 运行截图

3 在表格中分页展示数据

3.1 在EmpController类上定义查询全部数据的方法(含分页)

@Resource
IEmpService empService;
@RequestMapping({"find","find/{page}"})
//引用数据类型才会为null,所以需要定义成Integer类型
public IPage<Emp> find(@PathVariable(required = false) Integer page){
    if(page==null) {
        page = 1;
    }
    IPage<Emp> iPage=new Page<>(page,3);
    return empService.page(iPage);
}

3.2 创建find02.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-table代表表格  el-table-column代表表格中的每一列
          :data需要对应vue实例中的对象数组,lable表示每一列列名,prop是保证能填入每一条数据中对象的字段值 -->
         <el-table :data="emps" :cell-style="{'text-align':'center'}"
         :header-cell-style="{'text-align':'center'}">
            <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="hiredate"></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>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
               emps:[],
               current:0,//当前页码数
               size:0,//每页显示条数
               current:0,//总条数
            },
            mounted(){
              //④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.
              this.find();
            },
            methods:{
               //③创建自定义查询方法,减少冗余,注意:地址里面的find需要加上斜杠
               find(){
                 axios.post("http://127.0.0.1:8080/emp/find/"+this.current)
                 .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;
                 })
               }
            }
        })
    </script>
</body>
</html>

3.3 运行截图

3.3.1 初次进入页面时候

3.3.2 点击第三页时,页面显示第三页的数据

3.3.3 在前往页面输入数字5并回车后的界面

4 点击修改, 弹出对话框,然后显示修改的数据信息

4.1 在EmpController类上定义根据id查询的方法

 @Resource
    IEmpService empService;
 @RequestMapping("findid")
    //json格式的数据
    public Emp find(@RequestBody Map<String,Object> map){
        return  empService.getById(map.get("id").toString());
 }

4.2 在el-table标签里面添加编辑按钮

<el-table-column  label="操作">
              <!-- slot-scope可以用来得到当前行的数据 里面的值自定义
                需要得到特定行需要使用template标签
              -->
              <template slot-scope="s">
                  <el-button type="success" @click="editEmp(s.row.empno)">编辑</el-button>
              </template>
</el-table-column> 

4.3 创建el-dialog标签(在分页插件下方)

<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">修改</el-button>
                <el-button type="info">取消</el-button>
            </el-form-item>
        </el-form>
    </center>
</el-dialog>

4.4 在vue的data中创建editStatus这个key,并复制为false

 editStatus:false,

4.5 创建弹出编辑界面并显示信息的方法

 editEmp(empid){
 //带上map集合过去,需要使用{key:value}的形式
     axios.post("http://localhost:8080/emp/findid",{id:empid})
     .then(jg=>{
     this.emp=jg.data;
     this.editStatus=true;
     })
 }

4.6 完整的页面代码如下所示

<!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-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 labels="工资" prop="sal"></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="editEmp(s.row.empno)">编辑</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">修改</el-button>
                 <el-button type="info">取消</el-button>
                </el-form-item>
              </el-form>
            </center>
         </el-dialog>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
               emps:[],
               current:0,//当前页码数
               size:0,//每页显示条数
               total:0,//总条数
               editStatus:false,
               emp:{
                  empno:null,//员工编号,需要与数据库字段对应
                  ename:null,//员工姓名
                  hiredate:null,//员工入职日期
                  job:null,//员工工作
                  sal:null,//员工薪水
                  comm:null,//员工奖金
               }
            },
            mounted(){
              //④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.
              this.find();
            },
            methods:{
               //③创建自定义查询方法,减少冗余,注意:地址里面的find需要加上斜杠
               find(){
                 axios.post("http://127.0.0.1:8080/emp/find/"+this.current)
                 .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;
                 })
               },
               editEmp(empid){
                //带上map集合过去,需要使用{key:value}的形式
                 axios.post("http://localhost:8080/emp/findid",{id:empid})
                 .then(jg=>{
                    this.emp=jg.data;
                    this.editStatus=true;
                 })
               }
            }
        })
    </script>
</body>
</html>

4.7 运行截图

4.7.1 初次进入页面时

4.7.2 点击编辑按钮后

5 真正完成修改(数据库变动且js是采用外部脚本的方式)

5.1 EmpController类上定义修改方法

@Resource
IEmpService empService;
@RequestMapping("update")
    //json格式的数据接收只能用requestBody
    public boolean find(@RequestBody Emp emp){
        return  empService.updateById(emp);
}

5.2 编辑的核心js代码

 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.find();
             }else{
                this.$message({
                    type: 'info',
                    message: '修改失败!'
                });   
             }
          })   
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
}

5.3 编辑界面的重置按钮代码(只需要再重查一次)

 <el-button type="info" @click="showEmp(emp.empno)">重置</el-button>

5.4 完整的编辑界面代码find02.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-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>
              </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>

5.5 完整的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,//员工奖金
       }
    },
    mounted(){
      //④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.
      this.find();
    },
    methods:{
       //③创建自定义查询方法,减少冗余,注意:地址里面的find需要加上斜杠
       find(){
         axios.post("http://127.0.0.1:8080/emp/find/"+this.current)
         .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;
         })
       },
       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: '已取消修改'
          });          
        });
       }
    }
})

5.6 测试

5.6.1 初次点击修改按钮后,进入如下界面

5.6.2 测试重置按钮

a 变更数据后的界面

b 点击重置后的界面

5.6.3 测试修改按钮

a 变更数据并点击修改

b 点击确认修改

c 回到最初的查询界面,此时值已经变更成了最新的数据