SSM -＞第一个整合:前端书籍页面crud数据库

欧皇小德子

已于 2022-02-16 17:08:11 修改

阅读量485

点赞数

分类专栏： Spring SpringMVC Mybatis 文章标签：数据库前端 java

于 2020-11-20 13:49:57 首次发布

本文链接：https://blog.csdn.net/rod0320/article/details/109844999

版权

Spring 同时被 3 个专栏收录

91 篇文章 1 订阅

订阅专栏

Mybatis

32 篇文章 0 订阅

订阅专栏

SpringMVC

15 篇文章 0 订阅

订阅专栏

文章目录

结果展示:

在这里插入图片描述

数据库环境

CREATE DATABASE `ssmbuild`;

USE `ssmbuild`;

DROP TABLE IF EXISTS `books`;

CREATE TABLE `books` (
`bookID` INT(10) NOT NULL AUTO_INCREMENT COMMENT '书id',
`bookName` VARCHAR(100) NOT NULL COMMENT '书名',
`bookCounts` INT(11) NOT NULL COMMENT '数量',
`detail` VARCHAR(200) NOT NULL COMMENT '描述',
KEY `bookID` (`bookID`)
) ENGINE=INNODB DEFAULT CHARSET=utf8

INSERT  INTO `books`(`bookID`,`bookName`,`bookCounts`,`detail`)VALUES 
(1,'Java',1,'从入门到放弃'),
(2,'MySQL',10,'从删库到跑路'),
(3,'Linux',5,'从进门到进牢');

基本环境搭建:Maven项目！添加web的支持,导入相关的pom依赖！

导入的包特别是spring的jar(spring-webmvc,spring-jdbc),版本一定要一样

<dependencies>
   <!--Junit-->
   <dependency>
       <groupId>junit</groupId>
       <artifactId>junit</artifactId>
       <version>4.12</version>
   </dependency>
   <!--数据库驱动-->
   <dependency>
       <groupId>mysql</groupId>
       <artifactId>mysql-connector-java</artifactId>
       <version>5.1.47</version>
   </dependency>
   <!-- 数据库连接池 -->
   <dependency>
       <groupId>com.mchange</groupId>
       <artifactId>c3p0</artifactId>
       <version>0.9.5.2</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</version>
   </dependency>
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>jstl</artifactId>
       <version>1.2</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>

   <!--Spring-->
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-webmvc</artifactId>
       <version>5.1.9.RELEASE</version>
   </dependency>
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-jdbc</artifactId>
       <version>5.1.9.RELEASE</version>
   </dependency>
</dependencies>

导包记得在构建中添加lib
在这里插入图片描述

Maven资源过滤设置:防止找不到xml文件

<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>

建立基本结构和配置框架！

rod.controller
rod.mapper
rod.pojo
rod.service
在这里插入图片描述

在这里插入图片描述

mybatis.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>

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

</beans>

Mybatis层编写

1、数据库配置文件 db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=true&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=123456

mybatis.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>
    <mappers>
        <mapper class="rod.mapper.BooksMapper"/>
    </mappers>
</configuration>

4、编写数据库对应的实体类 com.kuang.pojo.Books
有参无参,get,set,tostring

public class Books implements Serializable {
  private int bookID;
  private String bookName;
  private int bookCounts;
  private String detail;

5、编写mapper层的 Mapper接口！
@Param相当于起别名

public interface BooksMapper {
  //增加一个Book
  int insertSet(Books books);

  //根据id删除一个Book
  int deleteSet(@Param("bookID") int id);

  //更新Book
  int updateSet(Books books);

  //查询全部Book,返回list集合
  List<Books> selectSet();

  //根据id查询,返回一个Book
  Books selectidSet(@Param("id") int id);

