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 -> {//开启lombokbuilder.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查询的方法

 @ResourceIEmpService 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格式的数据接收只能用requestBodypublic 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 回到最初的查询界面,此时值已经变更成了最新的数据