写这个小练习的目的是巩固最近所学的知识,它的功能是将数据库的数据通过前端展示出来,并且在页面上有增、删、改的操作。界面如下所示:
注意:为了方便理解,这里所有配置文件和Java类中的代码都是一次性的展示完,并要仔细观看理解代码中的注释部分。
实现需要软件:
MySQL
sqlyog
IDEA
Tomcat
项目分布:
1.首先在sqlyog中创建数据库
打开sqlyog,创建数据库,创建表books,表数据如下:
2.打开IDEA,创建一个maven的新项目
在pom.xml中需要导入一系列的包
<?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.muzili</groupId>
<artifactId>SSMbuild1</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>SSMbuild1 Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.7</maven.compiler.source>
<maven.compiler.target>1.7</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<!--mybatis的包-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
<!--Mybatis部分完结-->
<!--Spring部分-->
<!--mybatis-srping整合包-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
<!--第三方数据源:c3p0-->
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5.2</version>
</dependency>
<!--Spring相关的-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.24.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>4.3.24.RELEASE</version>
</dependency>
<!--Spring部分完结-->
<!--SpringMVC需要的前端和Servlet包-->
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
</dependency>
<!--jsp-->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
</dependency>
<!--jstl-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.properties</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
<finalName>SSMbuild1</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
然后在IDEA中连接刚创建的数据库;
创建database.properties文件
jdbc.Driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=true&useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456
创建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>
<typeAliases>
<package name="com.muzili.pojo"/>
</typeAliases>
<mappers>
<mapper resource="com/muzili/dao/BookMapper.xml"/>
</mappers>
</configuration>
创建spring的相关配置文件,这里为了方便理解,分别创建了spring-dao.xml、spring-service.xml、spring-mvc.xml文件,最后将这三合并到applicationContext.xml中。
aplicationContext.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">
<import resource="classpath:spring/spring-dao.xml"/>
<import resource="classpath:spring/spring-mvc.xml"/>
<import resource="classpath:spring/spring-service.xml"/>
</beans>
spring-dao.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">
<!--整合mybatis-->
<!--1.关联数据库文件-->
<context:property-placeholder location="classpath:database.properties"/>
<!--2.数据库连接池
DBCP:半自动化操作的,不能自动连接数据库
C3P0:自动化操作,(自动的加载配置文件,并且自动设置到对象中)
DataSource
-->
<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"/>
<!--关闭连接后不自动提交-->
<property name="autoCommitOnClose" value="false"/>
<!--获取连接超时时间-->
<property name="checkoutTimeout" value="10000"/>
<!--获取连接失败,重新尝试次-->
<property name="acquireRetryAttempts" value="2"/>
</bean>
<!--3.sqlSessionFactory-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<!--管理Mybatis-->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
</bean>
<!--4.注册dao层bean-->
<!--动态实现dao接口注入Spring容器中-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--绑定sqlSessionFactory-->
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
<!--扫描包-->
<property name="basePackage" value="com.muzili.dao"/>
</bean>
</beans>
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">
<!--扫描包-->
<context:component-scan base-package="com.muzili.service"/>
<!--手动配置bean-->
<bean id="bookServiceImpl" class="com.muzili.service.BookServiceImpl">
<property name="bookDao" ref="bookDao"/>
</bean>
<!--事务管理-->
<bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!--DataSource-->
<property name="dataSource" ref="dataSource"/>
</bean>
</beans>
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
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--扫描包-->
<context:component-scan base-package="com.muzili.controller"/>
<!--静态资源过滤-->
<mvc:default-servlet-handler/>
<!--注解驱动-->
<mvc:annotation-driven/>
<!--视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
配置web下的web.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<!--DispatchServlet-->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--关联Spring配置文件-->
<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>
<!--字符编码过滤-->
<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>
</web-app>
配置文件编写完,下面创建一个Books实体类(这里的属性名最好与数据库中的保持一致)
package com.muzili.pojo;
public class Books {
private int bookID;
private String bookName;
private int bookCounts;
private String detail;
public Books() {
}
public Books(int bookID, String bookName, int bookCounts, String detail) {
this.bookID = bookID;
this.bookName = bookName;
this.bookCounts = bookCounts;
this.detail = detail;
}
public int getBookID() {
return bookID;
}
public void setBookID(int bookID) {
this.bookID = bookID;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}
public int getBookCounts() {
return bookCounts;
}
public void setBookCounts(int bookCounts) {
this.bookCounts = bookCounts;
}
public String getDetail() {
return detail;
}
public void setDetail(String detail) {
this.detail = detail;
}
@Override
public String toString() {
return "Books{" +
"bookID=" + bookID +
", bookName='" + bookName + '\'' +
", bookCounts=" + bookCounts +
", detail='" + detail + '\'' +
'}';
}
}
在dao层创建BookDao和BookMapper.xml
package com.muzili.dao;
import com.muzili.pojo.Books;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Controller;
import java.util.List;
public interface BookDao {
//增加一个Books
int addBook(Books books);
//根据id删除Books
int deleteBookByID(@Param("bookID") int id);
//更新Books
int updateBook(Books books);
//根据id查询Book
Books queryBookByID(@Param("bookID") int id);
//查看全部的Book
List<Books> queryAllBook();
}
<?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.muzili.dao.BookDao">
<!--//增加一个Books-->
<insert id="addBook" parameterType="Books">
insert into ssmbuild.books (bookID,bookName,bookCounts,detail) values
(#{bookID},#{bookName},#{bookCounts},#{detail})
</insert>
<!--//根据id删除Books-->
<delete id="deleteBookByID" parameterType="int">
delete from ssmbuild.books where bookID = #{bookID}
</delete>
<!--//更新Books-->
<update id="updateBook" parameterType="Books">
update ssmbuild.books
set bookName = #{bookName},bookCounts=#{bookCounts},detail = #{detail}
where bookID = #{bookID}
</update>
<!--//根据id查询Book-->
<select id="queryBookByID" resultType="Books">
select * from ssmbuild.books
where bookID = #{bookID}
</select>
<!--//查看全部的Book-->
<select id="queryAllBook" resultType="Books">
select * from ssmbuild.books
</select>
</mapper>
编写业务层service中的BookService和BookServiceImpl:
public interface BookService {
//增加一个Books
int addBook(Books books);
//根据id删除Books
int deleteBookByID(int id);
//更新Books
int updateBook(Books books);
//根据id查询Book
Books queryBookByID(int id);
//查看全部的Book
List<Books> queryAllBook();
}
package com.muzili.service;
import com.muzili.dao.BookDao;
import com.muzili.pojo.Books;
import java.util.List;
public class BookServiceImpl implements BookService {
//组合Dao
private BookDao bookDao;
public void setBookDao(BookDao bookDao) {
this.bookDao = bookDao;
}
@Override
public int addBook(Books books) {
return bookDao.addBook(books);
}
@Override
public int deleteBookByID(int id) {
return bookDao.deleteBookByID(id);
}
@Override
public int updateBook(Books books) {
return bookDao.updateBook(books);
}
@Override
public Books queryBookByID(int id) {
return bookDao.queryBookByID(id);
}
@Override
public List<Books> queryAllBook(){
return bookDao.queryAllBook();
}
}
编写控制类BookController:
package com.muzili.controller;
import com.muzili.pojo.Books;
import com.muzili.service.BookService;
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.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;
@Controller
@RequestMapping("/book")
public class BookController {
@Autowired
@Qualifier("bookServiceImpl")
private BookService bookService;
//展示全部的书籍
@RequestMapping("/allBook")
public String list(Model model){
List<Books> list = bookService.queryAllBook();
model.addAttribute("list",list);
return "allBook";
}
//跳转到新增书籍页面
@RequestMapping("/toAddBook")
public String toAddBook(){
return "addBook";
}
//增加书籍页面
@RequestMapping("/addBook")
public String addBook(Books books){
System.out.println("调试信息addBook===="+books);
bookService.addBook(books);
return "redirect:/book/allBook"; //重定向到首页
}
//跳转到修改页面
@RequestMapping("/toUpdateBook")
public String toUpdateBook(int id,Model model){
Books books = bookService.queryBookByID(id);
System.out.println("调试信息toUpdateBook===="+books);
model.addAttribute("book",books);
return "updateBook";
}
@RequestMapping("/updateBook")
public String updateBook(Books books,Model model){
System.out.println("调试信息updateBook===="+books);
bookService.updateBook(books);
//更新最新的书籍
Books books1 = bookService.queryBookByID(books.getBookID());
model.addAttribute("books",books1);
System.out.println("修改后的书籍===="+books1);
return "redirect:/book/allBook"; //重定向到首页
}
//删除书籍,请使用restful风格
@RequestMapping("/del/{bookID}")
public String deleteBook(@PathVariable("bookID") int id){
bookService.deleteBookByID(id);
return "redirect:/book/allBook"; //重定向到首页
}
}
首页展示页面:index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
<style>
a{
text-decoration: none;
color: skyblue;
font-size: 18px;
}
h2{
width: 180px;
height: 38px;
margin: 100px auto;
text-align: center;
line-height: 38px;
background: deepskyblue;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>
<a href="${pageContext.request.contextPath}/book/allBook">进入书籍展示页面</a>
</h2>
</body>
</html>
前端展示所有书籍页面:addBook.jsp (这里引用了bookstarp中的样式)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--使用JSTL标签--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>全部书籍</title>
<%--引用BootStarp--%>
<link href="https://cdn.staticfile.org/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>
<%--增加--%>
<div class="row">
<div class="col-md-4 column">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增</a>
</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="book" items="${list}">
<tr>
<td>${book.getBookID()}</td>
<td>${book.getBookName()}</td>
<td>${book.getBookCounts()}</td>
<td>${book.getDetail()}</td>
<td>
<a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.getBookID()}">更改</a>
<a href="${pageContext.request.contextPath}/book/del/${book.getBookID()}">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
添加书籍的页面:addBook.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>新增书籍</title>
<%--引用BootStarp--%>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<%--显示要增加的书籍信息--%>
<h1>增加书籍</h1>
<form method="post" action="${pageContext.request.contextPath}/book/addBook">
书籍名称:<input type="text" name="bookName"> <br/><br/>
书籍数量:<input type="text" name="bookCounts"> <br/><br/>
书籍描述:<input type="text" name="detail"> <br/><br/>
<input type="submit"/>
</form>
</body>
</html>
修改书籍的页面:updateBook.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>修改书籍</title>
</head>
<body>
<%--书籍原来的信息,修改按钮--%>
<h1>修改书籍信息</h1>
<form action="${pageContext.request.contextPath}/book/updateBook" method="post">
<%--id--%>
<input type="hidden" name="bookID" value="${book.getBookID()}"/>
书籍名称:<input type="text" name="bookName" value="${book.getBookName()}"> <br/>
书籍数量:<input type="text" name="bookCounts" value="${book.getBookCounts()}"> <br/>
书籍描述:<input type="text" name="detail" value="${book.getDetail()}"> <br/>
<input type="submit" value="提交"/>
</form>
所有文件编写完毕,关联tomcat后,便可以运行。