一、编辑和修改特定库存信息
要在显示数据库库存信息的页面上,通过点击页面进行跳转,跳转到修改数据库信息的页面上,然后修改后提交,再跳回到原来的页面。首先,在原页面上的表格的段标签<td>上加入这样的语句:
<td><a th:text="${fruit.name}" th:href="@{/edit(id=${fruit.id})}">苹果</a></td>
在该表字段上就会生成一个超链接,点击向服务器发出edit请求。新建一个servlet类处理该请求,如下:
@WebServlet("/edit")
public class EditServlet extends ViewBaseServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取到请求中的id字段
String sid=req.getParameter("id");
//判断字符串是否为空,然后转成int
if(sid!=null&&!("".equals(sid))){
int fid=Integer.parseInt(sid);
//通过JDBC获得对应id的Fruit对象
Fruit f= GetFruitFid.getFruitFid(fid);
//将f保存到request的保存域里面
req.setAttribute("Fruit",f);
//将查找到的信息渲染到页面上
super.processTemplate("edit",req,resp);
System.out.println(f);
}
}
}
修改信息的页面如下所示。该页面中获得了要修改的数据的信息,并且修改后提交一个名为update的请求。
<form th:action="@{update}" method="post">
<!--因为一般id对用户没用,设置不显示-->
<input type="hidden" name="fid" th:value="${Fruit.id}"/>
<!--在表的声明中加上object=。后面使用Fruit中的属性前面就不用加Fruit,但是这样的变量前面用*而不是$-->
<table id="tb_fruit" th:object="${Fruit}">
<tr>
<th>水果:</th>
<!--request域不用写出来,直接写里面保存的属性Fruit-->
<td><input type="text" name="name" th:value="*{name}"/></td>
</tr>
<tr>
<th>数量:</th>
<td><input type="text" name="num" th:value="*{num}"/></td>
</tr>
<tr>
<th>单价:</th>
<td><input type="text" name="price" th:value="*{price}"/></td>
</tr>
<tr>
<th colspan="3">
<input type="submit" value="提交">
</th>
</tr>
</table>
</form>
同样新建一个servlet类处理update请求,修改数据库后利用客户端重定向显示新的库存信息。
@WebServlet("/update")
public class UpdateServlet extends ViewBaseServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String name=req.getParameter("name");
String num=req.getParameter("num");
String price=req.getParameter("price");
String fid=req.getParameter("fid");
int count=UpdateFruit.updateFruit(Integer.parseInt(fid),name,Integer.parseInt(num),Integer.parseInt(price));
System.out.println(count);
//回到index页面上显示修改的结果
resp.sendRedirect("index");
}
}
二、删除和添加信息
在库存页面上添加能够对数据库进行删除和增加的内容。首先添加删除功能,先在页面上添加下行:
<!--添加删除功能,竖线的作用是让thymeleaf识别字符串并自动拼接-->
<td th:text="${'删除'}" th:onclick="|delFruit(${fruit.id})|"></td>
在页面上生成一个删除选项,点击后如下所示:
在html的head部分添加一个js文件,在js中定义delFruit函数如下:
function delFruit(id) {
//confirm弹出一个页面,确认删除后发送del请求
if (confirm('是否确认删除')){
window.location.href='del?id='+id;
}
}
然后新建一个servlet类响应这个带id信息的del请求,再利用JDBC对数据库中对应id的数据进行删除。
再添加删除功能如下,在库存显示页面添加一列:
<td><a th:text="${'添加'}" th:href="@{/new.html}"></a></td>
然后定义添加页面的form表单如下:
<p class="f30 center">编辑库存信息</p>
<form action="insert" method="post">
<table id="tb_fruit">
<tr>
<th>水果:</th>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<th>数量:</th>
<td><input type="text" name="num"/></td>
</tr>
<tr>
<th>单价:</th>
<td><input type="text" name="price" /></td>
</tr>
<tr>
<th colspan="3">
<input type="submit" value="添加">
</th>
</tr>
</table>
</form>
Notations:新建的这个new.html没有thymeleaf渲染,使用thymeleaf中的语法修饰action会发送不了请求。
同样,新建一个servlet对其响应,使用JDBC增添数据库中的信息,最后使用客户端重定向重新访问库存页面。
三、分页操作
对库存信息进行分页显示,每页显示五条信息。对前端页面加入如下的分页按钮:
<div style="margin-left: 20%;width: 60%">
<input type="button" value="首页" th:onclick="|page(1)|" th:disabled="${session.pageNo==1}"/>
<input type="button" value="上一页" th:onclick="|page(${session.pageNo-1})|" th:disabled="${session.pageNo==1}"/>
<input type="button" value="下一页" th:onclick="|page(${session.pageNo+1})|" th:disabled="${session.pageNo==session.totalPage}"/>
<input type="button" value="尾页" th:onclick="|page(${session.totalPage})|" th:disabled="${session.pageNo==session.totalPage}"/>
</div>
其中,onclick后面的语句表示有一个js的函数page,传入参数为会话作用域中保存的当前页数pageNo。而disabled则表示该按钮何时禁用,如在第一页的时候禁用上一页按钮,在尾页禁用下一页按钮。
page函数功能向服务器端发送含有当前页面信息的请求,如下:
function page(pageNo){
window.location.href="index?pageNo="+pageNo;
}
响应该请求的servlet函数定义如下:
@WebServlet("/index")
public class GetServlet extends ViewBaseServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//默认情况下显示第一页
int pageNo=1;
if (req.getParameter("pageNo")!=null && !("".equals(req.getParameter("pageNo")))){
pageNo=Integer.parseInt(req.getParameter("pageNo"));
}
List<Fruit> l=new ArrayList<Fruit>();
//利用JDB获得数据库中的数据,并将每行数据封装成一个Fruit类
//该list的size就是存储fruit的总条数,除以每页条数加一就是总页数
l=GetFruit.getFruit();
int totalPage=(l.size())/5+1;
//获得要显示的页面上的
List<Fruit> l1=new ArrayList<Fruit>();
for (int i=(pageNo-1)*5;i<pageNo*5&&i<l.size();i++){
l1.add(l.get(i));
}
//创建会话并将Fruit类的ArrayList保存在保存域里面
HttpSession hs=req.getSession();
hs.setAttribute("FruitList",l1);
//在会话中也保存页数信息
hs.setAttribute("pageNo",pageNo);
hs.setAttribute("totalPage",totalPage);
//此处的视图名称是Fruit
//下面的函数会将逻辑视图Fruit名称对应到物理视图名称上去
//物理视图名称是 view-prefix+逻辑视图名称+view-suffix
//而这三者分别对应 / index .html
super.processTemplate("index",req,resp);
}
}