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 {
//先按照名字,再按照类型
@Resource
IEmpService 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默认是and
qw.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格式的数据接收只能用requestBody
public boolean update(@RequestBody Emp emp){
//try---catch的方式在控制器
// System.out.println(emp);
return empService.updateById(emp);
}
//删除界面,随便取的,是自定义的,但是需要保持一致
@RequestMapping("delete/{empno}")
//json格式的数据接收只能用requestBody
public boolean delete(@PathVariable Integer empno){
//try---catch的方式在控制器
// System.out.println(emp);
System.out.println(empno);
return empService.removeById(empno);
// return true;
}
}4 测试
4.1 条件搜素
4.1.1 条件搜素前
4.1.2 条件搜素后
4.2 全部搜素
4.2.1 全部搜索前(在第3页的位置)
4.2.2 全部搜索后
