使用SSM框架實現增刪改查

 

springmvc的理解:https://blog.csdn.net/qq_41879385/article/details/82885516

本項目的jsp頁面使用bootstrap前端框架：https://blog.csdn.net/qq_41879385/article/details/82431238

編譯器eclipse，數據庫MySQL5.5.25，jdk1.8，tomcat7.0

MySQL5.5.25安裝教程：https://mp.csdn.net/postedit/82215828

在項目中用到的二維碼：https://blog.csdn.net/qq_41879385/article/details/81625354

 整合項目的時候，整個頁面會比較長，所以難免會出現一些不耐煩，沒耐心的看，旁邊就有我的QQ號啊，直接找我要源碼不就行了哈哈。不過我還是建議耐心靜下心來看，真的對你幫助很大，要源碼的這種方式應該屬於初學者。

項目名爲：小說書籍網，有問題或者想找我要源碼的，都可以到旁邊有個我的聯繫方式。備註CSDN博客。

一、目錄結構：

 

二、數據庫

數據庫設計，數據腳本下載：https://download.csdn.net/download/qq_41879385/10696480，因爲博客已經沒有免費下載的功能了，所以C幣只選最少的，1個就行。

 三、項目開始

在pojo包中創建Novel.java（代表novel表）、Coltype.java（代表coltype），當然，裏面的字段、類型跟這兩張表是一樣的。

但是我還要再加一張表：PageNovel.java，這個是分頁的表，呃，實體類的話大家都會，我這裏就不在貼出來了。貼出一個分頁的類：

PageNovel.java：

package cn.item.pojo;

public class PageNovel {
	private String novelName;
	private String novelColumn;
	private Integer page = 1;
	private Integer start;
	private Integer size = 10;
	
	public String getNovelName() {
		return novelName;
	}
	public void setNovelName(String novelName) {
		this.novelName = novelName;
	}
	public String getNovelColumn() {
		return novelColumn;
	}
	public void setNovelColumn(String novelColumn) {
		this.novelColumn = novelColumn;
	}
	public Integer getPage() {
		return page;
	}
	public void setPage(Integer page) {
		this.page = page;
	}
	public Integer getStart() {
		return start;
	}
	public void setStart(Integer start) {
		this.start = start;
	}
	public Integer getSize() {
		return size;
	}
	public void setSize(Integer size) {
		this.size = size;
	}

}

在Java Resources下創建一個與src同路徑的文件夾config，注意包的名字

在config下創建ApplicationContext-dao.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
	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-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

	<!-- 加載配置文件 -->
	<context:property-placeholder location="classpath:db.properties" />
	<!-- 數據庫連接池 -->
	<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"
		destroy-method="close">
		<property name="driverClassName" value="${jdbc.driver}" />
		<property name="url" value="${jdbc.url}" />
		<property name="username" value="${jdbc.username}" />
		<property name="password" value="${jdbc.password}" />
		<property name="maxActive" value="10" />
		<property name="maxIdle" value="5" />
	</bean>
	
	<!-- mapper配置 -->
	<!-- 讓spring管理sqlsessionfactory 使用mybatis和spring整合包中的 -->
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<!-- 數據庫連接池 -->
		<property name="dataSource" ref="dataSource" />
		<!-- 加載mybatis的全局配置文件 -->
		<property name="configLocation" value="classpath:SqlMapConfig.xml" />
	</bean>
	
	<!-- 配置Mapper掃描器 -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="cn.item.dao"/>
	</bean>

</beans>

ApplicationContext-service.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
	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-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd 
http://www.springframework.org/schema/tx 
http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

	<!-- @Service掃描 -->
	<context:component-scan base-package="cn.item.service"></context:component-scan>
</beans>

ApplicationContext-trans.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
	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-4.0.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
	http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd 
