WEBAPP开发教程newstyles项目实战（七）商品列表功能实现-职坐标

WEBAPP开发教程newstyles项目实战（七）商品列表功能实现

凌雪 2018-11-08 来源：网络阅读 875 评论 0

摘要：本文将带你了解WEBAPP开发教程newstyles项目实战（七）商品列表功能实现，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发教程newstyles项目实战（七）商品列表功能实现，希望本文对大家学WEBAPP有所帮助。

在测试完我们的框架之后，能够整体的通起来，我们实现一个简单的功能，结合我们之前写的jsp页面实现商品列表的查询：
需求分析：
首先实现打开后台管理工程的首页，真正访问的是webapp下面的WEB-INF里面的jsp中的页面，由于其在webapp目录里面，不能够直接的去访问，所以我们这时候需要写一个controller来展示首页，所以在newstyles-manger-web工程的com.newstyles.controller里面新建一个控制页面的Controller：

/* * 页面跳转，打开首页 */@Controllerpublic class PageControlller { /* * 打开首页 */ @RequestMapping("/") public String showIndex(){ return "index"; } /* * 展示其它页面 */ @RequestMapping("/{page}") public String showPage(@PathVariable String page){ return page; }} 为什么打开首页的控制器返回index字符串呢，这是因为我们在springmvc.xml文件中定义了一个视图解析器，@RequestMapping为请求映射的注解，试图解析器的配置如下：

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /> </bean>
可以看到，定义的前缀为/WEB-INF/下面的jsp文件夹，后缀名为.jsp的jsp文件。所以如果想打开首页（假如首页的名称为index.jsp），则返回index字符串经过解析就可以找到首页的jsp文件了。页面则是使用EasyUI开发的。那怎么打开其它的页面呢？首先分析一下index.jsp中是否有对不同页面的定义呢， <ul id="menu" style="margin-top: 10px;margin-left: 5px;">         <li>         <span>商品管理</span>         <ul>          <li data-options="attributes:{'url':'item-add'}">新增商品</li>          <li data-options="attributes:{'url':'item-list'}">查询商品</li>          <li data-options="attributes:{'url':'item-param-list'}">规格参数</li>          </ul>         </li>         <li>发现，商品管理下一层的无序列表中含有对新增商品，查询商品，规格参数等的url路径的定义，分别为item-add，item-list，item-param-list，所以我们可以简单的写一个controller，如上面的打开其他页面的controller所示。

这次实现的功能为当我们打开商品列表这个界面时，商品应该都展示出来，也就是说，但我们一打开这个页面，相当于开始了一次请求，再进一步就是与数据库的一次查询操作，我们将查询到的数据通过EasyUI来进行展示，其特点是EasyUI不进行页面的刷新，其通过Ajax请求来实现数据的更新,下面是item-list.jsp中table元素的代码。

<table id="itemList" title="商品列表"        data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/list',method:'get',pageSize:30,toolbar:toolbar">    <thead>        <tr>        <th data-options="field:'ck',checkbox:true"></th>        <th data-options="field:'id',width:60">商品ID</th>            <th data-options="field:'title',width:200">商品标题</th>            <th data-options="field:'cid',width:100">叶子类目</th>            <th data-options="field:'sellPoint',width:100">卖点</th>            <th data-options="field:'price',width:70,align:'right',formatter:TAOTAO.formatPrice">价格</th>            <th data-options="field:'num',width:70,align:'right'">库存数量</th>            <th data-options="field:'barcode',width:100">条形码</th>            <th data-options="field:'status',width:60,align:'center',formatter:TAOTAO.formatItemStatus">状态</th>            <th data-options="field:'created',width:130,align:'center',formatter:TAOTAO.formatDateTime">创建日期</th>            <th data-options="field:'updated',width:130,align:'center',formatter:TAOTAO.formatDateTime">更新日期</th>        </tr>    </thead></table> 请求的url为/item/list，默认的EasyUI datagrid是带有参数的（//localhost:8080/item/list?page=1&rows=30）。具体的详细的内容可以查看EasyUI的官方手册。返回值则为一个json数据，但是这个数据的格式是不同的，这个可以通过官方文档了解到，其格式如下：

{total:”2”,rows:[{“id”:”1”,”name”,”张三”},{“id”:”2”,”name”,”李四”}]}

逐步实现：
初步的步骤为先写 Dao层，再写service，再写controller：

首先，我们先分析Dao层：分析得到需要查询tb_item表格，所以，我们需要得到其对应表格的查询语句，实现数据库操作，而在sql语句中分页显示则表示为如下：

select *from tb_item limit 0,30接下来需要使用分页插件

涉及到mybatis中plugin标签的使用，而我们使用的分页插件为 PageHelper，是一种第三方的开源分页插件，其在github上，具体的可以参考此网址。
实现原理分析：

