目录

vue+springboot练手demo（一）——环境搭建
vue+springboot练手demo（二）——查询功能的实现
vue+springboot练手demo（三）——删除功能的实现
vue+springboot练手demo（四）——新增和修改功能的实现
vue+springboot练手demo（五）——校验功能
vue+springboot练手demo（六）——Swagger、Druid监控和日志
vue+springboot练手demo（七）——Excel导出和导入

查询功能实现

分页查询所有员工，由于后面可能要做通过姓名查询员工，因此在这里就合在一起写了，如果后续还需要其他条件查询再酌情修改。
如果传入的参数为空则为查询所有，传入的参数不为空则为按照姓名查询

查询所有模块的开发

后端模块

编写entity层

这里省略了get、set、tostring和构造方法
emps

public class Emps implements Serializable {
    private static final long serialVersionUID = 212078195923992566L;
    
    private Integer eId;
    
    private String eName;
    
    private String eEmail;
    
    private String eSex;
    
    private String ePhone;
    
    private String eDate;

    private Integer did;

    //用于存放部门信息
    private List<Dept> deptList;
}

dept

public class Dept implements Serializable {
    private static final long serialVersionUID = 452916569548814029L;
    
    private Integer dId;
    
    private String dName;
}

编写dao层

@Mapper
public interface EmpsDao {
    /**
     * 分页查询
     */
    List<Emps> GetAllEmps(String name);
}

编写sql语句

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.feng.employees.dao.EmpsDao">
    <resultMap id="EmpsWithDepts" type="com.feng.employees.entity.Emps">
        <id property="eId" column="e_id"/>
        <result property="eName" column="e_name"/>
        <result property="eEmail" column="e_email"/>
        <result property="eSex" column="e_sex"/>
        <result property="ePhone" column="e_phone"/>
        <result property="eDate" column="e_date"/>
        <collection property="deptList" javaType="list" ofType="com.feng.employees.entity.Dept">
            <id property="dId" column="d_id"></id>
            <result property="dName" column="d_name"></result>
        </collection>
    </resultMap>
    <select id="GetAllEmps" resultMap="EmpsWithDepts">
        select e_id,e_name,e_email,e_sex,e_phone,e_date,dept.d_id,dept.d_name from emps,dept where
        <if test="name != null and name != ''">
            e_name like '%${name}%' and
        </if>
        emps.d_id=dept.d_id
    </select>
</mapper>

编写service层

service层接口

public interface EmpsService {
    List<Emps> GetAllEmps(String name);
}

接口的实现类

@Service
public class EmpsServiceImpl implements EmpsService {
    @Autowired
    private EmpsDao empsDao;
    @Override
    public List<Emps> GetAllEmps(String name) {
        return empsDao.GetAllEmps(name);
    }
}

编写controller层

@RestController
@RequestMapping("/Emps")
@CrossOrigin    //跨域的支持
@Slf4j
public class EmpsController {
    @Autowired
    private EmpsService empsService;
    /**
     * 分页查询，默认一页显示十条数据
     * @param currentpage 哪一页
     * @param name        姓名模糊查询
     * @return
     */
    @GetMapping("/Emps")
    public Msg GetAllEmps(Integer currentpage,String name){
//"e_id asc"为后期添加上的，使查询结果按照e_id的升序来排序。
        PageHelper.startPage(currentpage,10,"e_id asc");
        List<Emps> empsList = empsService.GetAllEmps(name);
        PageInfo pageInfo = new PageInfo(empsList);
        return Msg.success()
                //职工信息
                .add("emps",pageInfo.getList())
                //总条数
                .add("total", pageInfo.getTotal())
                //当前页
                .add("current", pageInfo.getPageNum())
                //总页数
                .add("endPage",pageInfo.getPages());
    }
}

postman测试

2-1 后端模糊查询测试.png

前端查询功能的实现

首先修改table中部门的绑定属性

<el-table-column
  #将原来的deptList改为deptList[0].dname用于获取从后端传过来的部门名
  prop="deptList[0].dname"
  label="部门"
  width="100">
</el-table-column>

前端模块

编写查询方法

在methods中添加查询方法

    findAll() {
      this.$http.get("Emps/Emps?currentpage=" + 1).then(result => {
        let extend = result.data.extend;
        this.EmpsInfo = extend.emps;
        this.total = extend.total;
        this.endpage = extend.endPage;
        this.currentpage = extend.current;
      });
    }

然后在created中添加此方法

  created() {
    this.findAll();
  }

查看效果

2-2 页面查询所有测试.png

可以看到员工数据和分页的数据已经能够显示出来了，但是点击分页条中的按钮还不能实现页面跳转。因此我们还需要完善分页的功能。点击分页条中的按钮发送请求，查询数据。

    //分页的数据
    findPage(page) {
      this.$http.get("Emps/Emps?currentpage=" + page).then(result => {
        let extend = result.data.extend;
        this.EmpsInfo = extend.emps;
        this.total = extend.total;
        this.currentpage = extend.current;
      });
    }

2-3 完善查询所有功能.png

姓名模糊查询模块的开发

后端模块

由于模糊查询的语句前面已经写好了，这里在控制层就可以直接拿来用了。

前端模块

前端页面搭建

在表格上方加上一个内嵌按钮的输入框用于获取查询姓名的关键字。

<el-row style="margin-top: 2%">
  <el-col :span="16" :offset="5">
    <el-input type="text" placeholder="请输入姓名的关键字进行查找" style="width: 40%" v-model="searchname">
      <el-button slot="append" icon="el-icon-search" @click="SearchEmps"></el-button>
    </el-input>
  </el-col>
</el-row>

在data()中添加searchname: null。

编写查询方法

当没有输入查询关键字点击查询的时候，是查询所有

    SearchEmps(){
      let name = this.searchname;
      if(name!=null){
        this.$http.get("/Emps/findbyname?name=" + name + "&currentpage=" + 1).then(result => {
          let extend = result.data.extend;
          this.EmpsInfo = extend.emps;
          this.total = extend.total;
          this.currentpage = extend.current;
        });
      }
    }

在网页中测试一下，查找姓名中含有“丽”的职工信息。

2-4 姓名模糊查询测试.png

此时可以发现数据已经被查出来了，但是点击下一页却是整个员工信息的下一页而不是模糊查询的下一页，因此要对分页数据展示的方法进行改造。

改造分页方法

      findPage(page) {
        let name = this.searchname;
        if (name == "") {
          this.$http.get("Emps/emps?currentpage=" + page).then(result => {
            let extend = result.data.extend;
            this.tableData = extend.emps;
            this.total = extend.total;
            this.currentzpage = extend.current;
          });
        } else {
          this.$http.get("/Emps/findbyname?name=" + name + "&webpage=" + page).then(result => {
            let extend = result.data.extend;
            this.tableData = extend.emps;
            this.total = extend.total;
            this.currentpage = extend.current;
          });
        }
      }

测试一下

2-5 完整的姓名模糊查询测试.png

可以看到下一页的数据中全是姓名中带有“丽”字的职工信息。并且当输入框没有任何字段点击查询时会默认查询所有！