http://www.springframework.org/schema/tx 
http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
	http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">

	<!-- 事務管理器 -->
	<bean id="transactionManager"
		class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<!-- 數據源 -->
		<property name="dataSource" ref="dataSource" />
	</bean>
	
	<!-- 通知 -->
	<tx:advice id="txAdvice" transaction-manager="transactionManager">
		<tx:attributes>
			<!-- 傳播行爲 -->
			<tx:method name="save*" propagation="REQUIRED" />
			<tx:method name="insert*" propagation="REQUIRED" />
			<tx:method name="delete*" propagation="REQUIRED" />
			<tx:method name="update*" propagation="REQUIRED" />
			<tx:method name="find*" propagation="SUPPORTS" read-only="true" />
			<tx:method name="get*" propagation="SUPPORTS" read-only="true" />
		</tx:attributes>
	</tx:advice>
	
	<!-- 切面 -->
	<aop:config>
		<aop:advisor advice-ref="txAdvice"
			pointcut="execution(* cn.item.service.*.*(..))" />
	</aop:config>
	
</beans>

db.properties：

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/你的表名寫這?characterEncoding=utf-8
jdbc.username=root
jdbc.password=你的密碼寫這

log4j.properties：

# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

SpringMvc.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    
    <!-- 引入字典資源文件 -->
    <context:property-placeholder location="classpath:resource.properties"/>
    
    <!-- @Controller註解掃描 -->
    <context:component-scan base-package="cn.item.controller"></context:component-scan>
    
    <!-- 註解驅動:
    		替我們顯示的配置了最新版的註解的處理器映射器和處理器適配器 -->
    <mvc:annotation-driven conversion-service="conversionService"></mvc:annotation-driven>
    
    <!-- 配置視圖解析器 
	作用:在controller中指定頁面路徑的時候就不用寫頁面的完整路徑名稱了,可以直接寫頁面去掉擴展名的名稱
	-->
	<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="conversionService"
		class="org.springframework.format.support.FormattingConversionServiceFactoryBean">

	</bean>
	
	
</beans>

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

 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">
  <display-name>NovelBook</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:ApplicationContext-*.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <servlet>
    <servlet-name>springMvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:SpringMvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>springMvc</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
  <filter>
    <filter-name>CharacterEncodingFilter</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>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

以上的是配置文件，其實我都是直接複製的，然後在修改一下里面的一些包名。注意包名

業務層：service：

NovelService.java：

package cn.item.service;

import java.util.List;

import cn.item.pojo.Coltype;
import cn.item.pojo.Novel;
import cn.item.pojo.PageNovel;

public interface NovelService {
	
	public List<Coltype> findDictByCode(String code);  
	
	public List<Novel> findCustomerByVo(PageNovel vo);
	public Integer findCustomerByVoCount(PageNovel vo);

	public Novel findNovelById(Long id);
	
	public void updateNovelById(Novel novel);
	
	public void deleteNovelById(long id);
	
	public void insertNovelById(Novel novel);

}

NovelServiceImpl.java：

package cn.item.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.item.dao.DictMapper;
import cn.item.dao.NovelMapping;
import cn.item.pojo.Coltype;
import cn.item.pojo.Novel;
import cn.item.pojo.PageNovel;

@Service
public class NovelServiceImpl implements NovelService{
	
	@Autowired
	private DictMapper dictMapper;
	@Autowired
	private NovelMapping novelMapping;
	
	@Override
	public List<Coltype> findDictByCode(String code) {
		List<Coltype> list = dictMapper.findDictByCode(code);
		return list;
	}
	
	@Override
	public List<Novel> findCustomerByVo(PageNovel vo) {
		List<Novel> list = novelMapping.findCustomerByVo(vo);
		return list;
	}

	@Override
	public Integer findCustomerByVoCount(PageNovel vo) {
		Integer count = novelMapping.findCustomerByVoCount(vo);
		return count;
	}

	@Override
	public Novel findNovelById(Long id) {
		Novel novel = novelMapping.findNovelById(id);
		return novel;
	}

	@Override
	public void updateNovelById(Novel novel) {
		novelMapping.updateNovelById(novel);
	}

	@Override
	public void deleteNovelById(long id) {
		novelMapping.deleteNovelById(id);
	}

	@Override
	public void insertNovelById(Novel novel) {
		novelMapping.insertNovelById(novel);
	}
	
}

數據訪問層：dao，也有人用Mapping，都可以：

NovelMapping.java：是小說主表的sql語句的方法，方法名是與service相同的：