通过上图可以发现，我们可以通过利用mybatis的Interceptor接口，获取到要执行的sql语句，所以在这一步可以对sql语句进行处理，也就是在Executor对象和Mappedtatement对象之间，实现分页插件，添加对sql语句的处理。
具体使用方法：
1.添加相关的jar包和相关的依赖，因为我们是利用maven来进行项目的管理，我们在之前在newstyles-parent的pom聚合工程里面管理了相关的依赖关系。
2.我们需要陪配置这个插件，所以我们应该在sqlMapperConfig.xml文件里面，因为其属于mybatis 的插件，所以，我们在原来的空的sqlMapperConfig.xml文件中配置分页插件PageHelper。在上述的文件中的configuration标签中间添加如下内容：

 <plugins> <plugin interceptor="com.github.pagehelper.PageHelper">//注意拦截器的拦截类型需要权】全限定名                 <property name="dialect" value="mysql"/> </plugin> </plugins>3.在执行的sql语句之前需要添加一句代码：

PageHelper.startPage(1, 10);
第一个参数是page，要显示第几页。
第二个参数是rows，没页显示的记录数。
4.取查询结果的总数量。
创建一个PageInfo类的对象，从对象中取分页信息。分页测试：
在newstyles-manager-web工程下面的test测试的文件中写一个TestPageHelper类，这里面使用了junit测试，还需要注意junit的相关引用是否导入：

public class TestPageHelper { @Test public void testPageHelper(){// 创建一个spring容器 ApplicationContext applicaitonContext = new ClassPathXmlApplicationContext("classpath:spring/applicationContext-*.xml"); //从spring中获取mapper对象，此处的对象为代理对象（example） TbItemMapper mapper = applicaitonContext.getBean(TbItemMapper.class); //执行查询，并分页 TbItemExample example = new TbItemExample(); //分页处理 PageHelper.startPage(1, 10); List<TbItem> list = mapper.selectByExample(example);//开始查询 //枚举取得对应的记录 for(TbItem tbItem : list){ System.out.println(tbItem.getTitle()); } //取得分页信息 PageInfo <TbItem> pageInfo = new PageInfo(list); long total = pageInfo.getTotal(); System.out.println("共有商品：" + total + "件。"); } }run as junittest 测试一下：

可以看到罗列出了第一页的10条信息，同时也获取了商品的总数，但是，注意：分页插件对逆向工程生成的代码支持不好，不能对有查询条件的查询分页。会抛异常。然而怎么实现前面所述的jsp页面中实现呢，那接下来应该操作Service层了。接收分页参数，一个是page一个是rows。调用dao查询商品列表。并分页。返回商品列表。
返回一个EasyUIDateGrid支持的数据格式。需要创建一个Pojo。此pojo应该放到taotao-common工程中。
解决方案是，可以构建一个pojo，里面包含rows和total，这个pojo需要建立在newstyles-common工程里面，因为这个类不仅仅是这一个业务需要，还可能有其它的地方需要，所以把他放到一个较为底层的位置比较好，方便使用。pojo类如下：
public class EUDataGridResult { private long total; private List<?> rows; public long getTotal() { return total; } public void setTotal(long total) { this.total = total; } public List<?> getRows() { return rows; } public void setRows(List<?> rows) { this.rows = rows; }} 然后在之前建好的ItemService接口中，再次定义一个业务类型的接口，这个接口主要是查询，也就是本节的分页查询的功能，所以，同时建立起其实现方法：
@Override public EUDataGridResult getItemList(int page, int rows) { //查询商品列表 TbItemExample exmaple = new TbItemExample(); //分页处理 PageHelper.startPage(page, rows);; List<TbItem> list = itemMapper.selectByExample(exmaple); // TODO Auto-generated method stub //创建返回值对象 EUDataGridResult result = new EUDataGridResult(); result.setRows(list); //获取记录的总数 PageInfo<TbItem> pageInfo = new PageInfo<>(list); result.setTotal(pageInfo.getTotal()); return result; }
接下来需要再web工程中开始写对应的controller控制：
Controller主要接收页面传递过来的参数，pages和rows，同时，需要返回一个json格式的数据，EUDataGridResult需要使用到@ResponseBody注解。这样我们在之前写的Service的controller里面再次写一个controller，关于这个分页的一个controller。
@RequestMapping("/item/list") @ResponseBody public EUDataGridResult getItemList(Integer page,Integer rows){ EUDataGridResult result = itemService.getItemList(page, rows); return result; } 一定要注意@RequestMapping的映射关系，不要出现错误。此时若直接启动则会出现错误，这是因为我们刚才新添加的内容没有更改到本地仓库，所以，我们可以重新再次安装一下，更新过后就可以执行了。
执行结果如下：