分页+高级查询

分页+高级查询

2.1 后台

1.BaseQuery

public class BaseQuery {
    //当前页：默认1L
    private Long page = 1L;
    //每页的条数：默认10L
    private Long pageSize = 5L;
    //公共字段，意思是：关键字
    private String keyWords;
    //增加一个gerStart()，用来设置分页的当前页第一条数据是多少条
    public Long getStart(){
        return (this.page - 1)*this.pageSize;
   }
   .....
}    

2.IBaseService<T>

    //高级查询和分页
    PageList query(BaseQuery baseQuery);

3.BaseServiceImpl<T>

    //分页查询：总条数、当前页数据
    @Override
    public PageList query(BaseQuery baseQuery) {
        //当前页数据rows
        List<T> rows = baseMapper.queryRows(baseQuery);
        System.out.println("-----BaseServiceImpl层-------");
        //查询出的总条数
        Long total = baseMapper.queryTotal(baseQuery);
        return new PageList(total,rows);
    }

4. basic_util ----> PageList<T>

/**
 * 分页工具类
 *  total
 *  rows
 */
public class PageList<T> {

    private Long total;//总的条数
    private List<T> rows = new ArrayList(); //当前页查询数据

    public PageList(Long total, List<T> rows) {
        this.total = total;
        this.rows = rows;
    }

5.MountingsMapper.xml

<mapper namespace="cn.itsource.crm.mapper.MountingsMapper">
    <select id="findAll" resultType="Mountings">
        select * from mountings
    </select>

    <sql id="wheresql">
        <if test="keyWords != null and keyWords != ''">
            <where>
                and partsname like concat('%',#{keyWords},'%')
            </where>
        </if>
    </sql>
    <!-- 高级查询，总条数 -->
    <select id="queryTotal" resultType="long" parameterType="MountingsQuery">
        select count(*) from mountings
        <include refid="wheresql"></include>
    </select>
    <!-- 当前页总数据 -->
    <select id="queryRows" parameterType="MountingsQuery" resultType="Mountings">
        select * from mountings
        <include refid="wheresql"></include>
        limit #{start},#{pageSize}
    </select>

    <insert id="save" parameterType="Mountings">
        insert into mountings(partsname,price,num,warnnum,context,createtime)
        values(#{partsname},#{price},#{num},#{warnnum},#{context},#{createtime})
    </insert>
    <delete id="delete" parameterType="long">
        delete from mountings where id=#{id}
    </delete>
    <update id="update" parameterType="Mountings">
        update mountings set
        partsname=#{partsname},
        price=#{price},
        num=#{num},
        warnnum=#{warnnum},
        context=#{context},
        createtime=#{createtime}
         where id=#{id}
    </update>
    <select id="loadById" parameterType="long" resultType="Mountings">
        select * from mountings where id=#{id}
    </select>
</mapper>

6.MountingsController

    //高级查询
    @RequestMapping(value = "/query",method = RequestMethod.PATCH)
    @ResponseBody
    public PageList query(@RequestBody MountingsQuery mountingsQuery){
        System.out.println("进入高级查询");
        System.out.println(mountingsQuery);
        PageList pageList = mountingsService.query(mountingsQuery);
        for (Object row : pageList.getRows()) {
            System.out.println(row);
        }
        return pageList;
    }

2.2 前端

2.2.1 条件查询

1.准备按钮：绑定事件

				<el-form-item>
					<el-button type="primary" v-on:click="getMountings">查询</el-button>
				</el-form-item>

2.给后台发请求，获得返回的res里面的总条数、当前页总数据，刷新页面

            //获取用户列表
            getMountings() {
                let para = {
                    //获取当前页
                    page: this.page,
                    keyWords: this.filters.keyWords
                };
                //刷新效果
                this.listLoading = true;
                //NProgress.start();
                //getUserListPage(para).then((res) => {
                //发送axios请求
                this.$http.patch('/mountings/query', para).then(res => {
                    //总条数
                    this.total = res.data.total;
                    //当前页总数据
                    this.mountings = res.data.rows;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },

2.2.2 分页

1.准备分页条

		<!--分页，工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" >
			</el-pagination>
		</el-col>

2.调用分页的方法

            handleCurrentChange(val) {
                //val：传入想要的页面信息
                this.page = val;
                this.getMountings();
            },

扫描二维码关注公众号，回复： 8276574 查看本文章