package cn.item.dao;

import java.util.List;

import cn.item.pojo.Novel;
import cn.item.pojo.PageNovel;

public interface NovelMapping {
	
	public List<Novel> findCustomerByVo(PageNovel vo);
	public Integer findCustomerByVoCount(PageNovel vo);
	
	public Novel findNovelById(Long id);
	
	public void updateNovelById(Novel novel);
	
	public void deleteNovelById(long id);
	
	public void insertNovelById(Novel novel);

}

接下就寫映射文件：NovelMapping.xml：注意名稱空間不能有空格，之前有次做項目還因爲名稱空間多了一個空格，結果找了半天沒找到原因，在這裏提醒大家注意：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.item.dao.NovelMapping">
  	
	<sql id="novel_where">
		<where>
			<if test="novelName !=null and novelName !='' ">
				and a.novel_name LIKE '%${novelName}%'
			</if>
			<if test="novelColumn !=null and novelColumn !='' ">
				and a.novel_column=#{novelColumn}
			</if>
		</where>
	</sql>

	<select id="findCustomerByVo" parameterType="cn.item.pojo.PageNovel" resultType="cn.item.pojo.Novel">
		SELECT a.`novel_id`,a.`novel_name`,a.`author_name`,a.`author_Introduction`,
		a.`novel_content`,b.`col_name` novel_column
		FROM `novel` a
		LEFT JOIN `coltype` b ON a.`novel_column` = b.`col_id`
		
		<include refid="novel_where"></include>
		
		LIMIT #{start},#{size}
		
	</select>
	
	<select id="findCustomerByVoCount" parameterType="cn.item.pojo.PageNovel" resultType="int">
		SELECT COUNT(*)
		FROM novel a
		LEFT JOIN coltype c ON a.novel_column = c.col_id
		<include refid="novel_where"></include>
	</select>
	
	<select id="findNovelById" parameterType="long" resultType="cn.item.pojo.Novel">
		SELECT * FROM novel WHERE novel_id=#{id}
	</select>
	
	<update id="updateNovelById" parameterType="cn.item.pojo.Novel">
		UPDATE novel
		<set>
			<if test="novel_name !=null and novel_name !='' ">
				novel_name=#{novel_name},
			</if>
			<if test="novel_column !=null and novel_column !='' ">
				novel_column=#{novel_column},
			</if>
			<if test="author_name !=null and author_name !='' ">
				author_name=#{author_name},
			</if>
			<if test="author_Introduction !=null and author_Introduction !='' ">
				author_Introduction=#{author_Introduction},
			</if>
			<if test="novel_content !=null and novel_content !='' ">
				novel_content=#{novel_content},
			</if>
		</set>
		WHERE novel_id=#{novel_id}
	</update>
	
	<delete id="deleteNovelById" parameterType="long">
		delete from novel where novel_id =#{id}
	</delete>
	
	<insert id="insertNovelById" parameterType="cn.item.pojo.Novel">
		INSERT INTO `novel`(`novel_name`,`novel_column`,`author_name`,`author_Introduction`,`novel_content`)
		VALUE(#{novel_name},#{novel_column},#{author_name},#{author_Introduction},#{novel_content});
	</insert>
	
</mapper>

接下就寫DictMapper.java，這個類是爲了下拉做的：

package cn.item.dao;

import java.util.List;

import cn.item.pojo.Coltype;

public interface DictMapper {
	public List<Coltype> findDictByCode(String code);
	
}

和DictMapper.java的映射文件：DictMapper.xml：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.item.dao.DictMapper">
	<select id="findDictByCode" parameterType="string" resultType="cn.item.pojo.Coltype">
		select * from coltype a WHERE a.col_enable=1 AND a.col_code=#{code} ORDER BY a.col_sort
	</select>
</mapper>

那麼，實體類、數據訪問層、業務層都寫好了，接下可以寫控制層：NovelController.java：

package cn.item.controller;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.itcast.utils.Page;
import cn.item.dao.NovelMapping;
import cn.item.pojo.Coltype;
import cn.item.pojo.Novel;
import cn.item.pojo.PageNovel;
import cn.item.service.NovelService;

@Controller
@RequestMapping("/novel")
public class NovelController {
	@Resource
	private NovelMapping novelMapping;
	
	@Autowired
	private NovelService novelService;
	
	@Value("${novel.col.name}")
	private String column;
	
	@RequestMapping("/list")
	public String list(PageNovel vo,Model model) throws Exception{
		
		//小說類型
		List<Coltype> columnList=novelService.findDictByCode(column);
		
		if(vo.getNovelName()!=null){
			vo.setNovelName(new String(vo.getNovelName().getBytes("iso8859-1"),"utf-8"));
		}
		if(vo.getPage()==null){
			vo.setPage(1);
		}
		
		vo.setStart((vo.getPage() - 1) * vo.getSize());
		
		//查詢數據庫的全部數據
		List<Novel> resultList = novelService.findCustomerByVo(vo);
		Integer count = novelService.findCustomerByVoCount(vo);
		
		Page<Novel> page= new Page<Novel>();
		page.setTotal(count);			//總條數
		page.setSize(vo.getSize()); 	//每頁顯示條數
		page.setPage(vo.getPage());		//總頁數
		page.setRows(resultList);		//分頁的數據
		
		model.addAttribute("page", page);
		
		//下拉菜單
		model.addAttribute("fromType", columnList);
		
		model.addAttribute("novelName", vo.getNovelName());
		model.addAttribute("novelcolumn", vo.getNovelColumn());
		
		return "novel";
	}
	
	@RequestMapping("/detail")
	@ResponseBody
	public Novel detail(Long id) throws Exception{
		Novel novel = novelService.findNovelById(id);
		return novel;
	}
	
	@RequestMapping("/update")
	public String update(Novel novel) throws Exception{
		novelService.updateNovelById(novel);
		return "novel";
	}
	
	@RequestMapping("/delete")
	public String delete(long id) throws Exception{
		novelService.deleteNovelById(id);
		return "novel";
	}
	
	@RequestMapping("/insert")
	public String insert(Novel novel) throws Exception{
		novelService.insertNovelById(novel);
		return "novel";
	}
	
}

嗯，控制層就這麼一個：接下來可以寫jsp了。

第一步，在WEB-INF下創建jsp文件夾，裏面創建novel.jsp，在SpringMvc.xml中已經配置完整視圖解析器了。

在novel.jsp頭部創建c標籤：

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

下面是完整的jsp頁面代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>網站</title>

<style type="text/css">
		#qrcode-wrapper{
			position:absolut;
	        left:80px;
	        top:500px;
		}
