通过教程实现这个小项目后,怎么说呢,受益匪浅,我终于明白了前后端的含义,根本不是之前我想的那样!在这个过程中也熟悉了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 :
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>
效果图展示
后台:
添加页面:
管理页面:
前台:
是轮播进行显示的。
小结
轮播这块我也没有完全弄懂,还在努力中。其实在后台管理的时候,删除图片时,应当将根目录下的图片也删除,而不仅仅是删除数据库中的路径。