图书Crud项目

此项目用于回顾ssm整合的过程，加深自己对ssm三大框架的理解以及提高使用框架的能力，同时也是对前端，web，mysql等知识的复习。

一、设计数据库

创建一个名为ssm的数据库，由于只是一个图书的crud项目，这里只创建一个books表

CREATE DATABASE ssm;

USE ssm;

DROP TABLE IF EXISTS books ;

CREATE TABLE books(
id INT(10) NOT NULL PRIMARY KEY auto_increment,
name VARCHAR(50) NOT NUll,
counts INT(11) NOT NULL,
details VARCHAR(200) NOT NULL
);

INSERT INTO books(id,name,counts,details)VALUES
(1,'JavaSE',10,'java从入门到精通'),
(2,'MySQL',23,'MySQL入门'),
(3,'JavaWeb',40,'使用java编写网站'),
(4,'JavaEE',40,'JavaWev企业级开发解决方案');

二、项目基本环境搭建

1、使用Maven创建项目 SSM。(注意：这里并没有使用模板创建）
2、导入项目需要的依赖

<!--依赖 junit,数据库连接驱动,数据库连接池,servlet,jsp,springmvc,spring-jdbc,mybatis,mybatis-spring-->
<dependencies>
    <!--Junit-->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
    </dependency>
    <!--数据库驱动-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.19</version>
    </dependency>
    <!-- 数据库连接池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.12</version>
    </dependency>
    <!--Servlet - JSP -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.2.1-b03</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <!--Spring-->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.2.5.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>5.2.5.RELEASE</version>
    </dependency>
    <!--Mybatis-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.2</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.2</version>
    </dependency>
</dependencies>

3、Maven资源过滤设置

<!--静态资源导出-->
<build>
    <resources>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
            </includes>
            <filtering>false</filtering>
        </resource>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
            </includes>
            <filtering>false</filtering>
        </resource>
    </resources>
</build>

4、建立项目包结构和配置框架

mybatis-config.xml

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

<configuration>
    
</configuration>

application.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"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">

</beans>

jdbc.properties

jdbc.url=jdbc:mysql://localhost:3306/ssm?serverTimezone=Asia/Shanghai
jdbc.username=root
jdbc.password=2824199842
jdbc.maxActive=20

三、MyBatis层编写

1、创建实体类Book
这里使用Lombok（偷懒~），需要导入依赖：（注意：IDEA首次使用时需要安装插件 setting->plugins->lombok）

<!--Lombok-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.4</version>
</dependency>

@Data  // 隐式导入所有get set toString 无参构造等方法
@AllArgsConstructor // 有参构造，此时无参构造没了，需要加上NoArgsConstructor
@NoArgsConstructor // 无参构造
public class Book {
    private Integer id;
    private String name;
    private Integer counts;
    private String details;

}

2、编写BookMapper接口

public interface BookMapper {
    /**
     * 增加图书
     * @return
     */
    int addBook(Book book);

    /**
     * 删除图书
     * @param id
     * @return
     */
    int deleteBookById(@Param("bookId") int id);

    /**
     * 更新图书
     * @param book
     * @return
     */
    int updateBook(Book book);

    /**
     * 查询图书
     * @param id
     * @return
     */
    Book queryBookById(@Param("bookId") int id);

    /**
     * 查询所有图书
     * @return
     */
    List<Book> queryAllBook();
}

3、编写BookMapper接口的sql映射文件BookMapper.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="com.zyz.dao.BookMapper">

    <insert id="addBook" parameterType="com.zyz.bean.Book">
        insert into books(name,counts,details) values(#{name},#{counts},#{details})
    </insert>

    <delete id="deleteBookById" parameterType="int">
        delete from books where id=#{bookId}
    </delete>

    <update id="updateBook" parameterType="com.zyz.bean.Book">
        update books set name=#{name},counts=#{counts},details=#{details}
        where id=#{id}
    </update>

    <select id="queryBookById" parameterType="int" resultType="com.zyz.bean.Book">
        select * from books where id=#{bookId}
    </select>

    <select id="queryAllBook" resultType="com.zyz.bean.Book">
        select * from books
    </select>
</mapper>

4、在mybtis配置文件中注册sql映射文件

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

<configuration>
     <!--  打印日志-->
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    <!--  注册映射文件  -->
    <mappers>
        <package name="com.zyz.dao"/>
    </mappers>

</configuration>

至此，Dao层编写完成，下一步编写Service层

5、编写Service层的接口和实现类

public interface BookService {
    /**
     * 增加图书
     * @return
     */
    int addBook(Book book);

    /**
     * 删除图书
     * @param id
     * @return
     */
    int deleteBookById(int id);

    /**
     * 更新图书
     * @param book
     * @return
     */
    int updateBook(Book book);

    /**
     * 查询图书
     * @param id
     * @return
     */
    Book queryBookById(int id);

    /**
     * 查询所有图书
     * @return
     */
    List<Book> queryAllBook();
}

public class BookServiceImpl implements BookService{

    @Autowired
    private BookMapper bookMapper;

    public int addBook(Book book) {
        return bookMapper.addBook(book);
    }

    public int deleteBookById(int id) {
        return bookMapper.deleteBookById(id);
    }

    public int updateBook(Book book) {
        return bookMapper.updateBook(book);
    }

    public Book queryBookById(int id) {
        return bookMapper.queryBookById(id);
    }

    public List<Book> queryAllBook() {
        return bookMapper.queryAllBook();
    }
}

四、Spring层整合Dao,Service层

<?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:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!--  关联数据库配置文件-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--声明数据源  用于连接数据库-->
    <bean id="myDataSource" class="com.alibaba.druid.pool.DruidDataSource"
          init-method="init" destroy-method="close">
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="maxActive" value="${jdbc.maxActive}"/>
    </bean>

    <!--声明mybatis中的SqlSessionFactoryBean 用于创建SqlSessionFactory对象    -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- set注入，把数据库连接池赋值给dateSource属性-->
        <property name="dataSource" ref="myDataSource"/>
        <!-- mybatis主配置文件的位置-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <!-- 声明Dao类
         MapperScannerConfigurer:在内部调用getMapper()生成每一个接口的dao代理对象
         创建好的dao对象放在spring容器中，默认名称为 接口名首字母小写-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--注入sqlSessionFactory-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!--要扫描的dao包-->
        <property name="basePackage" value="com.zyz.dao"/>
    </bean>

    <!--  声明service的注解@Service所在的包名位置  -->
    <context:component-scan base-package="com.zyz.service"/>

    <!-- 声明事务管理器   -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--  连接的数据库，指定数据源 -->
        <property name="dataSource" ref="myDataSource"/>
    </bean>
    
	<!-- 开启事务注解驱动 告诉spring使用注解管理事务，创建代理对象
         在需要使用事务的方法上添加Transactional注解-->
    <tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

然后，需要在Service实现类上添加@Service注解

五、SpringMVC层的整合

1、添加web支持
右键项目

勾选Web Application

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!--DispatchServlet-->
    <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>

    <!-- 注册监听器  用于创建Spring容器   -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:application.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!--乱码过滤-->
    <filter>
        <filter-name>encodingFilter</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>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!--Session 有效时间-->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>

</web-app>

创建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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--注解驱动-->
    <mvc:annotation-driven/>

    <!--  处理静态资源-->
    <mvc:default-servlet-handler />

    <!--扫描controller-->
    <context:component-scan base-package="com.zyz.controller"/>

    <!--声明springmvc框架中的视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--前缀  视图文件的路径-->
        <property name="prefix" value="/WEB-INF/view/"/>
        <!--后缀  视图文件的拓展名-->
        <property name="suffix" value=".jsp"></property>
    </bean>
</beans>

到此为止，整个ssm项目的配置文件基本上配置完成了，ssm项目与springboot项目相比，最大的不同就是这种繁杂的配置，但是学习ssm是必不可少的，只有这样才能了解到整个Javaweb工程的核心。
下一步是编写controller层以及与前端页面的交互。

六、Controller层与页面之间的交互

编写BookController类,添加crud方法

方法一：查询所有图书

@Controller
@RequestMapping("/book")
public class BookController {
    // Controller层就是调用service层的一些方法，完成需要的业务
    @Autowired
    private BookService bookService;

    /**
     * 查询所有图书
     * @return
     */
    @RequestMapping("/allBooks")
    public String list(Model model){
        List<Book> books = bookService.queryAllBook();
        model.addAttribute("books",books);
        return "allBooks";
    }
}

编写首页：index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <style>
        h3{
            border: 2px blueviolet solid;
            text-align: center;
            width: 200px;
            height: 50px;
            background-color: aqua;
            padding: 20px;
            border-radius: 10px;
            margin: 200px auto;/*外边距*/
            line-height: 50px;/*行高与高度一致则居中*/
        }
        a{
            text-decoration: none;/*去掉链接的下划线*/
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h3>
    <a href="${pageContext.request.contextPath}/book/allBooks">查询所有图书</a>
</h3>
</body>
</html>

编写展示所有图书的页面allBook.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍展示页面</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1><small>书籍列表——显示所有图书</small></h1>
            </div>
        </div>
    </div>
    
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>书籍编号</th>
                    <th>书籍名称</th>
                    <th>书籍数量</th>
                    <th>书籍详情</th>
                </tr>
                </thead>
                <tbody>
                <%--遍历从数据库中查到的全部图书--%>
                <c:forEach var="book" items="${books}">
                    <tr>
                        <td>${book.id}</td>
                        <td>${book.name}</td>
                        <td>${book.counts}</td>
                        <td>${book.details}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

启动Tomcat测试：
由于我使用maven直接创建的项目，没有使用maven中的模板，所以需要手动将项目目录下的包打包至WEB-INF目录下，Tomcat才能正常启动：

方法二：添加图书

1、首先在展示所有图书的页面allBooks.jsp添加一个发起请求的链接

<div class="col-md-12 column">
    <div class=" pull-right" >
        <%--跳到新增图书页面--%>
        <a class="btn btn-success"
           href="${pageContext.request.contextPath}/book/toAddBook">添加书籍</a>
    </div>
</div>

然后在BookConntroller添加一个跳转到添加页面的方法

/**
 * 跳转到添加图书页面
 * @return
 */
@RequestMapping("/toAddBook")
public String toAddBook(){
    return "addBook";
}

编写添加图书的页面addBook.jsp，也就是一个表单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加图书页面</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1><small>添加图书</small></h1>
            </div>
        </div>

        <form action="${pageContext.request.contextPath}/book/addBook" method="post">
            <div class="form-group">
                <label for="bkName">书籍名称</label>
                <input type="text" class="form-control" id="bkName" name="name" required>
            </div>
            <div class="form-group">
                <label for="bkCounts">书籍数量</label>
                <input type="number" class="form-control" id="bkCounts" name="counts" required>
            </div>
            <div class="form-group">
                <label for="bkDetails">书籍详情</label>
                <input type="text" class="form-control" id="bkDetails" name="details" required>
            </div>
            <button type="submit" class="btn btn-primary">添加</button>
        </form>
    </div>
</div>
</body>
</html>

最后在BookController中编写添加图书的方法

/**
 * 添加图书
 * @param book
 * @return
 */
@RequestMapping("/addBook")
public String addBook(Book book){
    // System.out.println(book);
    bookService.addBook(book);
    // 重定向到查询所有图书的Controller
    return "redirect:/book/allBooks";
}

方法三：修改图书

在展示所有图书的页面添加发起请求的链接：

<td>
    <a class="btn btn-primary"
       href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.id}">修改</a>
    &nbsp;&nbsp;
    <a class="btn btn-danger" href="">删除</a>
</td>

在BookController中添加跳转到修改页面的方法

/**
 * 跳转到修改页面
 * @return
 */
@RequestMapping("/toUpdateBook")
public String toUpdateBook(int id,Model model){
    Book book = bookService.queryBookById(id);
    model.addAttribute("book",book);
    return "updateBook";
}

编写修改图书的页面updateBook.jsp，又是一个表单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改图书页面</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1><small>修改图书</small></h1>
            </div>
        </div>
        <form action="${pageContext.request.contextPath}/book/updateBook" method="post">
            <div class="form-group">
                <label for="bkName">书籍名称</label>
                <input type="text" class="form-control" id="bkName" name="name" value="${book.name}" required>
            </div>
            <div class="form-group">
                <label for="bkCounts">书籍数量</label>
                <input type="number" class="form-control" id="bkCounts" name="counts" value="${book.counts}" required>
            </div>
            <div class="form-group">
                <label for="bkDetails">书籍详情</label>
                <input type="text" class="form-control" id="bkDetails" name="details" value="${book.details}" required>
            </div>
            <button type="submit" class="btn btn-primary">修改</button>
        </form>
    </div>
</div>
</body>
</html>

最后在BookController中编写修改图书的方法

/**
 * 修改图书
 * @param book
 * @return
 */
@RequestMapping("/updateBook")
public String updateBook(Book book){
    // System.out.println(book);
    bookService.updateBook(book);
    return "redirect:/book/allBooks";
}

这里更新不了的原因是因为updateBook中的book对象的id值为空，而更新图书时需要id作为参数去查找哪一本图书要更新。解决方案是在修改图书页面的表单中添加一组隐藏域，将id值传给updateBook()方法即可

<input type="hidden" name="id" value="${book.id}">### 方法四：删除图书

在展示所有图书的页面添加发起请求的链接

<td>
    <a class="btn btn-primary"
       href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.id}">修改</a>
    &nbsp;&nbsp;
    <a class="btn btn-danger"
       href="${pageContext.request.contextPath}/book/deleteBook?id=${book.id}">删除</a>
</td>

方法四：删除图书

在BookController中添加删除图书的方法

/**
 * 删除图书
 * @param id
 * @return
 */
@RequestMapping("/deleteBook")
public String deleteBook(int id){
    bookService.deleteBookById(id);
    return "redirect:/book/allBooks";
}

方法五：模糊搜索

mapper层：

/**
    * 根据书名模糊搜索
    * @param name
    * @return
    */
   List<Book> queryBookByName(@Param("bookName") String name);

<select id="queryBookByName" resultType="com.zyz.bean.Book">
    select * from books where name like #{bookName}
</select>

service层

/**
 * 通过name模糊查询书籍
 * @param name
 * @return
 */
List<Book> queryBookByName(String name);

 public List<Book> queryBookByName(String name) {
String realName = name.trim();// 去掉前后端空格
      return bookMapper.queryBookByName("%"+realName+"%");
  }

controller层

/**
 * 根据名称模糊查询书籍
 * @param bkName
 * @param model
 * @return
 */
@RequestMapping("/queryBook")
public String queryBook(String bkName,Model model){
    List<Book> books = bookService.queryBookByName(bkName);
    System.out.println(books);
    model.addAttribute("books",books);
    return "allBooks";
}

前端页面：

<form action="${pageContext.request.contextPath}/book/queryBook" method="post">
    <div class="col-xs-3">
        <input class="form-control" type="text" name="bkName" placeholder="请输入要查询的书籍名称"required>
    </div>
    <input class="btn btn-primary" type="submit" value="查询" >
</form>

七、项目总体结构

八、最终效果

九、总结

1、ssm整合的总体思路：使用spring容器去管理Dao,Service对象，springmvc容器管理Controller对象，springmvc容器是spring的子容器，springmvc容器中的controller对象能访问到spring容器中的service对象。

2、对css的一些属性的运用还不是很熟练