使用SSM框架實現增刪改查

1、目錄結構：

 

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

 

 3、項目開始
在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的模態框效果：

 https://www.e-learn.cn/content/java/1180897

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