</style>

<!-- Bootstrap Core CSS -->
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet">

<!-- DataTables CSS -->
<link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet"
	type="text/css">
<link href="<%=basePath%>css/boot-crm.css" rel="stylesheet"
	type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    

</head>

<body>

	<div id="wrapper">
	
		<div id="qrcode-wrapper" beoder="1">
			<div id="qrcodeCanvas"></div>
		</div>
		
		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-wrapper">小說書籍網</h1>
				</div>
				
				<!-- /.col-lg-12 -->
			</div>
			<!-- /.row -->
			
			<div class="panel panel-default">
				<div class="panel-body">
					<form class="form-inline" action="${pageContext.request.contextPath }/novel/list.action" method="get">
						<div class="form-group">
							<label for="novelauthorname">小說名稱</label>
							<input type="text" class="form-control" id="novelauthorname" value="${novelName}" name="novelName"></input>
						</div>
						&nbsp;
						<div class="form-group">
							<label for="novelColumnFrom">選擇小說類型</label> 
							<select	class="form-control" id="novelColumnFrom" name="novelColumn">
								<option value="">--請選擇--</option>
								<c:forEach items="${fromType}" var="item">
									<option value="${item.col_id}"<c:if test="${item.col_id == novelColumn}"> selected</c:if>>${item.col_name }</option>
								</c:forEach>
							</select>
						</div>
						<button type="submit" class="btn btn-primary">查詢</button>
						<div class="btn btn-primary" data-toggle="modal" data-target="#novelInsert" onclick="editNovel(${row.zeng_id})">新增小說</div>			
					</form>
				</div>
			</div>
			
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">小說書籍網</div>
						<!-- /.panel-heading -->
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>ID</th>
									<th>小說名稱</th>
									<th>所屬欄目</th>
									<th>小說作者</th>
									<th>作者簡介</th>
									<th>小說摘要</th>
									<th>操作</th>
								</tr>
							<!--  </thead>-->
							<tbody>
								<c:forEach items="${page.rows}" var="row">
									<tr>
										<td>${row.novel_id}</td>
										<td>${row.novel_name}</td>
										<td>${row.novel_column}</td>
										<td>${row.author_name}</td>
										<td>${row.author_Introduction}</td>
										<td>${row.novel_content}</td>
										<td>
											<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#novelUpdate" onclick="editNovel(${row.novel_id})">修改</a>
											<a href="#" class="btn btn-danger btn-xs" onclick="deleteNovel(${row.novel_id})">刪除</a>
										</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
						<div class="col-md-12 text-right">
							<itcast:page url="${pageContext.request.contextPath }/novel/list.action" />
						</div>
						<!-- /.panel-body -->
					</div>
					<!-- /.panel -->
				</div>
				<!-- /.col-lg-12 -->
			</div>
		</div>
		<!-- /#page-wrapper -->

	</div>
	
	<!-- 修改小說對話框 -->
	<div class="modal fade" id="novelUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<!-- 對話框頭部信息 -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改小說圖書信息</h4>
				</div>
				<!-- 對話框字段 -->
				<div class="modal-body">
					<form class="form-horizontal" id="edit_novel_form">
					
						<input type="hidden" id="edit_novel_id" name="novel_id"/>
						<div class="form-group">
							<label for="edit_novel_Name" class="col-sm-2 control-label">小說名稱</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_novel_Name" placeholder="小說名稱" name="novel_name">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_novelColumnFrom" style="float:left;padding:7px 15px 0 27px;">小說類型</label>
							<div class="col-sm-10">
								<select class="form-control" id="edit_novelColumnFrom" placeholder="小說類型" name="novel_column">
									<option value="">--請選擇--</option>
									<c:forEach items="${fromType}" var="item">
										<option value="${item.col_id}"<c:if test="${item.col_id == novelColumnFrom}"> selected</c:if>>${item.col_name }</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="edit_author_name" class="col-sm-2 control-label">小說作者</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_author_name" placeholder="小說作者" name="author_name">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_author_Introduction" class="col-sm-2 control-label">作者簡介</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_author_Introduction" placeholder="作者簡介" name="author_Introduction">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_novel_content" class="col-sm-2 control-label">小說內容</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_novel_content" placeholder="小說內容摘要" name="novel_content">
							</div>
						</div>
						
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
					<button type="button" class="btn btn-primary" onclick="updateNovelById()">確定修改小說書籍信息</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /#wrapper -->
	
	<!-- 添加小說對話框 -->
	<div class="modal fade" id="novelInsert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<!-- 對話框頭部信息 -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加小說書籍</h4>
				</div>
				<!-- 對話框字段 -->
				<div class="modal-body">
					<form class="form-horizontal" id="edit_novel_zeng">
						<input type="hidden" id="edit_novel_id" name="zeng_id"/>
						<div class="form-group">
							<label for="edit_novel_Name" class="col-sm-2 control-label">小說名稱</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_novel_Name" placeholder="小說名稱" name="novel_name">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_novelColumnFrom" style="float:left;padding:7px 15px 0 27px;">小說類型</label>
							<div class="col-sm-10">
								<select class="form-control" id="edit_novelColumnFrom" placeholder="小說類型" name="novel_column">
									<option value="">--請選擇--</option>
									<c:forEach items="${fromType}" var="item">
										<option value="${item.col_id}"<c:if test="${item.col_id == novelColumnFrom}"> selected</c:if>>${item.col_name }</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="edit_author_name" class="col-sm-2 control-label">小說作者</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_author_name" placeholder="小說作者" name="author_name">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_author_Introduction" class="col-sm-2 control-label">作者簡介</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_author_Introduction" placeholder="作者簡介" name="author_Introduction">
							</div>
						</div>
						<div class="form-group">
							<label for="edit_novel_content" class="col-sm-2 control-label">小說內容</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_novel_content" placeholder="小說內容摘要" name="novel_content">
							</div>
						</div>
						
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
					<button type="button" class="btn btn-primary" onclick="insertNovelById()">確定添加小說書籍</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /#wrapper -->

	<!-- jQuery -->
	<script src="<%=basePath%>js/jquery.min.js"></script>
	
	<!-- QRCode -->
	<script src="<%=basePath%>js/jquery-1.11.1.js"></script>
	<script src="<%=basePath%>js/jquery.qrcode.js"></script>
	<script src="<%=basePath%>js/qrcode.js"></script> 
	<script src="<%=basePath%>js/utf.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="<%=basePath%>js/bootstrap.min.js"></script>

	<!-- Metis Menu Plugin JavaScript -->
	<script src="<%=basePath%>js/metisMenu.min.js"></script>

	<!-- DataTables JavaScript -->
	<script src="<%=basePath%>js/jquery.dataTables.min.js"></script>
	<script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script>

	<!-- Custom Theme JavaScript -->
	<script src="<%=basePath%>js/sb-admin-2.js"></script>
	
	<script type="text/javascript">
	
		function editNovel(id) {
			$.ajax({
				type:"get",
				url:"<%=basePath%>novel/detail.action",
				data:{"id":id},
				success:function(data) {
					$("#edit_novel_id").val(data.novel_id);
					$("#edit_novel_name").val(data.novel_name);
					$("#edit_novelColumnFrom").val(data.novel_column)
					$("#edit_author_name").val(data.author_name);
					$("#edit_author_Introduction").val(data.author_Introduction);
					$("#edit_novel_content").val(data.novel_content)
				}
			});
		}
		
		function updateNovelById() {
			$.post("<%=basePath%>novel/update.action",$("#edit_novel_form").serialize(),function(data){
				alert("小說圖書書籍更新成功！");
				window.location.reload();
			});
		}
		
		function deleteNovel(id) {
			if(confirm('確實要刪除該客戶嗎?')) {
				$.post("<%=basePath%>novel/delete.action",{"id":id},function(data){
					alert("小說刪除更新成功！");
					window.location.reload();
				});
			}
		}
		
		function insertNovelById(){
			$.post("<%=basePath%>novel/insert.action",$("#edit_novel_zeng").serialize(),function(data){
				alert("新增小說書籍成功");
				window.location.reload();
			})
		}

		jQuery('#qrcodeCanvas').qrcode({
	        text: "https://blog.csdn.net/qq_41879385",
	        width: "110",               //二維碼的寬度
	        height: "110",              //二維碼的高度
	        background: "#ffffff",      //二維碼的後景色
	        foreground: "#000000",      //二維碼的前景色
	        src: "<%=basePath%>image/xingkong.jpg" 	//二維碼中間的圖片
		});
		
	</script>
