当前位置：首页 > news >正文

Element UI框架学习篇(五)

news 2025/6/28 4:45:39

Element UI框架学习篇(五)

1 准备工作

1.1 在zlz包下创建数据传输对象类EmpDTO

package com.zlz.dto;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;//根据前台来的
@Data
public class EmpDTO {private String name;private String zhiwei;
}

1.2 在vue实例中的data里面创建empDTO对象(前台传输数据给后台要用)

 empDTO:{name:null,zhiwei:null,
}

1.3 在页面中加入搜索框的代码如下(需要绑定empDTO对象才行)

<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">搜索</el-button></el-form-item><el-form-item ><el-button type="primary">全部搜索</el-button></el-form-item>
</el-form>

2 按照条件查询(多重)

2.1 前台核心函数

2.1.1 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;})
},

2.1.2 把搜索按钮绑定点击事件,执行find()方法

 <el-button type="primary" @click="find()">搜索</el-button>

2.2 后台核心代码

QueryWrapper<Emp> qw = new QueryWrapper<>();
//第二个参数写的是数据中的列名,第一个参数值为true,就带上ename这个条件,为false就不带上
//条件构造器多个like默认是用and进行拼接,就是所有条件均要满足,若只想其中之一,可以qw.or().like(条件2)
qw.like(empDTO.getName()!=null,"ename",empDTO.getName());
qw.like(empDTO.getZhiwei()!=null,"job",empDTO.getZhiwei());
return empService.page(iPage,qw);

3 全部搜索

3.1 前台核心代码

3.1.1 查询全部方法findAll()

//查询所有方法(把名称和职位都设置为null后再去调用find方法)
findAll(){this.empDTO.name=null,this.empDTO.zhiwei=null,//查询全部时默认显示首页this.current=1;this.find();
},

3.1.2 设置全部搜索按钮点击时执行findAll方法

  <el-button type="primary" @click="findAll()">全部搜索</el-button>

3.2 后台核心代码

QueryWrapper<Emp> qw = new QueryWrapper<>();
qw.like(empDTO.getName()!=null,"ename",empDTO.getName());
qw.like(empDTO.getZhiwei()!=null,"job",empDTO.getZhiwei());

3.3 完整的代码

3.3.1 前端部分

a 网页文件

<!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></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: '已取消修改'});          });}}
})

3.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 {//先按照名字,再按照类型@ResourceIEmpService 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默认是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<String,Object> 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;}
}