Element UI框架学习篇(四)

news2024/11/26 0:29:44

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 回到最初的查询界面,此时值已经变更成了最新的数据

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/336524.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

为什么需要内存对齐

为什么需要内存对齐

内存对齐 为什么需要内存对齐&#xff1f; 平台原因&#xff1a;不是所有的硬件平台都能访问任意内存地址上的任意数据&#xff0c;某些硬件平台只能在某些地址处取某些特定类型的数据&#xff0c;否则抛出硬件异常。为了同一个程序可以在多平台运行&#xff0c;需要内存对齐…
阅读更多...
阻塞式队列-生产者消费者模型

阻塞式队列-生产者消费者模型

1.阻塞队列是什么 阻塞队列是一种特殊的队列. 也遵守 "先进先出" 的原则. 阻塞队列能是一种线程安全的数据结构, 并且具有以下特性: 当队列满的时候, 继续入队列就会阻塞, 直到有其他线程从队列中取走元素.当队列空的时候, 继续出队列也会阻塞, 直到有其他线程往队…
阅读更多...
HLNet代码debug记录

HLNet代码debug记录

昨天跑HLNet的代码&#xff0c;配环境的时候又双叒叕遇到了一些问题&#xff0c;记录一下&#xff1a; 1.error: identifier “AT_CHECK“ is undefined 出现在python setup.py build develop的时候 参照https://blog.csdn.net/sinat_29957455/article/details/113334944 根据报…
阅读更多...
如何在腾讯云服务器上安装Jupyter Notebook示例？

如何在腾讯云服务器上安装Jupyter Notebook示例？

Jupyter简介及服务器端安装 首先&#xff0c;服务器端安装Jupyter。 sudo pip3 install jupyterlab&#xff1a; 启动Jupyter服务 # 设置jupyter web的密码jupyter-notebook password# 创建jupyter工作目录mkdir ~/jupyter_workspace# 启动jupyter (两次ctrlc停止服务)jup…
阅读更多...
图解LeetCode——剑指 Offer 32 - III. 从上到下打印二叉树 III

图解LeetCode——剑指 Offer 32 - III. 从上到下打印二叉树 III

一、题目 请实现一个函数按照之字形顺序打印二叉树&#xff0c;即&#xff1a;第一行按照从左到右的顺序打印&#xff0c;第二层按照从右到左的顺序打印&#xff0c;第三行再按照从左到右的顺序打印&#xff0c;其他行以此类推。 二、示例 2.1> 示例1 提示&#xff1a; …
阅读更多...
【软件测试】资深测试工程师说：你真的能做好bug分析吗？

【软件测试】资深测试工程师说：你真的能做好bug分析吗？

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 bug报告&#xff0c…
阅读更多...
Revive：从间谍软件进化成银行木马

Revive：从间谍软件进化成银行木马

2022 年 6 月&#xff0c;Cleafy 研究人员发现了一个新的安卓银行木马 Revive。之所以选择 Revive 这个名称&#xff0c;是因为恶意软件为防止停止工作启用的一项功能名为 revive。 Revive 属于持续潜伏的那一类恶意软件&#xff0c;因为它是为特定目标开发和定制的。这种类型…
阅读更多...
Python 四种推导式，包含实例演示

Python 四种推导式，包含实例演示

嗨害大家好鸭&#xff01;我是小熊猫~ 这次继续来给大家带来python基础内容~ 源码资料电子书:点击此处跳转文末名片获取 Python 推导式 Python 推导式是一种独特的数据处理方式&#xff0c;可以从一个数据序列构建另一个新的数据序列的结构体。 Python 支持各种数据结构的推…
阅读更多...
关于进行vue-cli过程中的解决错误的问题

关于进行vue-cli过程中的解决错误的问题

好久没发文章了&#xff0c;直到今天终于开始更新了&#xff0c;最近想进军全端&#xff0c;准备学习下vue&#xff0c;但是这东西真的太难了&#xff0c;我用了一天的时间来解决在配置中遇到的问题&#xff01;主要问题&#xff1a;cnpm文件夹和vue-cli文件夹的位置不对并且vu…
阅读更多...
秒杀项目之网关服务限流熔断降级分布式事务

秒杀项目之网关服务限流熔断降级分布式事务

目录一、网关服务限流熔断降级二、Seata--分布式事务2.1 分布式事务基础2.1.1 事务2.1.2 本地事务2.1.3 分布式事务2.1.4 分布式事务场景2.2 分布式事务解决方案2.2.1 全局事务可靠消息服务2.2.2 最大努力通知2.2.3 TCC事事务三、Seata介绍四、 Seata实现分布式事务控制4.1 案例…
阅读更多...
【Android】Binder的理解

