最终效果图
1.在持久层接口SellerDao.java中添加add方法
// 添加
public int add(Seller entity);2.在持久层接口实现SellerDaoImpl.java中实现此方法
// 添加
@Override
public int add(Seller entity) {
int f = 0;
String sql = "insert into t_seller(shopName,shopLocation,golden) values(?,?,?)";
Object[] objects = { entity.getShopName(), entity.getShopLocation(),
entity.getGolden() };
f = update(sql, objects);
try {
closeConn();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return f;
}3.在业务层接口SellerService.java中添加add方法
// 添加
public int add(Seller entity);4.在业务层接口实现SellerServiceImpl.java中实现此方法
@Override
public boolean add(Seller entity) {
return sdi.add(entity) > 0 ? true : false;
}5.功能测试（测试表中编号为3的记录内容）
6.在持久层接口SellerDao.java中添加findEntity（精确查询）方法
// 精确查找
public Seller findEntity(String propName, Object value);7.在持久层接口实现SellerDaoImpl.java中实现此方法
// 精確查找
@Override
public Seller findEntity(String p, Object o) {
// 一定要记得新定义一个entity，防备上次查找的结果对本次查找造成干扰
Seller entity = null;
String sql = "Select * from t_seller where " + p + "=?";
Object[] objects = { o };
try {
rs = query(sql, objects);
if (rs.next()) {
// 一旦找到，则完整包装此对象
entity = new Seller();
entity.setId(rs.getInt("Id"));
entity.setGolden(rs.getString("golden"));
entity.setShopLocation(rs.getString("shopLocation"));
entity.setShopName(rs.getString("shopName"));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
closeConn();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return entity;
}8.在业务层接口SellerService.java中添加findEntity方法
// 精确查找
public Seller findEntity(String propName, Object value);9.在业务层接口实现SellerServiceImpl.java中实现此方法
@Override
public Seller findEntity(String p, Object o) {
return sdi.findEntity(p, o);
}10.功能测试（新添加，测试能否精确匹配刚添加的记录内容）
将上面的添加和精确查询结合起来测试，都能通过则代表这二个功能都是正确的
11.在展示层文件manage/seller/sellerManage.jsp中添加功能区（添删查改）和模态框区（弹出编辑窗口）
<!--功能区-->
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<button class="btn btn-primary btn-sm" data-toggle="modal" id="btnAdd">
商家入驻</button>
<button class="btn btn-warning btn-sm" data-toggle="modal"
id="btnModify">商家变更</button>
<button class="btn btn-danger btn-sm" id="btnDelete">商家删除</button>
</div>
<div class="col-md-4 column"></div>
<div class="col-md-4 column">
<input type="text" id="findValue" placeholder="请输入查询关键词（支持模糊查询）"
style="margin-left: 20px; width: 200px;">
<button class="btn btn-warning" id="btnSearch">查询</button>
</div>
</div>
</div>
<!-- 模态框（Modal） ，用于新增或编辑-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!--通过href装载将远程文件调入到此处-->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>12.在展示层中新添加页面文件manage/seller/sellerEdit.jsp，当添加或修改时远程调用此文件，用Bootstrap模态框（Modal）插件来实现
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="title">商家入驻</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="hidden" name="sid" id="sid" value="${data.data.id}">
<label for="shopName" class="col-sm-4 control-label"> 商家名称 </label>
<div class="col-sm-6">
<input type="text" class="form-control" id="shopName"
value="${data.data.shopName}" placeholder="请输入商家名称" required>
</div>
</div>
<div class="form-group">
<label for="shopLocation" class="col-sm-4 control-label">
商家地址 </label>
<div class="col-sm-6">
<input type="text" class="form-control" id="shopLocation"
value="${data.data.shopLocation}" placeholder="请输入商家地址" required>
</div>
</div>
<div class="form-group">
<label for="golder" class="col-sm-4 control-label"> 是否金牌商家 </label>
<div class="col-sm-6">
<select class="form-control" id="golden">
<!--注意选项的匹配-->
<option value="1">是</option>
<option value="0"
<c:if test="${data.data.golden==0}">selected</c:if>>否</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<button id="sellerSubmitBtn" type="button"
class="btn btn-primary col-sm-8">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>13.在配套的js/sellerManage.js中响应相应事件
14.分页导航效果图
15.模糊查询效果
16.“商家入驻”按钮单击效果图
17.在配套的js/sellerEdit.js中响应相应事件
$(function() {
// 获取页面对象
var sid = $("#sid");// 类型：input，隐藏的sid
var shopName = $("#shopName");// 类型：input，shopName
var shopLocation = $("#shopLocation");// 类型：input，shopLocation
var golden = $("#golden");// 类型：select|option golden
var title = $("#title");// 类型：h4文本 模态框标题
// 根据Id的情况，智能提示是变更还是入驻
if (sid.val() != 0) {
// shopName.attr("disabled", true);
title.html("商家变更");
} else {
// shopName.attr("disabled", false);
title.html("商家入驻");
}
$("#sellerSubmitBtn").click(function() {
// 根据Id的情况，智能提示是变更还是入驻
if (sid.val() == 0) {
doAdd();// 商家入驻
} else {
//doUpdate();// 商家变更
}
});
function doAdd() {
// 在这里加入所有非空项检测
$.ajax( {
type : 'POST',
url : "seller",
data : {
method : "add",
shopName : shopName.val(),
shopLocation : shopLocation.val(),
golden : golden.val()
},
dataType : 'json',
success : function(data) {
if (data.flag == "yes") {
alert("操作成功");
location.href = "seller?method=show";
} else {
alert("操作失败");
}
},
error : function() {
alert("操作异常");
}
});
}
});18.Servlet层，主要做web请求处理、页面跳转控制、数据封装等业务。
是展示层和业务层的桥梁。
SellerManageServlet.java
1)商家入驻功能（doAdd）
//添加
public void doAdd(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接受请求传来的参数
String shopName = request.getParameter("shopName");
String shopLocation = request.getParameter("shopLocation");
String golden = request.getParameter("golden");
//生成对象，填充对象
Seller s = new Seller();
s.setShopName(shopName);
s.setShopLocation(shopLocation);
s.setGolden(golden);
//根据业务层的调用情况，返回json数据给调用页面
JSONObject data = new JSONObject();
if (ssi.add(s)) {
data.put("flag", "yes");
}
// 设置输出端的内容类型及格式
response.setContentType("text/html;charset=utf-8");
// 取得输出流
PrintWriter pw = response.getWriter();
// 向输出流写入内容
pw.print(data.toString());
// 清空输出流，将内容推送到响应端
pw.close();
}19.内容填写，提交后的效果图
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
