Element UI框架学习篇(七)

1 新增员工

1.1 前台部分

1.1.1 在vue实例的data里面准备好需要的对象以及属性

addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示depts:[],//部门信息mgrs:[],//上级领导信息jobs:[],//工作岗位信息//新增用户所需要的对象newEmp:{ename:null,//员工姓名hiredate:null,//员工入职日期job:null,//员工工作sal:null,//员工薪水comm:null,//员工奖金mgr:null,//上级领导编号deptno:null,//部门编号},

1.1.2 在el-table上方写下如下代码

 新增员工

1.1.3 新增用户的弹窗界面

                        
新增重置

1.1.4 进入添加界面的方法addView

 addView(){axios.post("http://127.0.0.1:8080/dept/find").then(jg=>{this.depts=jg.data;console.log(this.depts);})axios.post("http://127.0.0.1:8080/emp/findAllMgrs").then(jg=>{console.log("上级领导信息");console.log(jg.data);this.mgrs=jg.data;})axios.post("http://localhost:8080/emp/findAllJobs").then(jg=>{this.jobs=jg.data;})this.addStatus=true;},

1.1.5 新增方法addEmp

 addEmp(){axios.post("http://127.0.0.1:8080/emp/add",this.newEmp).then(jg=>{if(jg.data==true){this.find();//新增员工后需要重新执行查询方法this.addStatus=false;//添加成功,就关闭弹窗this.$message({type: 'success',message: '新增员工成功!'});}else{this.$message({type:"info",mesaage:"新增员工失败"})}})},

1.1.4 把新增员工按钮绑定addView方法

   新增员工

1.1.5 把添加员工弹窗中的新增按钮绑定addEmp方法

新增

1.1.6 完整的前台代码

a 网页文件addEmp.html

搜索全部搜索新增员工                                           修改重置                       
新增重置

b js文件

var v=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,},addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示depts:[],//部门信息mgrs:[],//上级领导信息jobs:[],//工作岗位信息//新增用户所需要的对象newEmp:{ename:null,//员工姓名hiredate:null,//员工入职日期job:null,//员工工作sal:null,//员工薪水comm:null,//员工奖金mgr:null,//上级领导编号deptno: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: '已取消修改'});          });},addView(){axios.post("http://127.0.0.1:8080/dept/find").then(jg=>{this.depts=jg.data;console.log(this.depts);})axios.post("http://127.0.0.1:8080/emp/findAllMgrs").then(jg=>{console.log("上级领导信息");console.log(jg.data);this.mgrs=jg.data;})axios.post("http://localhost:8080/emp/findAllJobs").then(jg=>{this.jobs=jg.data;})this.addStatus=true;},addEmp(){axios.post("http://127.0.0.1:8080/emp/add",this.newEmp).then(jg=>{if(jg.data==true){this.find();//新增员工后需要重新执行查询方法this.addStatus=false;//添加成功,就关闭弹窗this.$message({type: 'success',message: '新增员工成功!'});}else{this.$message({type:"info",mesaage:"新增员工失败"})}})},}
})

1.2 后台核心代码

1.2.1 配置自定义查询方法findAllMgr

a 在EmpMapper.xml文件写入如下代码

 SELECT distinct e2.ename,e2.empnoFROM Emp e1INNER JOIN Emp e2ON e1.mgr=e2.empno

b 在EmpMapper接口中写入如下代码

List findAllMgr();

c 在IEmpService接口中写入如下代码

 List findAllMgr();

d 在EmpServiceImpl类中写入如下代码

 @AutowiredEmpMapper empMapper;@Overridepublic List findAllMgr() {return empMapper.findAllMgr();}

1.2.2 新增页面中数据的展示的核心代码

a 查询所有工作(职位)

//查询所有职位@RequestMapping("findAllJobs")public List findAllJobs(){QueryWrapper qw = new QueryWrapper<>();//查询去重的指定列的信息//ne是不等于的条件qw.select("distinct job").ne("job","president");return empService.list(qw);}

b 查询所有领导信息

//查询所有上级领导
@RequestMapping("findAllMgrs")
public List findAllMgrs(){return empService.findAllMgr();
}

c 查询所有部门

@Autowired
IDeptService deptService;
@RequestMapping("find")
public List find(){return deptService.list();
}

1.2.3 新增方法

 //增加界面@RequestMapping("add")public boolean add(@RequestBody Emp emp){empService.save(emp);return true;}

1.2.4 完整的后台代码

a EmpController类

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;
@RestController
@RequestMapping("/emp")
//解决跨域
@CrossOrigin
public class EmpController {//先按照名字,再按照类型@ResourceIEmpService empService;
//    @RequestMapping("find")
//    public List find(){
//        return empService.list();
//    }@RequestMapping({"find","find/{page}"})//引用数据类型为空public IPage 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 iPage=new Page<>(page,3);//带上条件构造器QueryWrapper qw = new QueryWrapper<>();//写的是列名,满足条件就查询,qw默认是andqw.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 map){return  empService.getById(map.get("id").toString());}//修改界面@RequestMapping("update")//json格式的数据接收只能用requestBodypublic boolean update(@RequestBody Emp emp){//try---catch的方式在控制器
//        System.out.println(emp);return  empService.updateById(emp);}//删除界面,随便取的,是自定义的,但是需要保持一致@RequestMapping("delete/{empno}")
//json格式的数据接收只能用requestBodypublic boolean delete(@PathVariable Integer empno){//try---catch的方式在控制器
//        System.out.println(emp);
//        System.out.println(empno);return  empService.removeById(empno);
//        return true;}//增加界面@RequestMapping("add")public boolean add(@RequestBody Emp emp){empService.save(emp);
//        System.out.println(emp);return true;}//查询所有上级领导@RequestMapping("findAllMgrs")public List findAllMgrs(){return empService.findAllMgr();}//查询所有职位@RequestMapping("findAllJobs")public List findAllJobs(){QueryWrapper qw = new QueryWrapper<>();//查询去重的指定列的信息//ne是不等于的条件qw.select("distinct job").ne("job","president");return empService.list(qw);}
}

b DeptController类

package com.zlz.controller;import com.zlz.entity.Dept;
import com.zlz.service.IDeptService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;import java.util.List;
@RestController
@RequestMapping("/dept")
@CrossOrigin
public class DeptController {@AutowiredIDeptService deptService;@RequestMapping("find")public List find(){return deptService.list();}
}

1.4 测试

1.4.1 进入初始页面,点击新增员工按钮(点击完后有重置和新增两个按钮)

1.4.2 重置按钮测试

a 点击重置按钮前

b 点击重置按钮后

1.4.3 新增按钮测试

a 界面部分

a.1 新增前的界面

a.2 新增后的界面

a.3 点击到最后一页,发现刚刚增加那条数据能被正常显示

b 数据库部分

b.1 新增前

b.2 新增后