【Android】Binder的理解

1.Binder是什么&#xff1f; 对于android而言&#xff0c;是跨进程传输的通道&#xff0c;是封装好的java类&#xff0c;可以直接继承和使用。 从组成、模型来讲&#xff0c;我认为是连接Server层、Client层、ServerManager层的纽带&#xff0c;也是驱动。 2.Binder的基础概…
阅读更多...
RMI攻击Registry的两种方式

RMI攻击Registry的两种方式

概述 RMI(Remote Method Invocation) &#xff1a;远程方法调用 它使客户机上运行的程序可以通过网络实现调用远程服务器上的对象&#xff0c;要实现RMI&#xff0c;客户端和服务端需要共享同一个接口。 基础 Client 和 Regisry 基于 Stub 和 Skeleton 进行通信&#xff0c…
阅读更多...
ContextCapture Master 倾斜摄影测量实景三维建模

ContextCapture Master 倾斜摄影测量实景三维建模

ContextCapture实景建模大师是一套无需人工干预&#xff0c;通过影像自动生成高分辨率的三维模型的软件解决方案。它集合了全球最先进数字影像处理、计算机虚拟现实以及计算机几何图形算法&#xff0c;在易用性、数据兼容性、运算性能、友好的人机交互及自由的硬件配置兼容性等…
阅读更多...
花1分钟配置远程DEBUG，开发效率翻倍，妹子直呼绝绝子

花1分钟配置远程DEBUG，开发效率翻倍，妹子直呼绝绝子

当把一个工程部署到远程服务器后有可能出现意想不到错误&#xff0c;日志打印过多或者过少都影响问题排查的效率&#xff0c;这个时候可以通过远程调试的方式快速定位bug&#xff0c;提升工作效率。本文主要讲解如何使用Idea开发工具进行远程调试&#xff0c;希望对你有帮助。 …
阅读更多...
微信小程序授权登录流程

微信小程序授权登录流程

自我介绍我是IT果果日记&#xff0c;微信公众号请搜索 IT果果日记一个普通的技术宅&#xff0c;定期分享技术文章&#xff0c;欢迎点赞、关注和转发&#xff0c;请多关照。首先&#xff0c;我们要了解什么是微信小程序登录&#xff1f;它的作用是什么&#xff1f;用户登录微信小…
阅读更多...
使用Fetch时，post数据时，后端接收的Content-Type为text/plain

使用Fetch时，post数据时，后端接收的Content-Type为text/plain

在使用 Fetch做一个前端的post请求时&#xff0c;直接从网上抄了一段代码 export async function postData(url, data){const response await fetch(url, {method: POST, // *GET, POST, PUT, DELETE, etc.mode: no-cors, // no-cors, *cors, same-originheaders: { Content-…
阅读更多...
xshell 工具连接不上本地的 Centos 7虚拟机，4种情况，逐个分析

xshell 工具连接不上本地的 Centos 7虚拟机，4种情况，逐个分析

导读 小编之前使用过 VMware workstation 工具搭建 Centos 7 版本的虚拟机集群&#xff0c;各项功能都正常&#xff0c;用完了也就清除了&#xff08;节约本地空间&#xff09;。因为最近学习大数据&#xff0c;需要从新安装虚拟机&#xff0c;结果发现并不如第一次那么顺利。所…
阅读更多...
TDengine时序数据库的简单使用

TDengine时序数据库的简单使用

最近学习了TDengine数据库&#xff0c;因为我们公司有硬件设备&#xff0c;设备按照每分钟&#xff0c;每十分钟&#xff0c;每小时上传数据&#xff0c;存入数据库。而这些数据会经过sql查询&#xff0c;统计返回展示到前端。但时间积累后现在数据达到了百万级数据&#xff0c…
阅读更多...
Qt使用workflow

Qt使用workflow

Qt工程设置 QMAKE_CFLAGS_DEBUG -MTd QMAKE_CXXFLAGS_DEBUG -MTd上述内容必须设置&#xff0c;否则会报错&#xff1a;error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MTd_StaticDebug”不匹配值“MDd_DynamicDebug。 libworkflow.pri的文件内容如下&#xff1a; …
阅读更多...
算法第十五期——动态规划(DP)之各种背包问题

算法第十五期——动态规划(DP)之各种背包问题

目录 0、背包问题分类 1、 0/1背包简化版 【代码】 2、0/ 1背包的方案数 【思路】 【做法】 【代码】 空间优化1&#xff1a;交替滚动 空间优化2&#xff1a;自我滚动 3、完全背包 【思路】 【代码】 4、分组背包 核心代码 5、多重背包 多重背包解题思路1:转化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023