SpringMVC学习心得

最新推荐文章于 2023-11-26 03:01:06 发布

海绵宝宝要冲

最新推荐文章于 2023-11-26 03:01:06 发布

阅读量1.7k

点赞数

文章标签： mvc spring java

本文链接：https://blog.csdn.net/weixin_50587646/article/details/120006204

版权

一、回顾MVC

1.什么是MVC

model: dao和service
view：视图
controller：servlet

2.什么是springmvc？

spring mvc 是spring framework的一部分，基于java实现mvc的轻量级web框架
也就是说它是一个帮助我们开发web的框架，并且是基于java语言，实现mvc三
层架构的一个框架

3.为什么学习springmvc？

特点：
- 轻量级，简单易学；
- 高效，基于请求响应的mvc框架；
- 与spingmvc兼容性好
- 约定优于配置
- 功能强大、简洁灵活
中心控制器
spring的web框架围绕DispatcherServelt设计，而DispatcherServlet就是将
请求分发到不同的处理器，即不同的servlet，不用我们再去web.xml中为每
个Servlet配置url
- web.xml配置DispatcherServlet

二、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>
	    <!--关联一个springmvc的配置文件-->
	    <init-param>
	      <param-name>contextConfigLocation</param-name>
	      <param-value>classpath:springmvc-servlet.xml</param-value>
	    </init-param>
	    <!--启动级别设置为1-->
	    <load-on-startup>1</load-on-startup>
	  </servlet>
	
	  <!--/匹配所有的请求，不包括jsp-->
	  <!--/*匹配所有的请求，包括jsp-->
	  <servlet-mapping>
	    <servlet-name>springmvc</servlet-name>
	    <url-pattern>/</url-pattern>
	  </servlet-mapping>
	</web-app>
	
	```

配置springmvc-servlet.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">

  <!--添加处理映射器-->
  <bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"></bean>

  <!--添加处理器适配器-->
  <bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"></bean>

  <!--添加视图解析器-->
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <!--地址前缀-->
    <property name="prefix" value="/WEB-INF/jsp"></property>
    <!--地址后缀-->
    <property name="suffix" value=".jsp"></property>
  </bean>

  <bean id="/hello" class="com.springmvc.controller.HelloController"></bean>
</beans>

HelloController

public class HelloController implements Controller {
  @Override
  public ModelAndView handleRequest(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
    //模型和视图
    ModelAndView modelAndView=new ModelAndView();

    //封装转发的数据对象
    modelAndView.addObject("msg","你好");

    //封装转发的视图jsp，即跳到哪一个页面去
    modelAndView.setViewName("hello");

    return modelAndView;
  }
}

hello.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
${msg}
</body>
</html>

注意：如果页面找不到可能是以下两个原因(代码没有错的前提下)
- 可能是web.xml中在匹配所有请求时，将/打成了/*
- 也可能是项目的artifacts中没有lib包，需要手动添加
- 流程：
  - 访问…/hello地址
  - 访问web.xml
  - 加载springmvc-servlet.xml中的/hello
  - 对应helloservlet这个controller
  - helloservlet这里又会跟之前的servlet一样将数据传回给jsp页面

2.通过java注解配置实现

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">
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <!--注册DispatcherServlet中转处理器-->
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--关联一个springmvc的配置文件-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc-servlet.xml</param-value>
    </init-param>
    <!--启动等级为1-->
    <load-on-startup>1</load-on-startup>
  </servlet>

  <!--路径：/表示可以接受所有请求，但是不包过.jsp-->
  <!--路径：/*表示可以接受所有请求，也包括.jsp-->
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

springmvc-serlvet.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">

  <!--开启注解-->
  <context:annotation-config/>
  <!--自动扫描包，让注解生效-->
  <context:component-scan base-package="com.springmvc.controller"/>
  <!--让spring mvc不处理静态资源，例如.css, .js等-->
  <mvc:default-servlet-handler/>
  <!--annotation-driven可以实现处理器和适配器-->
  <mvc:annotation-driven/>
  <!--添加视图解析器-->
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/"></property>
    <property name="suffix" value=".jsp"></property>
  </bean>
</beans>

Controller层java文件

package com.springmvc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {
  //当我们访问这个/xxx地址时，就会触发hello方法，然后就会将hello返回给视图解析器解析
  @RequestMapping("/xxx")
  public String hello(Model model)
  {
    model.addAttribute("msg","你好");
    return "hello";
  }
}

WEB-INF/jsp/下面的页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
${msg}
</body>
</html>

3.RestFul风格

简介：
Restful就是一个资源定位及资源操作的风格。不是标准也不是协议，只是一种风格。
基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。
功能
- 资源：互联网所有事物都可以被抽象为资源
- 资源操作：使用POST,GET,PUT,DELETE等不同方法对资源进行操作
- 分别对应：添加、查询、修改、删除
传统方式操作资源：通过不同的参数来实现不同的效果！方法单一，post和get
使用RESTFUL操作资源：可以通过不同请求方式来实现不同的效果！如下：请求地址一样，但是功能可以不同！
- http://127.0.0.1/item/1 查询 GET
- http://127.0.0.1/item 新增 POST

测试

package com.springmvc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
public class Controller2 {
  //跟以前的一样，用？带着参数
  @RequestMapping("/t1")
  public String test(int a, int b, Model model){
    int res=a+b;
    model.addAttribute("msg","结果为"+res);
    return "hello";
  }

  //如果有参数，可以通过/后带着
  @RequestMapping(value = "/t2/{a}/{b}",method = RequestMethod.GET)
  public String test1(@PathVariable int a,@PathVariable int b, Model model){
    int res=a+b;
    model.addAttribute("msg","结果为"+res);
    return "hello";
  }


  //如果有相同的路径，但是请求方式不同，会自动选择正确的请求方式
  //但是如果路径和请求方式都一样的话，则会出现映射错误
  @GetMapping("/t3/{a}/{b}")
  public String test2(@PathVariable int a,@PathVariable int b,Model model){
    int res=a+b;
    model.addAttribute("msg","结果为t31"+res);
    return "hello";
  }

  @PostMapping("/t3/{a}/{b}")
  public String test3(@PathVariable int a,@PathVariable int b,Model model){
    int res=a+b;
    model.addAttribute("msg","结果为t32"+res);
    return "hello";
  }
}

我们也可以在Controller中使用request和responce

	 @RequestMapping("t4")
  public String test4(HttpServletRequest request, HttpServletResponse response){
    System.out.println(request.getSession().getId());
    return "hello";
  }
}

如果不用视图解析器，也可以通过转发和重定向，但是不推荐（使用前需要把视图解析器注释掉）转发必须写全路径

//转发
  @RequestMapping("/m1/t1")
  public String t1(Model model){
    model.addAttribute("msg","ssss");
    return "/WEB-INF/jsp/hello.jsp";
  }

  //转发
  @RequestMapping("/m1/t2")
  public String t2(Model model){
    model.addAttribute("msg","ssss");
    return "forward:/WEB-INF/jsp/hello.jsp";
  }


 //重定向,如果重定向的是WEB-INF下的页面，会出现404，因为该下面的页面都是安全页面，不能通过重定向直接访问
  //所以得采取间接重定向，即重定向一个地址，由该地址再转发到WEB-INF下面的安全下面
  @RequestMapping("/qqq")
  public String hello1(Model model)
  {
    model.addAttribute("msg","你好1");
    System.out.println("nihao1");
    return "redirect:/qqq2";
  }

  //转发
  @RequestMapping("/qqq2")
  public String hello2(Model model)
  {
    model.addAttribute("msg","你好2");
    System.out.println("nihao2");
    return "forward:/WEB-INF/jsp//hello.jsp";
  }

4.数据存储问题

1.接受参数问题

注意如果是对象的话，对象的属性和参数必须一致，否则为null

	@Controller
	@RequestMapping("/user")
	public class UserController {
	  @RequestMapping("/t1")
	  //如果前台发的参数名是name1，要想接收到，可以使用@RequestParam("username")
	  public String t1(@RequestParam("username") String name, Model model){
	    System.out.println(name);
	    model.addAttribute("msg",name);
	    return "hello2";
	  }
	
	  //前端接受的是一个对象
	  @RequestMapping("/t2")
	  //如果前台发的参数名是name1，要想接收到，可以使用@RequestParam("username")
	  public String t2(User user, Model model){
	    System.out.println(user);
	    model.addAttribute("msg",user);
	    return "hello2";
	  }
	}
	```

2.关于Model Modelmap 以及 ModelandView

Linkemap
Modelmap 继承了Linkemap 所以可以使用Linkemap的全部方法
Model 是精简版的modelmap，为了减少新手对modelmap的原理和理解，以便快速上手
ModelAndView 可以在存储数据的同时，可以进行设置返回的逻辑视图，进行控制展示层的跳转

5. 乱码问题

通过Filter过滤器解决，注意路径是/* 因为要包括.jsp

设置EncodingFilter

   @Override
     public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException, IOException {
       request.setCharacterEncoding("utf-8");
       request.setCharacterEncoding("utf-8");
       filterChain.doFilter(request,response);
     }
   ```

配置web.xml

<filter>
   <filter-name>EncodingFilter</filter-name>
   <filter-class>com.springmvc.filter.EncodingFilter</filter-class>
 </filter>

 <filter-mapping>
   <filter-name>EncodingFilter</filter-name>
   <url-pattern>/*</url-pattern>
 </filter-mapping>

通过在web.xml配置springmvc的乱码过滤

配置web.xml,同样地址是/*

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

6. JSON

1.回顾JSON

<script type="text/javascript">
      var user={
        name:"sss",
        age:123,
        address:"sdfsd"
      }
      console.log(user)

      //stringify 将一个JS对象转换为一个JSON对象
      var json=JSON.stringify(user);

      console.log(json)

      //parse将一个JSON对象转化成一个JS对象
      var obj=JSON.parse(json)
      console.log(obj)
    </script>

2.JSON乱码配置问题

通过设置produces,每个方法都要，比较麻烦，不推荐

//每个方法都要加这个，比较麻烦，不推荐
  @RequestMapping(value="/xx",produces ="application/json;charset=utf-8")
  //加了这个，就不会走视图解析器
  @ResponseBody
  public String t1() throws JsonProcessingException {
    ObjectMapper mapper=new ObjectMapper();

    User user=new User(1,"郑伟雄","123");

    String s = mapper.writeValueAsString(user);

    return s;
  }

方法二，通过在springmvc-servlet设置

<mvc:annotation-driven>
    <mvc:message-converters register-defaults="true">
      <bean class="org.springframework.http.converter.StringHttpMessageConverter">
        <constructor-arg value="UTF-8"/>
      </bean>
      <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="objectMapper" >
          <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
            <property name="failOnEmptyBeans" value="false"></property>
          </bean>
        </property>
      </bean>
    </mvc:message-converters>
  </mvc:annotation-driven>

测试代码

@Controller
public class HelloController {
  //每个方法都要加这个，比较麻烦，不推荐
  @RequestMapping(value="/xx",produces ="application/json;charset=utf-8")
  //加了这个，就不会走视图解析器
  @ResponseBody
  public String t1() throws JsonProcessingException {
    ObjectMapper mapper=new ObjectMapper();

    User user=new User(1,"郑伟雄","123");

    //mapper.writeValueAsString会将对象转换成JSON对象
    String s = mapper.writeValueAsString(user);

    return s;
  }

  @RequestMapping("/xxx")
  //加了这个，就不会走视图解析器
  @ResponseBody
  public String t2() throws JsonProcessingException {
    ObjectMapper mapper=new ObjectMapper();

    User user=new User(1,"郑伟雄","123");

    String s = mapper.writeValueAsString(user);

    return s;
  }
}

不走视图解析器且返回JSON字符串，可以通过使用RestController

@RestController
public class HelloController {
  
  @RequestMapping("/xxx")
  //加了这个，就不会走视图解析器
  public String t2() throws JsonProcessingException {
    ObjectMapper mapper=new ObjectMapper();

    User user=new User(1,"郑伟雄","123");

    String s = mapper.writeValueAsString(user);

    return s;
  }
}

3. 返回自定义时间格式

方法一：

		@RequestMapping("/q2")
		  //加了这个，就不会走视图解析器
		  @ResponseBody
		  public String t4() throws JsonProcessingException {
		    ObjectMapper mapper=new ObjectMapper();
		    mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
		    SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		    mapper.setDateFormat(sdf);
		    Date date=new Date();
		    return mapper.writeValueAsString(date);
		  }
		}

方法二：

		@RequestMapping("/q2")
		  //加了这个，就不会走视图解析器
		  @ResponseBody
		  public String t4() throws JsonProcessingException {
		    ObjectMapper mapper=new ObjectMapper();
		    SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		    Date date=new Date();
		    return mapper.writeValueAsString(sdf.format(date));
		  }

4.抽取jsonUtil

public class JsonUtils {
  public static String getjson(Object object, String xx) throws JsonProcessingException {
    ObjectMapper mapper=new ObjectMapper();
    mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
    SimpleDateFormat sdf =new SimpleDateFormat(xx);
    mapper.setDateFormat(sdf);
    return mapper.writeValueAsString(object);
  }

  public static String getjson(Object object) throws JsonProcessingException {
    return getjson(object,"yyyy-MM-dd HH:mm:ss");
  }
}

5.fastjson

@RequestMapping("/q3")
  //加了这个，就不会走视图解析器
  @ResponseBody
  public String t5() throws JsonProcessingException {
    User user=new User(1,"郑伟雄","123");
    User user1=new User(2,"郑伟雄","123");
    User user2=new User(3,"郑伟雄","123");
    User user3=new User(4,"郑伟雄","123");

    List<User> userList=new ArrayList<User>();
    userList.add(user);
    userList.add(user1);
    userList.add(user2);
    userList.add(user3);

    //JAVA对象转成JSON字符串
    String s=JSON.toJSONString(user);
    System.out.println(s);
    //JAVA对象转成JSON对象
    JSONObject a=(JSONObject)JSON.toJSON(user);
    System.out.println(a);

    //JSON字符串转成JAVA对象
    User c=JSON.parseObject(s,User.class);
    System.out.println(c);

    //JSON对象转成JAVA对象,要加.class
    User x=JSON.toJavaObject(a,User.class);
    System.out.println(x);
    return JSON.toJSONString(userList);
  }

三.ssm整合

1.初步整合

导入相关的jar包

<dependencies>
    <!--        mysql依赖-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.25</version>
    </dependency>
<!--    数据库连接池-->
    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.5.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.6</version>
    </dependency>
    <!--    juit依赖-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
    </dependency>
<!--    springframework依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.3.9</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.3.9</version>
    </dependency>
<!--    servlet  jsp依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
    </dependency>
<!--    lombok依赖-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.20</version>
    </dependency>
<!-- 前端   jackson依赖-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.12.5</version>
    </dependency>
<!-- 后端   fastjson依赖-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.78</version>
    </dependency>
  </dependencies>
<!--  项目依赖-->
  <build>
    <resources>
      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>true</filtering>
      </resource>
    </resources>
  </build>

实体类

@Alias("Books")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Books {
  private int bookID;
  private String bookName;
  private int bookCounts;
  private String detail;
}

dao层接口类

public interface BooksMapper {
  int add(Books books);

  int del(int bookID);

  int update(Books books);

  Books query(int bookID);

  List<Books> queryall();

  List<Books> vague(Map<String,Object> map);
}

}

dao层接口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">
<!--configuration代表mybatis核心配置-->

<mapper namespace="com.ssm.dao.BooksMapper">
  <insert id="add" parameterType="Books">
    insert into books(bookName,bookCounts,detail)
    values (#{bookName},#{bookCounts},#{detail})
  </insert>
  <delete id="del" parameterType="int">
    delete from books where bookID=#{bookID}
  </delete>
  <update id="update" parameterType="Books">
    update books set bookName=#{bookName},bookCounts=#{bookCounts},
                     detail=#{detail}
    where bookID=#{bookID}
  </update>
  <select id="query" parameterType="int" resultType="Books">
    select * from books where bookID=#{bookID}
  </select>

  <select id="queryall" resultType="Books">
    select * from books
  </select>

  <select id="vague" parameterType="map" resultType="Books">
    select * from books
    <where>
      <choose>
        <when test="bookName!=NULL">bookName like (#{bookName})</when>
        <when test="bookCounts!=NULL">and bookCounts like(#{bookCounts})</when>
        <when test="detail!=NULL">and detail like (#{detail})</when>
      </choose>
    </where>
  </select>
</mapper>

serice层接口类

public interface BooksService {
  int add(Books books);

  int del(int bookID);

  int update(Books books);

  Books query(int bookID);

  List<Books> queryall();

  List<Books> vague(Map<String,Object> map);
}

service层实现类

@Service
public class BooksServiceImpl implements BooksService{

  private BooksMapper booksMapper;

  @Autowired
  public void setBooksMapper(BooksMapper booksMapper) {
    this.booksMapper = booksMapper;
  }

  @Override
  public int add(Books books) {
    return booksMapper.add(books);
  }

  @Override
  public int del(int bookID) {
    return booksMapper.del(bookID);
  }

  @Override
  public int update(Books books) {
    return booksMapper.update(books);
  }

  @Override
  public Books query(int bookID) {
    return booksMapper.query(bookID);
  }

  @Override
  public List<Books> queryall() {
    return booksMapper.queryall();
  }

  @Override
  public List<Books> vague(Map<String, Object> map) {
    return booksMapper.vague(map);
  }
}

servlet层

Controller
public class HelloController {
  @Autowired
  private BooksService booksService;

  @RequestMapping("/hello")
  public String queryall(Model model)
  {
    List<Books> list=booksService.queryall();
    model.addAttribute("list",list);
    return "jsp/hello";
  }

  @RequestMapping("/turn_add")
  public String add()
  {
    return "aa/add";
  }

  @RequestMapping("/add")
  public String add1(Books books){
    booksService.add(books);
    return "redirect:/hello";
  }

  @RequestMapping("/toupdate")
  public String toupdate(int bookID,Model model)
  {
      Books books=booksService.query(bookID);
      model.addAttribute("books",books);
      return "aa/updatebook";
  }

  @RequestMapping("/update")
  public String update(Books books)
  {
    System.out.println(books);
    booksService.update(books);
    return "redirect:/hello";
  }

  @RequestMapping("/delete")
  public String delete(int bookID)
  {
    booksService.del(bookID);
    return "redirect:/hello";
  }

  @RequestMapping("/vague")
  public String vague(String keyword,Model model)
  {
    System.out.println(keyword);
    if (!keyword.equals(""))
    {
      Map<String,Object> map=new HashMap<String,Object>();
      map.put("bookName",keyword);
      List<Books> list=booksService.vague(map);
      model.addAttribute("list",list);
      return "jsp/hello";
    }
    else
      return "redirect:/hello";
  }
}

WEB-INF/index

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

<%--
  Created by IntelliJ IDEA.
  User: 86136
  Date: 2021/9/7
  Time: 20:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String basePath = request.getScheme()
    + "://"
    + request.getServerName()
    + ":"
    + request.getServerPort()
    + request.getContextPath()
    + "/";
  pageContext.setAttribute("basePath",basePath);
%>
<base href="<%=basePath%>">
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <a href="hello" >哈喽页面</a>
  </body>
</html>

WEB-INF/jsp/hello

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

<%--
  Created by IntelliJ IDEA.
  User: 86136
  Date: 2021/9/7
  Time: 20:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<%
  String basePath = request.getScheme()
    + "://"
    + request.getServerName()
    + ":"
    + request.getServerPort()
    + request.getContextPath()
    + "/";
  pageContext.setAttribute("basePath",basePath);
%>
<base href="<%=basePath%>">
<head>
  <title>Title</title>
</head>
<body>
<form action="vague" method="post">
  <input type="text" name="keyword" >
  <input type="submit" value="查询">
</form>

<div>

  <a href="turn_add" style="width: 10px; height: 10px"><button value="添加"></button> </a>
  <table>
    <thead>
      <tr>
        <th>书籍ID</th>
        <th>书籍名字</th>
        <th>书籍数量</th>
        <th>书籍描述</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach var="books" items="${list}">
        <tr>
          <td>${books.bookID}</td>
          <td>${books.bookName}</td>
          <td>${books.bookCounts}</td>
          <td>${books.detail}</td>
          <td>
            <a href="toupdate?bookID=${books.bookID}">修改</a>
            <a href="delete?bookID=${books.bookID}">删除</a>
          </td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
</div>
</body>
</html>

WEB-INF/aa/add

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

<%--
  Created by IntelliJ IDEA.
  User: 86136
  Date: 2021/9/7
  Time: 20:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<%
  String basePath = request.getScheme()
    + "://"
    + request.getServerName()
    + ":"
    + request.getServerPort()
    + request.getContextPath()
    + "/";
  pageContext.setAttribute("basePath",basePath);
%>
<base href="<%=basePath%>">
<head>
  <title>Title</title>
</head>
<body>
<div>
<form action="add" method="post">
  <input type="text" name="bookName">
  <input type="text" name="bookCounts">
  <input type="text" name="detail">
  <input type="submit" value="提交">
</form>

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

WEB-INF/aa/update

<%--
  Created by IntelliJ IDEA.
  User: 86136
  Date: 2021/9/9
  Time: 17:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <%
    String basePath = request.getScheme()
      + "://"
      + request.getServerName()
      + ":"
      + request.getServerPort()
      + request.getContextPath()
      + "/";
    pageContext.setAttribute("basePath",basePath);
  %>
  <base href="<%=basePath%>">
  <title>Title</title>
</head>
<body>
<form action="update">
  <input type="hidden" name="bookID" value="${books.bookID}">
  <input type="text" name="bookName" value="${books.bookName}">
  <input type="text" name="bookCounts" value="${books.bookCounts}">
  <input type="text" name="detail" value="${books.detail}">
  <input type="submit">
</form>
</body>
</html>

数据库资源文件 database.properti

jdbc.driver=com.mysql.cj.jdbc.Driver
# 如果使用的是jdbc8.0以上,要增加一个时区的配置
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT
jdbc.user=root
jdbc.password=root

mybatis核心配置文件

<?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代表mybatis核心配置-->
<configuration>
<!--  配置数据源,交给spring去做-->
  <typeAliases>
    <package name="com.ssm.pojo"/>
  </typeAliases>

  <mappers>
    <package name="com.ssm.dao"/>
  </mappers>
</configuration>

spring整合mybatis的

spring-dao

	<?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">
	
	
	  <!-- 1关联数据库资源文件-->
	  <context:property-placeholder location="classpath:database.properties"/>
	
	  <!-- 2数据库连接池
	  dbcp: 半自动化,不能自动连接
	  c3p0: 自动化操作，可能自动加载我们的数据库资源文件，并且自动设置到对象中
	  druid:   kikari:
	  -->
	  <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
	    <property name="driverClass" value="${jdbc.driver}"></property>
	    <property name="jdbcUrl" value="${jdbc.url}"/>
	    <property name="user" value="${jdbc.user}"></property>
	    <property name="password" value="${jdbc.password}"></property>
	  </bean>
	
	  <!-- 3 SqlsessionFactory-->
	  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
	      <property name="dataSource" ref="dataSource"></property>
	      <property name="configLocation" value="classpath:mybatis-config.xml"></property>
	  </bean>
	
	  <!-- 4 配置dao自动扫描包，不用再手动去为每一个mapper写一个实现类，然后再通过实现类获得sqlSession,
	         当我们把dao层中的mapper扫描进来后，就可以自动将sqlSession注入，类似于动态实现了将dao中的东西
	         注入到spring容器中
	  -->
	  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
	    <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
	    <property name="basePackage" value="com.ssm.dao"></property>
	  </bean>
	</beans>

spring-serive

<?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">
  <!-- 1扫描包，注解自动注入-->
  <context:component-scan base-package="com.ssm.service"></context:component-scan>

<!--  <bean id="BooksServiceImpl" class="com.ssm.service.BooksServiceImpl">-->
<!--    <property name="booksMapper" ref="booksMapper"></property>-->
<!--  </bean>-->

  <!-- 2事务配置,如果不设置aop的话，这里其实有默认设置的aop-->
  <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
    <property name="dataSource" ref="dataSource"></property>
  </bean>

  <!-- 3aop-->
</beans>

spring-servlet

<?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">
  <!-- 1扫描包，让注解生效-->
  <context:component-scan base-package="com.ssm.servlet"></context:component-scan>

  <!-- 2让springmvc不处理静态资源，如css，js等-->
  <mvc:default-servlet-handler/>

  <!-- 3annotation driven实现处理器和适配器-->
  <mvc:annotation-driven>

    <!-- 4通过配置message-converters处理json乱码问题-->
    <mvc:message-converters register-defaults="true">
      <bean class="org.springframework.http.converter.StringHttpMessageConverter">
        <constructor-arg value="UTF-8"/>
      </bean>
      <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="objectMapper" >
          <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
            <property name="failOnEmptyBeans" value="false"></property>
          </bean>
        </property>
      </bean>
    </mvc:message-converters>
  </mvc:annotation-driven>

  <!-- 5添加视图解析器-->
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix" value="/WEB-INF/"></property>
  <property name="suffix" value=".jsp"></property>
  </bean>
</beans>

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">
  <import resource="spring-dao.xml"></import>
  <import resource="spring-service.xml"></import>
  <import resource="spring-servlet.xml"></import>
</beans>

测试

public class Mytest {
 @Test
 public void t1(){
   ApplicationContext context =new ClassPathXmlApplicationContext("applicationContext.xml");
   BookService bookService = (BookService) context.getBean("booksServiceImpl");
   Map<String,Object> map=new HashMap<String,Object>();
   Page<Books> page=bookService.page(1,4);
   for (Books item : page.getItems()) {
     System.out.println(item);
   }


 }
 @Test
 public void t2(){
   ApplicationContext context =new ClassPathXmlApplicationContext("applicationContext.xml");
   BookService bookService = (BookService) context.getBean("booksServiceImpl");
   Map<String,Object> map=new HashMap<String,Object>();
   map.put("bookCounts",13);
   map.put("bookName","Java");
   Page<Books> page=bookService.vague_page(2,4,map);
   for (Books item : page.getItems()) {
     System.out.println(item);
   }
 }
 @Test
 public void t3(){
   ApplicationContext context =new ClassPathXmlApplicationContext("applicationContext.xml");
   BookService bookService = (BookService) context.getBean("booksServiceImpl");
   bookService.add(new Books(0,"sss",11,"sdfasf"));

 }
}

2.结合layui前端整合smm

首页

<%--
  Created by IntelliJ IDEA.
  User: 86136
  Date: 2021/5/24
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <%
    String basePath = request.getScheme()
      + "://"
      + request.getServerName()
      + ":"
      + request.getServerPort()
      + request.getContextPath()
      + "/";
  %>
  <base href="<%=basePath%>">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="layuimini/css/public.css" media="all">
</head>
<body>

<div class="layuimini-container">
  <div class="layuimini-main">
    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">ID</label>
              <div class="layui-input-inline">
                <input type="text" name="bookID" id="bookID" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">书名</label>
              <div class="layui-input-inline">
                <input type="text"  name="bookName" id="bookName" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">数量</label>
              <div class="layui-input-inline">
                <input type="text" name="bookCounts"  id="bookCounts" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">描述</label>
              <div class="layui-input-inline">
                <input type="text" name="detail" id="detail" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="button" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
    <div class="layui-form layuimini-form" id="editor" style="display: none">
      <div class="layui-form-item">
        <label class="layui-form-label required">bookID</label>
        <div class="layui-input-block">
          <input type="text" name="bookID" id="bookID2" lay-verify="required"  class="layui-input" readonly="readonly">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label required">书名</label>
        <div class="layui-input-block">
          <input type="text" name="bookName" id="bookName2" lay-verify="required" lay-reqtext="书名不能为空" placeholder="请输入书名"
                 value="" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label required">数量</label>
        <div class="layui-input-block">
          <input type="text" name="bookCounts" id="bookCounts2" lay-verify="required" lay-reqtext="数量不能为空" placeholder="请输入数量" value="" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">描述信息</label>
        <div class="layui-input-block">
          <textarea name="detail" class="layui-textarea" id="detail2" placeholder="请输入描述信息"></textarea>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
      </div>
    </div>
  </div>


    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<script src="layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
  layui.use('table', function(){
    var $ = layui.$;
    var form = layui.form;
    var table = layui.table;

   var usertable= table.render({
      elem: '#currentTableId',
      url: 'booksServlet/page',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
        {field:'bookID', width:80, title: 'ID', sort: true}
        ,{field:'bookName', width:80, title: '书名'}
        ,{field:'bookCounts', width:80, title: '数量', sort: true}
        ,{field:'detail', width:80, title: '描述'}
        ,{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [10, 15, 20, 25, 100],
      limit: 4,
      page: true,
      skin: 'line'
    });


    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field);
      layer.alert(result, {
        title: '最终的搜索信息'
      });
      console.log(data.field.id)

      var bookName=$("#bookName").val();
      var bookCounts=$("#bookCounts").val();
      var detail=$("#detail").val();

      console.log(bookCounts)
      console.log(detail)

      //执行搜索重载
        table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          bookName:bookName,bookCounts:bookCounts,detail:detail
        },
        url: "booksServlet/vague_page"
        ,method:'get'
      });
    });



    /**
     * toolbar监听事件
     */

    //工具栏
    table.on('toolbar(currentTableFilter)', function (obj) {

      var bookIDs=[];

      if (obj.event === 'add')
      {  // 监听添加操作
        var index = layer.open({
          title: '添加用户',
          type: 2,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: ['50%', '50%'],
          content: 'booksServlet/tobookadd',
        });
        $(window).on("resize", function () {
          layer.full(index);
        });
      }
      else if (obj.event === 'delete')
      {  // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId');
        var checkData = checkStatus.data;
        if (checkData.length<=0)
          layer.alert("请勾选目标");
        else
        {
          layer.confirm("确定要删除这些数据吗?" ,function ()
          {
            for (var i=0;i<checkData.length;i++)
              bookIDs.push(checkData[i].bookID)
            console.log(bookIDs)
            $.ajax({
              url:"booksServlet/bookdel1",
              data:JSON.stringify(bookIDs),
              dataType:'json',
              type:'post',
              contentType: "application/json",
              success:function (result)
              {
                if (result.msg=="200")
                {
                  layer.closeAll();
                  usertable.reload();
                }
              }
            })
          })
        }
      }
    });

    // //监听表格复选框选择
    // table.on('checkbox(currentTableFilter)', function (obj) {
    //   checkStatus = table.checkStatus('currentTableId').data;
    //   // console.log(checkStatus.data.length)
    // });


    //监听行操作列
    table.on('tool(currentTableFilter)', function (obj) {

      var data = obj.data;
      var event=obj.event;

      if (event === 'edit') {
        // console.log(data)
        $("#bookID2").val(data.bookID)
        $("#bookCounts2").val(data.bookCounts)
        $("#bookName2").val(data.bookName)
        $("#detail2").val(data.detail)
        var index = layer.open({
          title: '编辑用户',
          type: 1,
          // shade: 0.2,
          // maxmin:true,
          offset:'10px',
          shadeClose: true,
          area: ['80%', '80%'],
          content: $("#editor"),
          success:function (){}
        });
      }
      else if (event === 'delete') {
        layer.confirm('真的删除行么', function (index)
        {
          $.ajax({
            url:"booksServlet/bookdel",
            data:data,
            dataType:'json',
            type:'post',
            success:function (result){
              if (result.msg=="200")
              {
                layer.closeAll();
                usertable.reload();
              }
            }
          })
        });
      }
    });

    //监听提交
    form.on('submit(saveBtn)', function (data) {
      var index = layer.alert(JSON.stringify(data.field));
        $.ajax({
          url:"booksServlet/bookupdate",
          data:data.field,
          dataType:'json',
          // success:
          type: 'post',
          success:function (result){
            if (result.msg=="200")
            {
                layer.closeAll();
                usertable.reload();
            }
          }
        })
    });
  });
