继续分享JavaWeb课程实验内容。
任务点2:用户确认收货(10分)
在管理员将订单发货后,在管理员看来,该订单状态是“已发货”。操作上原先还有个“完成”按钮,我已去掉。购买用户登录后,查询订单,订单状态同样是“已发货”,但是再没有后续操作。
现在要求:加上一个“确认收货”按钮,用户点击该按钮,向后端提出AJAX请求,将order表的status字段(1未付款/2已付款/3已发货(配送中)/4已完成)改为4,此时前端界面上订单状态变为“已完成”。当管理员登录查询订单时,此订单状态应该也为“已完成”。换句话说,将订单的“完成(确认收货)”操作从管理员移到用户。
提示:
原系统参考实现:
前端:order_list.jsp的其中一行:<a class="btn btn-success" href="/admin/order_status?id=${order.id }&status=3">发货</a>
后端:AdminOrderStatusServlet.java
新的要完成的实现:
前端:order_list.html(进入方式:普通用户登录后点击导航栏上的“我的订单”。我已调整好,只待增加“确认收货”按钮并实现点击后的功能。)
后端:自写Servlet处理前端点击“确认收货”后发来的AJAX请求,采用前后端分离开发方式
前端需要修改的代码:
首先增加“确认收货”数据列。
在<table class="table table-bordered table-hover" id="orderListTable">中添加
<th width="10%">确认收货</th>
在js中发起的$.get('/orderList', function (orderList)请求里面,增加渲染的列表项:
<td><button ${order.status === 4 ? 'disabled' : `onclick="myFunction(${order.id})"`} >确认收货</button></td>
ps.此处通过一个三目运算符进行判定,若当前订单状态为4(已完成时),则此功能按钮设置为“disabled”,将按钮禁用,点击此按钮不会触发函数。若当前订单状态不为4,则为下列功能函数。
onclick="myFunction(${order.id})
当点击收获按钮时,会触发绑定的功能函数,实现对订单状态的改变。οnclick="myFunction(${order.id}) 通过传递订单编号order.id这个参数,实现对此订单的状态改变。具体实现代码为:
function myFunction(orderId) {
$.ajax({
url: "/edit_order_status",
type: "get",
data: {
"orderId": orderId
},
});
}
后端实现代码:
处理/edit_order_status请求,无需返回任何数据。(项目采用mvc三层架构实现后端)
servlet层代码:
@WebServlet("/edit_order_status")
public class UserEditorderstatus extends HttpServlet {
private OrderService oService = new OrderService();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("orderId"));
int status =4;
// 更新订单状态
oService.updateStatus(id, status);
}
}
Service层代码:
public void updateStatus(int id, int status) {
try {
oDao.updateStatus(id, status);
} catch (SQLException e) {
e.printStackTrace();
}
}
dao层代码:
public void updateStatus(int id, int status) throws SQLException {
QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "update `order` set status=? where id = ?";
r.update(sql, status, id);
}
如有问题,欢迎评论区留言讨论!