  //根据一个string名字,模糊查询书籍,返回list集合
  List<Books> selectnameSet(@Param("name") String name);
}

6、编写接口对应的 Mapper.xml 文件。需要导入MyBatis的包；
方法名字使用select等开头,修复alt+回车一键创建到mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="rod.mapper.BooksMapper">
	<!--增加一个Book-->
    <insert id="insertSet">
        insert into ssmbuild.books (bookID, bookName, bookCounts, detail)
        values (#{bookID},#{bookName},#{bookCounts},#{detail});
    </insert>
    <!--根据id删除一个Book-->
    <delete id="deleteSet">
        delete from ssmbuild.books where bookID=#{bookID}
    </delete>
     <!--更新Book-->
    <update id="updateSet">
        update ssmbuild.books
        set bookName=#{bookName},bookCounts=#{bookCounts},detail=#{detail}
        where bookID=#{bookID}
    </update>
    <!--查询全部Book,返回list集合-->
    <select id="selectSet" resultType="rod.pojo.Books">
        select * from ssmbuild.books
    </select>
    <!--根据id查询,返回一个Book-->
    <select id="selectidSet" resultType="rod.pojo.Books">
        select * from ssmbuild.books where bookID=#{id}
    </select>
    <!--根据一个string名字,模糊查询书籍-->
    <select id="selectnameSet" resultType="rod.pojo.Books">
        select * from ssmbuild.books where bookName like concat('%',#{name},'%')
    </select>
</mapper>

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

接口：与mapper接口一样,改了个名字

public interface BooksService {
  //增加一个Book
  int insertSet(Books books);

  //根据id删除一个Book
  int deleteSet(int id);

  //更新Book
  int updateSet(Books books);

  //查询全部Book,返回list集合
  List<Books> selectSet();

  //根据id查询,返回一个Book
  Books selectidSet(int id);

  //根据一个string名字,模糊查询书籍
  List<Books> selectnameSet(String name);
}

实现类：这里使用 @Service注册,@Autowired赋值,不在xml配置bean

@Service
public class BooksServiceImpl implements BooksService {
  @Autowired
  private BooksMapper booksMapper;

  //增加一个Book
  @Override
  public int insertSet(Books books) {
    return booksMapper.insertSet(books);
  }

  //根据id删除一个Book
  @Override
  public int deleteSet(int id) {
    return booksMapper.deleteSet(id);
  }

  //更新Book
  @Transactional
  @Override
  public int updateSet(Books books) {
    return booksMapper.updateSet(books);
  }

  //查询全部Book,返回list集合
  @Override
  public List<Books> selectSet() {
    return booksMapper.selectSet();
  }

  //根据id查询,返回一个Book
  @Override
  public Books selectidSet(int id) {
    return booksMapper.selectidSet(id);
  }

  //根据一个string名字,模糊查询书籍
  @Override
  public List<Books> selectnameSet(String name) {
    return booksMapper.selectnameSet(name);
  }
}

OK，到此，底层需求操作编写完毕！

Spring层

1、配置Spring整合MyBatis，我们这里数据源使用jdbc连接池；

2、我们去编写Spring整合Mybatis的相关的配置文件；spring-mapper.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"
      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">

   <!-- 配置整合mybatis -->
   <!-- 1.关联数据库文件 -->
   <context:property-placeholder location="classpath:db.properties"/>

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

   <!-- 3.配置SqlSessionFactory对象 -->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactory">
       <!-- 注入数据库连接池 -->
       <property name="dataSource" ref="dataSource"/>
       <!-- 配置MyBaties全局配置文件:mybatis-config.xml -->
       <property name="configLocation" value="classpath:mybatis.xml"/>
   </bean>

   <!-- 4.配置扫描mapper接口包，动态实现mapper接口注入到spring容器中 -->
   <!--解释 ：https://www.cnblogs.com/jpfss/p/7799806.html-->
   <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
       <!-- 注入sqlSessionFactory -->
       <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
       <!-- 给出需要扫描mapper接口包 -->
       <property name="basePackage" value="rod.mapper"/>
   </bean>

</beans>

3、Spring整合service层:spring-service.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"
      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">

   <!-- 扫描service相关的bean -->
   <context:component-scan base-package="rod.service"/>

   <!-- 配置事务管理器 -->
   <bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager"
          id="dataSourceTransactionManager">
       <!-- 注入数据库连接池 -->
      <property name="dataSource" ref="dataSource"/>
   </bean>

   <!-- 开启事务注解-->
   <tx:annotation-driven transaction-manager="dataSourceTransactionManager"/>
</beans>

Spring层搞定！再次理解一下，Spring就是一个大杂烩，一个容器！对吧！

SpringMVC层

1、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">

   <!--DispatcherServlet-->
   <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:applicationContext.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>

   <!--encodingFilter 下面的url是/*,不是/,/会找不到jsp-->
   <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>

2、spring-mvc.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
   http://www.springframework.org/schema/context/spring-context.xsd
   http://www.springframework.org/schema/mvc
   https://www.springframework.org/schema/mvc/spring-mvc.xsd">

   <!-- 配置SpringMVC -->
   <!-- 1.开启SpringMVC注解驱动 -->
   <mvc:annotation-driven />
   <!-- 2.静态资源默认servlet配置-->
   <mvc:default-servlet-handler/>

   <!-- 3.配置jsp 显示ViewResolver视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
       <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
       <property name="prefix" value="/WEB-INF/jsp/" />
       <property name="suffix" value=".jsp" />
   </bean>

   <!-- 4.扫描web相关的bean -->
   <context:component-scan base-package="rod.controller"/>

</beans>

3、Spring配置整合文件，applicationContext.xml
相当于3个spring.xml放到一个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">

   <import resource="spring-mapper.xml"/>
   <import resource="spring-service.xml"/>
   <import resource="spring-mvc.xml"/>
   
</beans>

配置文件，暂时结束！Controller 和视图层编写
1、BookController 类编写，方法一：查询全部书籍
注:先是controller找对应url的方法,再由方法return跳转到jsp页面
url:/home 跳转到home.jsp

@Controller
public class BooksController {
  @Autowired
  @Qualifier("booksServiceImpl")
  private BooksService booksService;

  //书籍主页,查询全部书籍
  @RequestMapping("/home")
  public String selectController(Model model) {
    List<Books> booksList = booksService.selectSet();
    model.addAttribute("booksList", booksList);
    return "home";
  }
}

2、编写首页 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首页</title>
  </head>
  <body>
  <h3>
    <a href="${pageContext.request.contextPath}/home">点击进入列表页</a>
  </h3>
  </body>
</html>

3、书籍列表页面 home.jsp

注:
1.c:forEach 中的
items="${booksList}":booksList是model.addAttribute(“booksList”, booksList);的key
var=“booksList”:booksList是遍历得到的数据
${booksList.bookID}:bookID是var中一组数据的key,会映射到一个value
2.遍历标签c:forEach form和c都要加

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

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 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">
        <div class="col-md-4 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/insert">新增</a>
        </div>
        <div class="col-md-4 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/home">所有书籍</a>
        </div>
        <div class="col-md-4 column">
            <form class="form-search" action="${pageContext.request.contextPath}/search" method="post">
                <input class="input-medium search-query" type="text" name="bookname"/>
                <input type="submit" class="btn"></input>
            </form>
        </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>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                    <c:forEach var="booksList" items="${booksList}">
                        <tr>
                            <td>${booksList.bookID}</td>
                            <td>${booksList.bookName}</td>
                            <td>${booksList.bookCounts}</td>
                            <td>${booksList.detail}</td>
                            <td>
                                <a href="${pageContext.request.contextPath}/update?id=${booksList.bookID}">更改</a>
                                <a href="${pageContext.request.contextPath}/delete/${booksList.bookID}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

4、BookController 类编写，方法二：添加书籍
注:重定向是再次去找url:"/xxx"的方法,执行这个方法后return跳转到jsp页面

 //跳转到添加页面,准备输入数据
  @RequestMapping("/insert")
  public String insertController() {
    return "insert";
  }

  //输入完数据后提交按钮,重定向到书籍主页的url,也就是"/home"方法中
  //会再执行一遍书籍主页的方法,然后跳转到home.jsp页面
  @RequestMapping("/toinsert")
  public String toinsertController(Books books) {
    booksService.insertSet(books);
    return "redirect:/home";
  }

5、添加书籍页面：insert.jsp
注:
写程序从数据库mapper开启写,看是前端开始看到数据库mapper

步骤都是
1.先在前端页面点击按钮(有数据的会把数据都传进去)
href="/xx"一般就是普通的跳转,没有传数据
action="/xx"一般是有数据需要传入,会带get,post方法
2.分析按钮的url地址,相当于名字,mapping根据url去映射到controller层的方法
3.controller中对应的方法接收到数据执行程序,return再度跳转到不同的前端页面
4.所以就有点击,调到不同的页面
总结,前端页面的url是找后端程序的,后端的return xx;是找前端jsp的

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增书籍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="page-header">
            <h1>
                <small>新增书籍</small>
            </h1>
        </div>
    </div>
</div>
<div>
<form action="${pageContext.request.contextPath}/toinsert" method="post">
    书籍名称：<input type="text" name="bookName"><br><br><br>
    书籍数量：<input type="text" name="bookCounts"><br><br><br>
    书籍详情：<input type="text" name="detail"><br><br><br>
    <input type="submit" value="添加">
</form>

</div>
</body>
</html>

6、BookController 类编写，方法三：修改书籍

  //跳转到更新页面,并且页面中有默认的一些数据
  //跳转的过程中顺带渲染一下前端,model
  //准备输入数据
  @RequestMapping("/update")
  public String updateController(int id,Model model) {
    Books books = booksService.selectidSet(id);
    model.addAttribute("book",books);
    return "update";
  }

  //输入更新数据提交,重定向到主页,重定向会再次执行对应的方法
  @RequestMapping("/toupdate")
  public String toupdateController(Books books) {
    booksService.updateSet(books);
    return "redirect:/home";
  }

7、修改书籍页面 update.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 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>

    <form action="${pageContext.request.contextPath}/toupdate" method="post">
        <input type="hidden" name="bookID" value="${book.bookID}"/>
        书籍名称：<input type="text" name="bookName" value="${book.bookName}"/>
        书籍数量：<input type="text" name="bookCounts" value="${book.bookCounts}"/>
        书籍详情：<input type="text" name="detail" value="${book.detail}"/>
        <input type="submit" value="提交"/>
    </form>

</div>
</body>
</html>

8、BookController 类编写，方法四：删除书籍

//删除书籍,重定向到书籍主页,相当于程序查找了一遍数据库的数据
  @RequestMapping("/delete/{bookID}")
  public String deleteController(@PathVariable("bookID") int id) {
    booksService.deleteSet(id);
    return "redirect:/home";
  }

9、BookController 类编写，方法四：搜索书籍

//添加搜索框,模糊查询书籍名字,用的是跳转,将查询的数据显示到前端
//如果用的是重定向,就是再执行一遍书记主页查询所有数据的方法,就不是查询一本书了
//所以跳转到书籍主页,把这次查询的数据显示到书籍主页中
//注意model传值的key与前端接受的名字要对应,这里是items
  @RequestMapping("/search")
  public String searchController(String bookname,Model model) {
    List<Books> books = booksService.selectnameSet(bookname);
    model.addAttribute("booksList",books);
    return "home";
  }