</script>
</body>
</html>

书籍新增页面（也可做成弹窗）

<%--
  Created by IntelliJ IDEA.
  User: 86136
  Date: 2021/9/12
  Time: 20:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <%
    String basePath = request.getScheme()
      + "://"
      + request.getServerName()
      + ":"
      + request.getServerPort()
      + request.getContextPath()
      + "/";
  %>
  <base href="<%=basePath%>">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="layuimini/css/public.css" media="all">
  <style>
    body {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
<div class="layui-form layuimini-form">
  <div class="layui-form-item">
    <label class="layui-form-label required">书名</label>
    <div class="layui-input-block">
      <input type="text" name="bookName" lay-verify="required" lay-reqtext="书名不能为空" placeholder="请输入书名" value="" class="layui-input">
      <tip>填写自己管理账号的名称。</tip>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">数量</label>
    <div class="layui-input-block">
      <input type="number" name="bookCounts" lay-verify="required" lay-reqtext="数量不能为空" placeholder="请输入数量" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述信息</label>
    <div class="layui-input-block">
      <textarea name="detail" class="layui-textarea" placeholder="请输入描述信息"></textarea>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
    </div>
  </div>
</div>
<script src="layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
  layui.use(['form'], function () {
    var form = layui.form,
      layer = layui.layer,
      $ = layui.$;

    //监听提交
    form.on('submit(saveBtn)', function (data) {

      var index = layer.alert(JSON.stringify(data.field),
        {
        title: '最终的提交信息'
        }, function () {
        //传到后台
        $.ajax({
          url:"booksServlet/bookadd"
          ,data:data.field
          ,dataType:'JSON'
          ,method:"post"
        })
        // 关闭弹出层
        layer.close(index);

        var iframeIndex = parent.layer.getFrameIndex(window.name);
        parent.layer.close(iframeIndex);

      });

      return false;
    });

  });
</script>
</body>
</html>

后台代码 booksServlet

@Controller
@RequestMapping("/booksServlet")
public class BooksServlet {
  @Autowired
  private BookService bookService;

  //分页查询
  @RequestMapping("/page")
  @ResponseBody
  public JSONObject page(HttpServletRequest req, HttpServletResponse resp)
  {
      //获取前端传来的数据，当前页和页大小
      int pageNo=Integer.parseInt(req.getParameter("page"));
      int pageSize=Integer.parseInt(req.getParameter("limit"));

      //获取分页数据
      Page<Books> page=bookService.page(pageNo,pageSize);

      //从分页数据获取总记录数和当前页数据项
      int pageTotalCount=page.getPageTotalCount();
      List<Books> list = page.getItems();

      JSONObject jsonObject=new JSONObject();
      jsonObject.put("code",0);
      jsonObject.put("msg","");
      jsonObject.put("count",pageTotalCount);
      jsonObject.put("data",list);

      return jsonObject;
  }


  //分页模糊查询
  @RequestMapping("/vague_page")
  @ResponseBody
  public JSONObject vague_page(HttpServletRequest req, HttpServletResponse resp)
  {
    //获取前端传来的搜索参数
    String bookName=req.getParameter("bookName");
    String detail = req.getParameter("detail");
    //判断数量参数是否为空
    int bookCounts=-1111;
    if (!req.getParameter("bookCounts").equals(""))
      bookCounts=Integer.parseInt(req.getParameter("bookCounts"));

    Map<String,Object> map=new HashMap<String,Object>();
    //判断传过来的搜索参数是否为空
    if (!bookName.equals(""))
     map.put("bookName",bookName);
    if (!detail.equals(""))
      map.put("detail",detail);
    if (bookCounts!=-1111)
      map.put("bookCounts",bookCounts);

    //获取前端传来的数据，当前页和页大小
    int pageNo=Integer.parseInt(req.getParameter("page"));
    int pageSize=Integer.parseInt(req.getParameter("limit"));

    //获得分页数据
    Page<Books> page=bookService.vague_page(pageNo,pageSize,map);

    //获得总记录数和搜索数据项
    int pageTotalCount=page.getPageTotalCount();
    List<Books> list = page.getItems();

    JSONObject jsonObject=new JSONObject();
    jsonObject.put("code",0);
    jsonObject.put("msg","");
    jsonObject.put("count",pageTotalCount);
    jsonObject.put("data",list);
    return jsonObject;
  }

  //跳转到bookadd页面，仅限WEB-INF下面的才需要，其余的直接跳
  @RequestMapping("/tobookadd")
  public String tobookadd(){
    return "book/bookadd";
  }

  //跳转到bookupdate页面，仅限WEB-INF下面的才需要，其余的直接跳
  @RequestMapping("/tobookupdate")
  public String tobookupdate(){
    return "book/bookupdate";
  }


  //增加图书
  @RequestMapping("/bookadd")
  public void bookadd(HttpServletRequest req,HttpServletResponse res){
    String bookName=req.getParameter("bookName");
    int bookCounts=Integer.parseInt(req.getParameter("bookCounts"));
    String detail=req.getParameter("detail");
    Books books=new Books(0,bookName,bookCounts,detail);
    bookService.add(books);
  }
  //修改图书
  @RequestMapping("/bookupdate")
  @ResponseBody
  public Map<String, Object> bookupdate(HttpServletRequest req, HttpServletResponse res)
  {
    int bookID=Integer.parseInt(req.getParameter("bookID"));
    String bookName=req.getParameter("bookName");
    int bookCounts=Integer.parseInt(req.getParameter("bookCounts"));
    String detail=req.getParameter("detail");
    Books books=new Books(bookID,bookName,bookCounts,detail);
    bookService.update(books);
    Map<String,Object> map=new HashMap<String,Object>();
    map.put("msg","200");
    return map;
  }

  //删除图书
  @RequestMapping("/bookdel")
  @ResponseBody
  public Map<String,Object> bookdel(HttpServletRequest req, HttpServletResponse res)
  {
    int bookID=Integer.parseInt(req.getParameter("bookID"));
    System.out.println(bookID);
    bookService.del(bookID);
    Map<String,Object> map=new HashMap<String,Object>();
    map.put("msg","200");
    return map;
  }

  //删除图书1
  @RequestMapping("/bookdel1")
  @ResponseBody
  public Map<String,Object> bookdel1(@RequestBody int[] bookIDs)
  {
    for (int bookID : bookIDs) {
      bookService.del(bookID);
    }
    Map<String,Object> map=new HashMap<String,Object>();
    map.put("msg","200");
    return map;
  }
}