Mybatis多表多条件模糊查询带分页(前端为Vue 分页使用了PageHelper)

最新推荐文章于 2024-08-12 08:46:33 发布

Comet_Bay

最新推荐文章于 2024-08-12 08:46:33 发布

阅读量1k

点赞数 2

分类专栏：基础知识学习笔记文章标签： mybatis vue spring mysql java

本文链接：https://blog.csdn.net/HLComet_Bay_WC/article/details/108169789

版权

Mybatis多表多条件模糊查询带分页-前端为Vue-分页使用了PageHelper

前言
1. 前端
2. 后端
总结

前言

这个Demo本身是Maven项目，前端用到了一部分Vue，三层架构使用了springMvc

1. 前端

1.0 两个对应的数据库表

员工（employee)及绩效（performance)

USE `jboadb`;

DROP TABLE IF EXISTS `employee`;

CREATE TABLE `employee` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `emp_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `emp_no` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '员工账号',
  `coded_pass` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '加密后的密码',
  `salary` double DEFAULT NULL COMMENT '工资',
  `depart_id` int(11) DEFAULT NULL COMMENT '部门编号',
  `entry_time` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '入职时间',
  `status` int(11) NOT NULL COMMENT '0 未知 1在职 2离职 3劝退',
  `emp_img` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `emp_phone` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

DROP TABLE IF EXISTS `performance`;

CREATE TABLE `performance` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `emp_id` int(11) NOT NULL,
  `emp_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `year` int(11) NOT NULL,
  `month` int(11) NOT NULL,
  `grade` int(3) NOT NULL,
  `description` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

1.1 Vue代码

<script type="text/javascript" src="../../js/bootstrap.js"></script>
	<script type="text/javascript" src="../../js/vue.js"></script>
	<script type="text/javascript">
		let vue = new Vue({
   
			el:"#performance",
			data:{
   
				// pb为分页数据
				pb:{
   },
			},methods:{
   
				queryAllPerformances:function(nowPage){
   
					// nowPage传递当前页码
					$("#searchFormId [name='nowPage']").val(nowPage);
					// 使用ajax进行前后端交互
					$.ajax({
   
						url:"/queryAllPerformances.do",
						dataType:"json",
						data:new FormData($("#searchFormId")[0]),
						contentType:false,
						processData:false,
						type:"post",
						context:this,
						success:function(pb){
   
							for(let i = 0;i < pb.list.length; i++){
   
								pb.list[i].employee.empImg = "../../"+pb.list[i].employee.empImg;
							}
							this.pb = pb;
						}
					});
				},
				// 点击页码或下一页时重新查询
				getPage:function(nowPage){
   
					this.queryAllPerformances(nowPage);
				},
			}
		});
	vue.queryAllPerformances(1);
</script>

1.2 页面

<div class="container" id="performance">
		<div class="row">
			<div class="col-md-12">
				<div class="row table-bordered"
					style="margin-top: 20px; line-height: 100px">
					<div class="col-md-12 form-inline text-center">
						<form id="searchFormId">
						
						选择年份: <select class="form-control" style="width: 160px" name="year">
							<option value="">请选择年份</option>
							<option>2020</option>