</body>

</html>

運行效果：數據可能有點少，因爲我之前數據庫重裝結果一不小心就把整個數據庫的文件全部刪除了，當時我真的心痛啊，編寫了2年是SQL語句一下子全部沒了，我叫那個心痛啊，不過還好本人數據庫還算牛逼一點嘻嘻，很快有些了一個數據，呃，在我給的數據庫腳本中是有添加的SQL語句的，用那些sql語句就可以添加了。

這個頁面是有用到bootstrap的，在本文章的頭部就有貼出bootstrap的使用教程。

 增加效果：利用了bootstrap的模態框效果：

修改也是一樣的：但是修改功能有個小細節，在點擊修改的時候，在模態框都會顯示不同數據的不同數據，什麼意思呢，就比如你點8號的修改，在跳出來的模態框就回顯示8號的數據信息，而點擊7號的修改按鈕，就會顯示7號的數據信息。

 下拉查詢：

 條件查詢：

 自此，本項目的整合就到這裏了，謝謝點贊，如有問題歡迎評論，我隨時都會上博客。

附上源碼下載地址：百度網盤。代碼有問題及時聯繫我QQ3506346737，儘快修正。

鏈接：https://pan.baidu.com/s/1h5iIuyZHL0jCXibahB53jg 
提取碼：7kia