java Web项目实践之7 添加功能、精确查询功能的设计及实现

最终效果图
这里写图片描述
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.内容填写,提交后的效果图
这里写图片描述
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值