Maven+SSM项目整合(一)--分页显示

一、项目简介

上次使用easyui+SSM做了小demo，不过很多功能还是没做完。这次使用AngularJS+Maven+SSM做demo吧，尽量把功能都完善。

二、项目搭建

新建maven项目，选择war包的方式。项目比较简单，就全部放在一个maven project里面。

项目搭建如下：

配置文件都和上次的相同，详见 SSM整合实例–（一）项目搭建

POM.XML文件如下：

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.cf</groupId>
	<artifactId>marketlist</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<dependencies>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.2.2</version>
		</dependency>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.2.8</version>
		</dependency>
		<dependency>
			<groupId>com.github.miemiedev</groupId>
			<artifactId>mybatis-paginator</artifactId>
			<version>1.2.15</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>3.7.5</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.36</version>
		</dependency>
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
			<version>1.0.9</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>4.3.13.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
			<version>4.3.13.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.3.13.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>4.2.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
			<version>4.2.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jms</artifactId>
			<version>4.2.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context-support</artifactId>
			<version>4.2.4.RELEASE</version>
		</dependency>
		<!-- JSP相关 -->
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<scope>provided</scope>
			<version>2.5</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jsp-api</artifactId>
			<scope>provided</scope>
			<version>2.0</version>
		</dependency>

		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.3</version>
		</dependency>
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.28</version>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<!-- 配置tomcat插件 -->
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<port>8080</port>
					<path>/</path>
				</configuration>
			</plugin>
		</plugins>
		
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
	</build>
	
	
</project>

三、项目后端

mapper和pojo是mybatis逆向工程生成的

Contoller层：

productContoller.java

package com.cf.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.cf.common.pojo.PageResult;
import com.cf.pojo.TbProduct;
import com.cf.service.ProductService;

@RestController
@RequestMapping("/product")
public class ProductController {

	@Autowired
	private ProductService productService;
	
	/**
	 * 返回全部列表
	 * @return
	 */
	@RequestMapping("/findAll")
	public List<TbProduct> findAll(){
		return productService.findAll();
	}
	
	/**
	 * 返回分页的全部列表
	 * @param page
	 * @param rows
	 * @return
	 */
	@RequestMapping("/findPage")
	public PageResult findPage(int page, int rows) {
		return productService.findPage(page, rows);
	}
}

Service层和ServiceImpl的就和上次一致了。

浏览器输入http://localhost:8080/product/findAll.do，可以看到返回的json的数据

http://localhost:8080/product/findPage.do?page=1&rows=10，返回分页的json数据

看到返回的json数据即后端代码OK了。

四、前端代码

前端使用AngularJS编写，感觉对嵌套的pojo数据更好用点。

引入AngularJS的分页js，AngularJS也是符合MVC模式的语言。前端的JS代码可以分为controller和service层，前后端分离。

显示所有的商品列表如上所示。

4.1 分类显示

查找category的后端和product的内容相同

输入http://localhost:8080/category/findAll.do，显示category的json数据

此处的js代码，将上面的json数据转为categoryList数组的数据

$scope.categoryList = []; //定义商品分类列表
//查询商品分类列表
$scope.findCategoryList=function(){
	categoryService.findAll().success(
			function(response){
				for(var i = 0;i < response.length; i++){
					$scope.categoryList[response[i].cId] = response[i].cName;
				}
			}	
	)
}

前端页面的显示修改如下：

根据category的id选择categoryList数组的下标

结果如下：

商品分类即可正常显示。

相同操作，制作category显示页面