Element UI框架学习篇(五)

最新推荐文章于 2024-06-25 10:30:55 发布

SSS4362

最新推荐文章于 2024-06-25 10:30:55 发布

阅读量1k

点赞数 3

分类专栏： ElementUI学习篇文章标签： elementui Vue2 条件搜索全部搜索

本文链接：https://blog.csdn.net/SSS4362/article/details/128988348

版权

ElementUI学习篇专栏收录该内容

7 篇文章 7 订阅

订阅专栏

本文介绍了如何使用ElementUI框架在Vue项目中实现数据的条件搜索和全量搜索功能。涉及前端的数据绑定、事件处理以及axios进行前后端交互，同时展示了后台使用QueryWrapper进行条件构造查询。

摘要由CSDN通过智能技术生成

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;
    }
}