Maven实现的前后端分离聚合小项目-广告页图片的管理

通过教程实现这个小项目后，怎么说呢，受益匪浅，我终于明白了前后端的含义，根本不是之前我想的那样！在这个过程中也熟悉了maven的使用。哈哈哈~

总体构造

实现

• 父项目（pom类型）
  
  对整体项目进行控制，在pom.xml中声明了整个项目所使用的jar包依赖，通过<dependencyManagement>和<pluginManagement>对项目的依赖和使用的插件进行统一控制。

<properties>
	<servlet-version>3.0.1</servlet-version>
	<jsp-version>2.2</jsp-version>
	<jstl-version>1.2</jstl-version>
	<spring-version>4.1.6.RELEASE</spring-version>
	<aspectjweaver-version>1.8.6</aspectjweaver-version>
	<mybatis-version>3.2.7</mybatis-version>
	<mybatis-spring-version>1.2.3</mybatis-spring-version>
	<log4j-version>1.2.17</log4j-version>
	<mysql-connector-java>5.1.38</mysql-connector-java>
	<jackson-version>2.4.1</jackson-version>
	<commons-fileupload-version>1.3.1</commons-fileupload-version>
</properties>
  
  
  <dependencyManagement>
	  <dependencies>
	<!-- java的web依赖 -->
	  	<dependency>
		    <groupId>javax.servlet</groupId>
		    <artifactId>javax.servlet-api</artifactId>
		    <version>${servlet-version}</version>
		    <scope>provided</scope>
		</dependency>
		<dependency>
		    <groupId>javax.servlet.jsp</groupId>
		    <artifactId>jsp-api</artifactId>
		    <version>${jsp-version}</version>
		    <scope>provided</scope>
		</dependency>
		<dependency>
		    <groupId>jstl</groupId>
		    <artifactId>jstl</artifactId>
		    <version>${jstl-version}</version>
		</dependency>
	<!-- spring -->
		<dependency>
	   		 <groupId>org.springframework</groupId>
	    	 <artifactId>spring-webmvc</artifactId>
	   		 <version>${spring-version}</version>
		</dependency>
		
		<dependency>
	    	<groupId>org.springframework</groupId>
	    	<artifactId>spring-jdbc</artifactId>
	    	<version>${spring-version}</version>
		</dependency>
		
		<dependency>
	   		 <groupId>org.aspectj</groupId>
	    	 <artifactId>aspectjweaver</artifactId>
	   		 <version>${aspectjweaver-version}</version>
		</dependency>
	
	<!-- mybatis -->
		<dependency>
	    	<groupId>org.mybatis</groupId>
	    	<artifactId>mybatis</artifactId>
	    	<version>${mybatis-version}</version>
		</dependency>
	<!-- mybatis整合spring -->
		<dependency>
	    	<groupId>org.mybatis</groupId>
	    	<artifactId>mybatis-spring</artifactId>
	    	<version>${mybatis-spring-version}</version>
		</dependency>
		
	<!-- log4j日志包 -->
		<dependency>
	    	<groupId>log4j</groupId>
	    	<artifactId>log4j</artifactId>
	    	<version>${log4j-version}</version>
		</dependency>
	
	<!-- mysql驱动类 -->
		<dependency>
	    	<groupId>mysql</groupId>
	    	<artifactId>mysql-connector-java</artifactId>
	    	<version>${mysql-connector-java}</version>
		</dependency>
		
	<!-- jackson包 -->
		<dependency>
	    	<groupId>com.fasterxml.jackson.core</groupId>
	    	<artifactId>jackson-databind</artifactId>
	    	<version>${jackson-version}</version>
		</dependency>
	
	<!-- 文件上传下载 -->
		<dependency>
	    	<groupId>commons-fileupload</groupId>
	    	<artifactId>commons-fileupload</artifactId>
	    	<version>${commons-fileupload-version}</version>
		</dependency>
		
	
	  </dependencies>
    </dependencyManagement>
  
    <build>
    	<resources>
    		<resource>
    			<directory>src/main/java</directory>
    			<includes>
    				<include>**/*.xml</include>
    			</includes>
    		</resource>
    		<resource>
    			<directory>src/main/resources</directory>
    			<includes>
    				<include>**/*.xml</include>
    				<include>**/*.properties</include>
    			</includes>
    		</resource>
    	</resources>
    
    <pluginManagement>
    <plugins>
  		<plugin>
  			<groupId>org.apache.tomcat.maven</groupId>
	   	 	<artifactId>tomcat7-maven-plugin</artifactId>
	    	<version>2.2</version>
	    	<configuration>
	    		<!-- 控制tomcat的端口号 -->
	    		<port>80</port>
	    		<!-- 项目发布到tomcat之后的名称 -->
	    		<!-- /相当于把项目名设置成root -->
	    		<path>/ssm</path>

	    	</configuration>
  		</plugin>
  	</plugins>
    </pluginManagement>
  	
  </build>

• 实体类项目（war类型）
  
  因为在前台和后台项目中都要用到同一个实体类，所以提取称为一个单独的项目，在前台和后台项目的pom.xml中添加依赖引入即可。相当于Ant构建的jar包一样。

public class Pic {
	private int id;            //数据库中的id号
	private String path;  //图片路径
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getPath() {
		return path;
	}
	public void setPath(String path) {
		this.path = path;
	}
}

• 后台管理项目（war类型）
  

pom.xml添加需要的依赖。注意：版本号从parent项目继承，端口为8082，可自己设置，和前台项目区分开即可。

<dependencies>
   <!-- 依赖pojo -->
   <dependency>
   			<groupId>cn.czxy</groupId>
   		 <artifactId>ego-pojo</artifactId>
   		 <version>0.0.1-SNAPSHOT</version>
   </dependency>
	<!-- java的web依赖 -->
	  	<dependency>
		    <groupId>javax.servlet</groupId>
		    <artifactId>javax.servlet-api</artifactId>
		    <scope>provided</scope>
		</dependency>
		<dependency>
		    <groupId>javax.servlet.jsp</groupId>
		    <artifactId>jsp-api</artifactId>
		    <scope>provided</scope>
		</dependency>
		<dependency>
		    <groupId>jstl</groupId>
		    <artifactId>jstl</artifactId>
		</dependency>
	<!-- spring -->
		<dependency>
	   		 <groupId>org.springframework</groupId>
	    	 <artifactId>spring-webmvc</artifactId>
		</dependency>
		
		<dependency>
	    	<groupId>org.springframework</groupId>
	    	<artifactId>spring-jdbc</artifactId>
		</dependency>
		
		<dependency>
	   		 <groupId>org.aspectj</groupId>
	    	 <artifactId>aspectjweaver</artifactId>
		</dependency>
	
	<!-- mybatis -->
		<dependency>
	    	<groupId>org.mybatis</groupId>
	    	<artifactId>mybatis</artifactId>
		</dependency>
	<!-- mybatis整合spring -->
		<dependency>
	    	<groupId>org.mybatis</groupId>
	    	<artifactId>mybatis-spring</artifactId>
		</dependency>
		
	<!-- log4j日志包 -->
		<dependency>
	    	<groupId>log4j</groupId>
	    	<artifactId>log4j</artifactId>
		</dependency>
	
	<!-- mysql驱动类 -->
		<dependency>
	    	<groupId>mysql</groupId>
	    	<artifactId>mysql-connector-java</artifactId>
		</dependency>
		
	<!-- jackson包 -->
		<dependency>
	    	<groupId>com.fasterxml.jackson.core</groupId>
	    	<artifactId>jackson-databind</artifactId>
		</dependency>
	
	<!-- 文件上传下载 -->
		<dependency>
	    	<groupId>commons-fileupload</groupId>
	    	<artifactId>commons-fileupload</artifactId>
		</dependency>
	  </dependencies>
	  
	  <build>
	  <plugins>
  		<plugin>
  			<groupId>org.apache.tomcat.maven</groupId>
	   	 	<artifactId>tomcat7-maven-plugin</artifactId>
	    	<configuration>
	    		<port>8082</port>
	    		<path>/management</path>
	    	</configuration>
  		</plugin>
  	</plugins>
	  </build>

db.properties:

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/local
jdbc.username=root
jdbc.password=密码

log4j.properties：

log4j.rootCategory=ERROR,CONSOLE,LOGFILE

log4j.logger.cn.czxy.mapper=DEBUG

log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%C %d{YYYY-MM-dd hh:mm:ss} %m %n

log4j.appender.LOGFILE=org.apache.log4j.FileAppender
log4j.appender.LOGFILE.File=D:/my.log
log4j.appender.LOGFILE.Append=true
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%m %n

applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx" 
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
	http://www.springframework.org/schema/beans/spring-beans.xsd 
	http://www.springframework.org/schema/aop 
	http://www.springframework.org/schema/aop/spring-aop.xsd 
	http://www.springframework.org/schema/tx 
	http://www.springframework.org/schema/tx/spring-tx.xsd 
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context.xsd"
	default-autowire="byName">

	<!-- 注解扫描 -->
	<context:component-scan base-package="xxx.xxx.service.impl"></context:component-scan>

	<!-- 加载属性文件 -->
	<context:property-placeholder location="classpath:db.properties"/>

	<!-- 数据源 -->
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="${jdbc.driver}"></property>
		<property name="url" value="${jdbc.url}"></property>
		<property name="username" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>

	<!-- SqlSessionFactory -->
	<bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<!-- 给哪个包下的类起别名 -->
		<property name="typeAliasesPackage" value="xxx.xxx.pojo"></property>
	</bean>

	<!-- 扫描器 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="xxx.xxx.mapper"></property>
		<!-- 不适用外部配置文件时 -->
		<!-- <property name="sqlSessionFactory" ref="factory"></property> -->
		
		<!-- 使用外部配置文件时 -->
		<property name="sqlSessionFactoryBeanName" value="factory"></property>
	</bean>

<!--本项目没有使用-->
	<!-- 事务管理器 -->
	<bean id="txManage"
		class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource"></property>
	</bean>

	<!-- 声明式事务 -->
	<tx:advice id="txAdvice" transaction-manager="txManage">
		<tx:attributes>
			<tx:method name="ins*"></tx:method>
			<tx:method name="del*"></tx:method>
			<tx:method name="upd*"></tx:method>
			<tx:method name="*" read-only="true"></tx:method>
		</tx:attributes>
	</tx:advice>

	<!-- 配置AOP -->
	<aop:config>
		<aop:pointcut expression="execution(* xxx.xxx.service.impl.*.*(..))"
			id="mypoint" />
		<aop:advisor advice-ref="txAdvice" pointcut-ref="mypoint" />
	</aop:config>
</beans>

springmvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        	http://www.springframework.org/schema/beans/spring-beans.xsd
         	http://www.springframework.org/schema/context
        	 http://www.springframework.org/schema/context/spring-context.xsd
        	 http://www.springframework.org/schema/mvc
        	http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!-- 1、添加注解扫描器		 -->
	<context:component-scan base-package="xxx.xxx.controller"></context:component-scan>
	
    <!-- 注解驱动，注册HaddlerMapping和HadllerAdapter -->
    <mvc:annotation-driven ></mvc:annotation-driven>
    
    <!-- 设置静态资源 -->
    <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
    <mvc:resources location="/files/" mapping="/files/**"></mvc:resources>
    <mvc:resources location="/images/" mapping="/images/**"></mvc:resources>
    
    <!-- multipart解析器,上传文件 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    </bean>
</beans>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                       
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
	
	
	<!-- spring -->
	<!-- 上下文参数 -->
	<context-param>
	    <param-name>contextConfigLocation</param-name>
	    <param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	<!-- 监听器 -->
	<listener>
	    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>


	<!-- springmvc -->
	<!-- 前端控制器 -->
	<servlet>
	    <servlet-name>springmvc</servlet-name>
	    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
		    <param-name>contextConfigLocation</param-name>
		    <param-value>classpath:springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
	    <servlet-name>springmvc</servlet-name>
	    <url-pattern>/</url-pattern>
	</servlet-mapping>
	
	<!-- 字符编码过滤器 -->
	<filter>
	    <filter-name>encoding</filter-name>
	    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
		    <param-name>encoding</param-name>
		    <param-value>utf-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
	    <filter-name>encoding</filter-name>
	    <url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>

数据库访问层PicMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="cn.czxy.mapper.PicMapper">
	<insert id="insPic" parameterType="pic">
	insert into pic values(default,#{path})
	</insert>
</mapper>

数据库访问层PicMapper接口：

public interface PicMapper {
	//添加图片，使用的是xml文件实现，其余用注解
	int insPic(Pic pic);
	//显示图片
	@Select("select * from pic")
	List<Pic> selAll();
	//删除图片
	@Delete("delete from pic where id=#{0}")
	int delById(int id);
}

服务层PicService ：

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

public interface PicService {
	//添加图片
	int insPic(Pic pic);
	//显示图片
	List<Pic> selAll();
	//删除图片
	int delById(int id);
}

服务层实现层PicServiceImpl ：

//注解一定要加上
@Service
public class PicServiceImpl implements PicService{
	
	@Resource
	private PicMapper picMapper;
	//添加图片
	@Override
	public int insPic(Pic pic) {
		return picMapper.insPic(pic);
	}
	//显示图片
	@Override
	public List<Pic> selAll() {
		return picMapper.selAll();
	}
	//删除图片
	@Override
	public int delById(int id) {
		return picMapper.delById(id);
	}
}

控制器：

//注解一定要加上
@Controller
public class PicController {
	@Resource
	private PicService picServiceImpl;
	//添加图片
	@RequestMapping("insert")
	public String insert(MultipartFile file, HttpServletRequest req){
		
		try {
		//将图片存放在项目根目录下的files文件夹中
			FileUtils.copyInputStreamToFile(file.getInputStream(), new File(req.getServletContext().getRealPath("files"),file.getOriginalFilename()));
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		Pic pic = new Pic();
		pic.setPath(file.getOriginalFilename());
		int index = picServiceImpl.insPic(pic);
		if(index>0){
			
			return "redirect:/show";
		}else{
			return "/add.jsp";
		}
	}
	//显示图片
	@RequestMapping("show")
	public String show(Model model){
		model.addAttribute("list", picServiceImpl.selAll());
		return "/main.jsp";
	}
	//删除图片
	@RequestMapping("delete")
	public String delById(int id){
		int index = picServiceImpl.delById(id);
		if(index>0){
			return "redirect:/show";
		}else{
			return "/error.jsp";
		}
	}
}

添加图片页面add.jsp：

<body>
<form action="insert" method="post" enctype="multipart/form-data">
广告图片：<input type="file" name="file">
<input type="submit" value="提交">
</form>
</body>

管理图片页面：

要添加这一句：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
显示：
<body>
<table border="1">
	<tr>
		<td>图片</td>
		<td>操作</td>
	</tr>
	<c:forEach items="${list }" var="pic">
		<tr>
			<td><img src="files/${pic.path }" width="100px"></td>
			<td><a href="delete?id=${pic.id }">删除</a></td>
		</tr>
	</c:forEach>
</table>
</body>

• 前台管理项目（war类型）
  
  这个项目使用的还是ssm框架，和后台管理类一样。
  区别：
  
  2、在项目执行流程中，只用到了显示图片的功能：

public interface PicMapper {
	@Select("select * from pic")
	List<Pic> selAll();
}

其余的按此功能进行修改。
3、需要访问management后台管理项目下的files/目录下的图片资源，所以多出一个配置文件my.properties

management.url=http://localhost:8082/management/files/

当然，也可以在index.jsp中的<img src=“直接写该url”>
4、在service层service.impl中需要将该url获取到，赋值给Pic的path属性，进行访问图片资源：

 @Service
public class PicServiceImpl implements PicService{

	@Value("${management.url}")
	private String path;
	
	@Resource
	private PicMapper picMapper;
	
	@Override
	public List<Pic> selAll() {
		List<Pic> list = picMapper.selAll();
		for(Pic pic : list){
			pic.setPath(path+pic.getPath());
		}
		return list;
	}
}

显示广告图片index.jsp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:forEach items="${list }" var="pic">
		<img src="${pic.path }" >
</c:forEach>

• 数据设计，只用来存放路径即可

create table pic(
id int(10) primary key auto_increment,
path varchar(100)
);

实现图片轮播功能

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
	
	var index = 0;
	
	var imglength =${list.size()};
	
	$(".imgindex").eq(index).css("background","green");
	
	$.each($(".adpic"),function(i,n){
		$(n).css("left",400*i+"px");
	})

	setInterval(function(){
		$.each($(".adpic"),function(i,n){
			$(n).animate({"left":parseInt($(n).css("left"))-400+"px"},1000,function(){
				//动画执行完成后执行的功能
				if(i==0){
					var $newimg = $(n).clone();
					$(n).remove();
					$newimg.css("left","800px");
					$("#addiv").append($newimg);
				}
			});
		})
		index++;
		if(index>imglength-1){
			index=0;
		}
		$(".imgindex").css("background", "red");
		$(".imgindex").eq(index).css("background","green");
	},3000);
})
</script>
</head>
<body>
<button>按钮</button>
<div id="addiv" style="width: 400px;height:200px;border: 1px solid black;margin-left:100px;position: absolute;overflow: hidden;">
	<c:forEach items="${list }" var="pic">
		<img class="adpic" src="${pic.path }" width="400px" height="200px" style="position: absolute;left:0px;top:0px;">
	</c:forEach>
</div>
<div style="position: absolute;top:180px;left:300px;">
	<c:forEach begin="1" end="${list.size() }" var="step">
		<span class="imgindex" style="background-color: red;">${step }</span>
	</c:forEach>
</div>
</body>
</html>

效果图展示

后台：
添加页面：

管理页面：

前台：

是轮播进行显示的。

小结

轮播这块我也没有完全弄懂，还在努力中。其实在后台管理的时候，删除图片时，应当将根目录下的图片也删除，而不仅仅是删除数据库中的路径。