1、创建一个存放书籍数据的数据库表
CREATE TABLE `books` (
`id` INT(10) NOT NULL AUTO_INCREMENT COMMENT '书id',
`bookName` VARCHAR(100) NOT NULL COMMENT '书名',
`numbers` INT(11) NOT NULL COMMENT '数量',
`detail` VARCHAR(200) NOT NULL COMMENT '描述',
KEY `id` (`bookID`)
) ENGINE=INNODB DEFAULT CHARSET=utf8
INSERT INTO `books` VALUES
(1,'Java',1,'从入门到放弃'),
(2,'MySQL',10,'从删库到跑路'),
(3,'Linux',5,'从进门到进牢');
2、创建一个maven项目
2.1、导入相关依赖
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.wust</groupId>
<artifactId>ssm</artifactId>
<version>1.0-SNAPSHOT</version>
<!--需要导入的依赖:
junit
数据库驱动
连接池
servlet
jsp
mybatis
mybatis-spring
spring
-->
<dependencies>
<!--junit-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13.1</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-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<!--JSP-->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
</dependency>
<!--Jstl-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!--Mybatis & mybatis-spring-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>2.0.6</version>
</dependency>
<!--spring-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.9.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.9.RELEASE</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.20</version>
</dependency>
<!--fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
</dependencies>
<!--静态资源编译问题-->
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.properties</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
</project>
2.2、mybatis配置文件(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>
<!--配置日志-->
<settings>
<setting name="logImpl" value="STDOUT_LOGGING"/>
</settings>
<!--开启别名-->
<typeAliases>
<package name="com.wust.bean"/>
</typeAliases>
<!--配置数据源的配置交给spring做-->
<mappers>
<mapper class="com.wust.mapper.BookMapper"/>
</mappers>
</configuration>
2.3、数据库配置文件(db.properties)
jdbc.driver=com.mysql.jdbc.Driver
#如果用的是mysql 8.0+的版本,还需要配置时区 &serverTimeZone=Asia/ShangHai
jdbc.url=jdbc:mysql://localhost:3306/test?useSSL=true&useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=root
2.3、springmvc配置文件(springmvc-config.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
https://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
https://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd">
<!--注解驱动-->
<mvc:annotation-driven>
<!--配置消息转换器,防止中文乱码,因为StringHttpMessageConverter默认的编码设置为ISO-8859-1-->
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg index="0" value="UTF-8"/>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!--静态资源过滤,只能访问根目录下除WEB-INF目录下的静态资源-->
<mvc:default-servlet-handler/>
<!-- <mvc:resources mapping="/img/**" location="/WEB-INF/static/img/"/>-->
<mvc:resources mapping="/static/js/**" location="/WEB-INF/static/js/"/>
<!--扫描包-->
<!-- <context:component-scan base-package="com.wust.controller"/>-->
<!--视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
2.4、spring整合mybatis(dao层),springmvc,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"
xsi:schemaLocation="http://www.springframework.org/schema/beans
https://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd">
<!--导入springmvc-config.xml-->
<import resource="springmvc-config.xml"/>
<!--关联数据库配置文件-->
<context:property-placeholder location="classpath:db.properties"/>
<!--扫描包,通过注解注册得到IOC容器中-->
<context:component-scan base-package="com.wust"/>
<!--============================spring整合dao层===============================-->
<!--配置数据源连接池
dbcp:半自动化操作,不能自动连接
c3p0: 自动化操作(自动化加载配置文件,并且可以自动设置到对象中)
druid
-->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
<!-- c3p0连接池的私有属性 -->
<property name="maxPoolSize" value="30"/>
<property name="minPoolSize" value="10"/>
<!-- 关闭连接后不自动commit -->
<property name="autoCommitOnClose" value="false"/>
<!-- 获取连接超时时间 -->
<property name="checkoutTimeout" value="10000"/>
<!-- 当获取连接失败重试次数 -->
<property name="acquireRetryAttempts" value="2"/>
</bean>
<!--
配置SqlSessionFactory
在不配置mapper(dao)接口的扫描包时,注入SqlSessionFactoryBean需要写BookMapper接口的实现类
并且继承SqlSessionDaoSupport类通过getSqlSession方法获得SqlSession对象
或者注入SqlSessionTemplate,使用组合的方式获得SqlSessionTemplate对象,其等同于SqlSession对象
-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<!--绑定Mybatis的配置文件 -->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
<!--绑定mapper映射文件 此处可以省略,可以在mybatis-config.xml中配置-->
<!--<property name="mapperLocations" value="com/wust/mapper/*.xml"/>-->
</bean>
<!--配置mapper(dao)接口的扫描包,动态实现了mapper接口实现类注入到IOC容器中
,因此不需要首先BookMapper实现类通过继承SqlSessionDaoSupport或者使用组合SqlSessionTemplate
对象的方式获得SqlSession对象(例如博文spring整合mybatis没有配置这个,需要手写XxxMapper接口的实现类XxxMapperImpl)-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--注入SqlSessionFactory-->
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
<!--要扫描的包,-->
<property name="basePackage" value="com.wust.mapper"/>
</bean>
<!--============================spring整合业务层===============================-->
<!--声明式事务配置
可以通过AOP实现(这里省略)
详情见博文spring整合mybatis
-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!--注入数据源-->
<property name="dataSource" ref="dataSource"/>
</bean>
</beans>
2.5、配置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>
<!-- 加载总的spring配置文件的位置-->
<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>
<!-- 配置字符过滤器,防止表单提交或者下载上传文件出现中文乱码-->
<filter>
<filter-name>characterEncoding</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>characterEncoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 配置session过期时间为15分钟-->
<session-config>
<session-timeout>15</session-timeout>
</session-config>
</web-app>
3、编写dao层、service层、controller层代码
3.1、dao层
- BookMapper.java
package com.wust.mapper;
import com.wust.bean.Books;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
public interface BookMapper {
//增加
int addBook(Books books);
//删除
int deleteBookById(@Param("id")int id);
//更新
int updateBook(Books books);
//查询单个
Books getBookById(@Param("id")int id);
//查询所有
List<Books> getAllBooks();
//模糊查询
List<Books> getBooksByName(@Param("bookName") String bookName);
//通过书名查询单本书籍
Books getBookByAjax(@Param("bookName") String bookName);
}
- BookMapper.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="com.wust.mapper.BookMapper">
<insert id="addBook" parameterType="Books">
insert into books values (#{id},#{bookName},#{numbers},#{detail})
</insert>
<delete id="deleteBookById" parameterType="int">
delete from books where id = #{id}
</delete>
<update id="updateBook" parameterType="Books">
update books set bookName = #{bookName},numbers = #{numbers},detail = #{detail}
where id = #{id}
</update>
<select id="getBookById" parameterType="int" resultType="Books">
select * from books where id = #{id}
</select>
<select id="getAllBooks" resultType="Books">
select * from books
</select>
<select id="getBooksByName" resultType="Books">
select * from books where bookName like concat('%',#{bookName},'%')
</select>
<select id="getBookByAjax" resultType="Books">
select * from books where bookName = #{bookName}
</select>
</mapper>
- BookService.java
package com.wust.service;
import com.wust.bean.Books;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface BookService {
//增加
int addBook(Books books);
//删除
int deleteBookById(int id);
//更新
int updateBook(Books books);
//查询单个
Books getBookById(int id);
//查询所有
List<Books> getAllBooks();
List<Books> getBooksByName(String bookName);
Books getBookByAjax(@Param("bookName") String bookName);
}
- BookServiceImpl.java
package com.wust.service;
import com.wust.bean.Books;
import com.wust.mapper.BookMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookMapper bookMapper;
@Override
public int addBook(Books books) {
return bookMapper.addBook(books);
}
@Override
public int deleteBookById(int id) {
return bookMapper.deleteBookById(id);
}
@Override
public int updateBook(Books books) {
return bookMapper.updateBook(books);
}
@Override
public Books getBookById(int id) {
return bookMapper.getBookById(id);
}
@Override
public List<Books> getAllBooks() {
return bookMapper.getAllBooks();
}
@Override
public List<Books> getBooksByName(String bookName) {
return bookMapper.getBooksByName(bookName);
}
@Override
public Books getBookByAjax(String bookName) {
return bookMapper.getBookByAjax(bookName);
}
}
- BookController.java
package com.wust.controller;
import com.alibaba.fastjson.JSON;
import com.mysql.jdbc.StringUtils;
import com.sun.deploy.net.HttpResponse;
import com.wust.bean.Books;
import com.wust.service.BookService;
import jdk.nashorn.internal.runtime.JSONFunctions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@Controller
public class BookController {
@Autowired
private BookService bookService;
@RequestMapping("/books")
public String books(Model model){
List<Books> allBooks = bookService.getAllBooks();
model.addAttribute("books",allBooks);
return "books";
}
@RequestMapping("/add")
public String add(){
return "add";
}
@RequestMapping("/addBook")
public String addBook(Books books){
bookService.addBook(books);
return "redirect:/books";
}
@RequestMapping("/modify/{id}")
public String modify(@PathVariable("id") int id,Model model){
model.addAttribute("books",bookService.getBookById(id));
return "modify";
}
@RequestMapping("/modifyBook")
public String modifyBook(Books books){
bookService.updateBook(books);
return "redirect:/books";
}
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") int id){
bookService.deleteBookById(id);
return "redirect:/books";
}
@RequestMapping("/query")
public String query(@RequestParam String bookName, Model model){
List<Books> allBooks = bookService.getBooksByName(bookName);
model.addAttribute("books",allBooks);
return "books";
}
@RequestMapping("/ajax")
@ResponseBody
public String query(String bookName) {
String data;
Books books = bookService.getBookByAjax(bookName);
if (books != null)
data = "书名已存在";
else data = "ok";
return data;
}
@RequestMapping("/json")
@ResponseBody
public String json() {
Books book = new Books(1,"设计模式",12,"设计模式真香");
String str = JSON.toJSONString(book);
return str;
}
@RequestMapping("/test")
@ResponseBody
public String test(String name){
System.out.println(name);
return name;
}
}
4、编写视图层代码
- books.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>所有书籍</title>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1><small><a href="${pageContext.request.contextPath}/books">书籍列表</a></small></h1>
</div>
</div>
<div class="row">
<div class="col-md-4 column" >
<a href="${pageContext.request.contextPath}/add" class="btn btn-primary">添加书籍</a>
</div>
<div class="col-md-4 column" style="position: relative;float: right">
<form class="form" action="${pageContext.request.contextPath}/query" method="post">
<div style="position: relative;float: right">
<input type="submit" class="btn btn-primary" value="submit"/>
</div>
<div style="position: relative;float: right">
<input type="text" name="bookName" class="form-control" placeholder="请输入要查询的书籍名称"/>
</div>
</form>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped">
<tr>
<th>id</th>
<th>类型</th>
<th>数量</th>
<th>描述</th>
<th>操作</th>
</tr>
<c:forEach items="${books}" var="book">
<tr class="active">
<td>${book.id}</td>
<td>${book.bookName}</td>
<td>${book.numbers}</td>
<td>${book.detail}</td>
<td>
<a href="${pageContext.request.contextPath}/modify/${book.id}" class="btn btn-danger">修改</a>
<a href="${pageContext.request.contextPath}/delete/${book.id}" class="btn btn-danger">删除</a>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
</body>
</html>
- add.jsp
<%--
Created by IntelliJ IDEA.
User: mrzhu
Date: 2020/12/22
Time: 17:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>增加书籍</title>
<link href="https://cdn.bootcss.com/twitter-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}/addBook" method="post">
<div class="form-group">
<label for="bookName">书籍名称</label>
<input type="text" class="form-control" name="bookName" placeholder="bookName" id="bookName">
</div>
<div class="form-group">
<label for="numbers">书籍数量</label>
<input type="text" class="form-control" name="numbers" placeholder="numbers" id="numbers">
</div>
<div class="form-group">
<label for="detail">书籍描述</label>
<input type="text" class="form-control" name="detail" placeholder="detail" id="detail">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
- modify.jsp
<%--
Created by IntelliJ IDEA.
User: mrzhu
Date: 2020/12/22
Time: 17:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>增加书籍</title>
<link href="https://cdn.bootcss.com/twitter-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}/modifyBook" method="post">
<input type="hidden" name="id" value="${books.id}" />
<div class="form-group">
<label for="bookName">书籍名称</label>
<input type="text" class="form-control" name="bookName" value="${books.bookName}" id="bookName">
</div>
<div class="form-group">
<label for="numbers">书籍数量</label>
<input type="text" class="form-control" name="numbers" value="${books.numbers}" id="numbers">
</div>
<div class="form-group">
<label for="detail">书籍描述</label>
<input type="text" class="form-control" name="detail" value="${books.detail}" id="detail">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
- ajax.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script>
function f() {
$.post({
url:"${pageContext.request.contextPath}/ajax",
data:{"bookName":$("#name").val()},
success:function (data) {
if (data == "ok"){
$("#tip").css("color","green");
}else {
$("#tip").css("color","red");
}
$("#tip").html(data);
}
});
}
</script>
</head>
<body>
书名:<input type="test" id="name" onblur="f()"/>
<span id="tip"></span><br>
<form action="${pageContext.request.contextPath}/test" method="get">
<input type="test" name="name"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
ajax相关用法
jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数