maven web工程 controller层 servlert模块 edit参数 编写 编辑功能

60 篇文章 0 订阅
50 篇文章 0 订阅
本文详细介绍了如何在Java Web环境中实现企业信息的编辑功能。从更新页面的HTML结构,到JavaScript的交互,再到后台Servlet的处理逻辑,包括BeanUtil工具类的使用、Service层的更新操作以及页面跳转,整个流程清晰呈现。编辑功能通过表单提交,利用请求参数获取ID,查询并显示待修改数据,最终保存修改并重新分页展示列表。
摘要由CSDN通过智能技术生成

请求edit参数 是编写 编辑功能的

这里对应的修改页面的名称通常是 update.jsp

在修改页面 输入框的代码是


```javascript
 <div class="panel panel-default">
            <div class="panel-heading">企业信息</div>
            <form id="editForm" action="${ctx}/store/company?operation=edit" method="post">
                <input type="hidden" name="id" value="${company.id}">
                <div class="row data-type" style="margin: 0px">
                    <div class="col-md-2 title">企业名称</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="企业名称" name="name" value="${company.name}">
                    </div>

                    <div class="col-md-2 title">营业执照</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="营业执照" name="licenseId" value="${company.licenseId}">
                    </div>

                    <div class="col-md-2 title">所在城市</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="所在地" name="city" value="${company.city}">
                    </div>

                    <div class="col-md-2 title">企业地址</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="企业地址" name="address" value="${company.address}">
                    </div>

                    <div class="col-md-2 title">法人代表</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="法人代表" name="representative" value="${company.representative}">
                    </div>

                    <div class="col-md-2 title">联系电话</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="联系电话" name="phone" value="${company.phone}">
                    </div>

                    <div class="col-md-2 title">公司规模</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="公司规模" name="companySize" value="${company.companySize}">
                    </div>

                    <div class="col-md-2 title">所属行业</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="所属行业" name="industry" value="${company.industry}">
                    </div>
                    <div class="col-md-2 title">状态</div>
                    <div class="col-md-4 data">
                        <select class="form-control select2" name="state" style="width: 100%;">
                            <option value="0" ${company.state==0 ? 'selected':''}>未审核</option>
                            <option value="1" ${company.state==1 ? 'selected':''}>已审核</option>
                        </select>
                        <input type="text" class="form-control" placeholder="状态" name="state" value="${company.state}">
                    </div>

                    <div class="col-md-2 title rowHeight2x">备注</div>
                    <div class="col-md-4 data rowHeight2x">
                        <textarea class="form-control" rows="3" name="remarks">${company.remarks}</textarea>
                    </div>
                </div>
            </form>
        </div>
form id="editForm" action="${ctx}/store/company?operation=edit"

也是通过 form标签的action属性 找到servlet模块 里 与 operation这个参数的值同名的方法

list.jsp页面中的编辑按钮

<button type="button" class="btn bg-olive btn-xs" onclick='location.href="${ctx}/store/company?operation=toEdit&id=${item.id}"'>编辑</button>

编辑按钮 在list.jsp页面的form标签单元行内,
通过 onclick 单击事件已经给出了请求路径
并且&id=${item.id} 是在设置 id
也就是 直接用 req.getParameter(“id”); 就能获取到他的id值

 </thead>
                    <tbody>
                    <c:forEach items="${page.list}" var="item">
                    <tr>
                        <td><input name="ids" value="${item.id}" type="checkbox"></td>
                        <td>
                            ${item.name}
                        </td>
                        <td>${item.city}</td>
                        <td>${item.address}</td>
                        <td>${item.representative}</td>
                        <td>${item.phone}</td>
                        <td>${item.industry}</td>
                        <td>${item.state ==0?'未审核':'已审核'}</td>
                        <td class="text-center">
                            <button type="button" class="btn bg-olive btn-xs" onclick='location.href="${ctx}/store/company?operation=toEdit&id=${item.id}"'>编辑</button>
                        </td>
                    </tr>
                    </c:forEach>
                    </tbody>

在controller 层 servlet模块中 涉及的方法 toEdit 与edit

在edit方法中

    //将数据获取到,封装成一个对象
        Company company = BeanUtil.fillBean(req, Company.class, "yyyy-MM-dd");
        //调用业务层接口update
//        CompanyService companyService = new CompanyServiceImpl();
        companyService.update(company);

        //跳转回到页面list
        //list(request,response);
        resp.sendRedirect(req.getContextPath()+"/store/company?operation=list");

    }

也是通过 BeanUtil.fillBean将 获取的请求信息封装成 Company对象

 Company company = BeanUtil.fillBean(req, Company.class, "yyyy-MM-dd");

注意这里是调用service层的update方法进行修改的

 companyService.update(company);

它跳转的方向是本类里的list方法
要通过list方法内的分页功能将数据再次进行分页显示

   resp.sendRedirect(req.getContextPath()+"/store/company?operation=list");

这样获取到的是修改的这个对象的信息,经过修改,数据库数据会发生变话,所以还要在使用list方法的分页功能,将数据重新分页显示

修改是通过 修改页面的保存 按钮实现的
修改页面的保存 按钮

 <div class="box-tools text-center">
            <button type="button" onclick='document.getElementById("editForm").submit()' class="btn bg-maroon">保存</button>
            <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
        </div>

是将表单的数据提交submit()到 document.getElementById(“editForm”)

form id=“editForm” 通过 action属性 将数据发送到 “${ctx}/store/company?operation=edit” 这个请求对象中


在 toEdit方法中

 //查询要修改的数据findById
        String id = req.getParameter("id");

        //CompanyService companyService = new CompanyServiceImpl();
        Company company = companyService.findById(id);

        //将数据加载到指定区域,供页面获取
req.setAttribute("company",company);

        //跳转页面
req.getRequestDispatcher("/WEB-INF/pages/store/company/update.jsp").forward(req,resp);

先获取请求中他的id值,通过根据id查询单个对象的方法
查询出需要修改的那个对象,

req.setAttribute("company",company);

将查询出来的单个对象设置到共享域中 ,
最后跳转回到 update.jsp编辑页面
这里需要进行数据传递,所以要用到发送的方法

通过req.getParameter(“id”); 获取他的id值

调用service层的 根据id条件查询单个对象
companyService.findById(id); 方法,并且将从请求对象获取到的id作为参数传递进去,告诉service层通过 这id 查询对象。

将修改数据加载到指定区域,供页面获取
req.setAttribute(“company”,company);

最后将就能得到经过这次编辑操作的对象信息

req.getRequestDispatcher("/WEB-INF/pages/store/company/update.jsp").forward(req,resp);

这是将修改的数据发送到修改页面

这是为了获取到要修改的那个对象,在编辑页面上进行显示,
在修改页面是就可以看着数据进行修改
toEdit 是获取单个 对象 ,将这个对象的数据中的成员 在页面分别进行显示的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

普希托夫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值