分页查询基于SSM&ElementUI

1.介绍

本文主要介绍如何完整的实现分页查询功能,基于SSM框架, Vue框架和ElementUI前端组件, MySQL数据库, 集成到IDEA工具中, 创建maven的webapp骨架, 来实现.

2 实现思路

1. 前端实现: 通过Vue 框架,上传当前页和每页的条数给后台, 并接收从后台返回的数据总数和当前页的数据;然后在前端页面中显示这些数据;
2. 创建Entity类
   QueryPageBean类: 实现实例化接口, 分页传递的参数作为该类的成员变量;
   PageResult类: 用于接收数据库返回的分页数据,包括数据总条数和当前页数据;
3. Controller层
   定义方法, 返回值类型为PageResult类型, 传参类型为QueryPageBean类型;

 @RestController 
 @RequestMapping("/goods")
 public class GoodsController{
     //依赖注入
     @Autowired
     private GoodsService goodsService;

      @RequestMapping("findByPage")
      public PageResult findByPage(@RequestBody QueryPageBean pageBean) {
      //@RequestBody将传来的json参数,封装成QueryPageBean对象
      PageResult pageResult = goodsService.findByPage(pagebean);
      return pageResult;      
}
}

1. Service接口实现类

@Service
@Transactional
public class GoodsServiceImpl implements GoodsService {
//依赖注入dao
    @Autowired
    private GoodsDao goodsDao;
        @Override
    public PageResult findByPage(QueryPageBean pageBean) {
        //通过分页助手, 设置分页查询参数(参数1: 当前页码,  参数2: 每页显示条数 )
        PageHelper.startPage(pageBean.getCurrentPage(), pageBean.getPageSize());

        //调用dao, 执行分页查询
        Page<Goods> page = goodsDao.findByPage(); //这里的sql语句 我们没有编写 limit 关键字

        return new PageResult(page.getTotal(), page.getResult());
    }
}

5. 关键配置文件
(1) SqlMapConfig.xml 用于分页助手插件配置

(2) spring-mvc.xml 用于配置springmvc注解扫描和注解驱动加载

(3) spring-config.xml用于

导入jdbc.properties配置文件;

<context:property-placeholder location="classpath:jdbc.properties"/>

配置数据源

<bean id="druidDataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <!--相关信息配置 驱动, URL,用户名, 密码-->
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
</bean>

配置SqlSessionFactoryBean

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--相关信息配置 数据源, pojo别名-->
        <property name="dataSource" ref="druidDataSource"/>
        <property name="typeAliasesPackage" value="com.itheima.pojo"/>
        <!--新增配置:　导入Mybatis核心配置文件-->
        <property name="configLocation" value="classpath:SqlMapConfig.xml"/>
</bean>

配置Mapper扫描dao层

<bean id="scannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--相关信息配置 扫描dao层-->
        <property name="basePackage" value="com.itheima.dao"/>
</bean>

开启Service层的注解扫描

<context:component-scan base-package="com.itheima.service" />

配置事务管理器对象

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--配置数据源-->
        <property name="dataSource" ref="druidDataSource"/>
</bean>

开启事务的注解扫描支持

<tx:annotation-driven></tx:annotation-driven>

配置GoodsDao.xml 配置dao层sql指令

<mapper namespace="com.itheima.dao.GoodsDao">

    <!--分页查询(通过PageHelper助手实现的分页查询)-->

    <resultMap id="goodsMap" type="com.itheima.pojo.Goods">
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="price" property="price"/>
        <result column="stock" property="stock"/>
        <result column="description" property="description"/>
        <!--配置一对一关系-->
        <association property="type" javaType="com.itheima.pojo.Type">
            <result column="type_id" property="id"/>
            <result column="type_name" property="name"/>
        </association>

    </resultMap>
    <select id="findByPage" resultMap="goodsMap">
        select g.*, t.name type_name
        from t_goods g, t_type t
        where g.type_id=t.id
    </select>
</mapper>