1.功能效果展示
2.user.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>user</title>
<!--引入bootstrap.css-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.css"/>
<!--引入myscss.css-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/myscss.css" />
<!--引入jquery.js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/jquery-3.1.1.js"></script>
<!--bootstrap.js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.js"></script>
<!--user.js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/foreground/user/user.js"></script>
<!--contextPath-->
<script type="text/JavaScript">
var contextPath = "${pageContext.request.contextPath}";
</script>
</head>
<body>
<!--公用頭部-->
<!-- <div id="navhead"></div> -->
<%@include file="/foreground/common/head.jsp"%>
<!--主體部分-->
<div class="container">
<div class="row padding">
<div class="col-md-3">
<!--左側導航欄-->
<h2 class="text-danger">我的賬戶</h2>
<hr />
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active"><a href="#head" data-toggle="tab">用戶信息修改</a></li>
<li><a href="#profile" data-toggle="tab">訂單查詢</a></li>
<li><a href="../login/login.jsp" data-toggle="tab" onclick="layout()">用戶退出</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<!--用戶基本信息-->
<div class="tab-pane active margintop" id="head">
<form class="form-horizontal thumbnail paddingtop">
<div class="form-group">
<input type="hidden" class="form-control" id="id" name="id" value="${user.id }"/>
</div>
<div class="form-group">
<label class="col-md-4 control-label">會員郵箱</label>
<div class="col-md-4">
<p class="form-control-static">${user.email }</p>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">會員名</label>
<div class="col-md-4">
<p class="form-control-static">${user.name }</p>
</div>
</div>
<div class="form-group">
<label for="pass" class="col-md-4 control-label">密碼</label>
<div class="col-md-5">
<input type="password" class="form-control" id="pass" name="pass" placeholder="請輸入密碼">
</div>
</div>
<div class="form-group">
<label for="repass" class="col-md-4 control-label">重複密碼</label>
<div class="col-md-5">
<input type="password" class="form-control" id="repass" placeholder="請再次輸入密碼">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-md-4 control-label">性別</label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="gender" id="gender" value="male"
<c:choose>
<c:when test="${user.gender == 'male' }"> checked="checked"</c:when>
</c:choose>>
男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender" value="female"
<c:choose>
<c:when test="${user.gender == 'female' }"> checked="checked"</c:when>
</c:choose>>
女
</label>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-md-4 control-label">聯繫電話</label>
<div class="col-md-5">
<input type="text" class="form-control" id="phone" name="phone" placeholder="請輸入電話">
</div>
</div>
<hr style="border: 1px dashed lightgray;width: 600px;"/>
<div class="form-group">
<input type="submit" onclick="modifyUser()" class="btn btn-success center-block" style="width: 300px;" value="確認"/>
</div>
</form>
</div>
<!--訂單查詢-->
<div class="tab-pane" id="profile">
<div class="panel panel-success margintop">
<div class="panel-heading text-center"><h3>歡迎來到XX商城</h3></div>
<table class="table table-hover table-striped text-center">
<tr class="danger">
<th class="text-center">訂單號</th>
<th class="text-center">收件人</th>
<th class="text-center">訂單時間</th>
<th class="text-center">訂單狀態</th>
<th class="text-center">操作</th>
</tr>
<c:forEach var="order" items="${orders }">
<tr>
<td>${order.id }</td>
<td>${order.receiverName }</td>
<td>${order.ordertime }</td>
<td>
<c:choose>
<c:when test="${order.paystate==0 }">未支付</c:when>
<c:when test="${order.paystate==0 }">已支付</c:when>
</c:choose>
</td>
<td>
<a href="javascript:void(0)" onclick="showOrderDetail('${order.id}')">查看</a>
<a href="javascript:void(0)" onclick="deleteOrder('${order.id}',this)">刪除</a>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<!--用戶退出-->
<div class="tab-pane" id="messages"></div>
</div>
</div>
</div>
</div>
<!--彈出的模態框-->
<div id="showorderdetail"></div>
<!--<div>
<div class="modal fade" tabindex="-1" id="myModal">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">訂單詳情</h4>
</div>
<div class="modal-body paddingtop">
<div class="panel panel-info table-responsive">
<div class="panel-heading text-center"><h4><strong>購物車列表</strong></h4></div>
<div id="carttable">
<table class="table table-hover text-center">
<tr class="danger">
<th class="text-center">序號</th>
<th class="text-center">商品名稱</th>
<th class="text-center">價格</th>
<th class="text-center">購買數量</th>
<th class="text-center">庫存</th>
<th class="text-center">小計</th>
</tr>
<tr>
<td>1</td>
<td>java模式</td>
<td>1</td>
<td>1</td>
<td>1000</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>javascript</td>
<td>1</td>
<td>1</td>
<td>1000</td>
<td>20</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer" style="text-align: left!important;">
<strong>地址：</strong> 無錫<br/>
<strong>收貨人:</strong> 張三<br/>
<strong>電話：</strong> 18928792792
</div>
</div>
</div>
</div>
</div>
</div>-->
<!--靜態模態框2：如果用戶登錄信息已經過期，則再次返回該頁面的時候有彈出框提示-->
<!--<div>
<div class="modal fade" tabindex="0" id="myModal2">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">用戶信息已經過期-請重新登錄</h4>
</div>
<div class="modal-body paddingtop">
<form class="form-horizontal" action="${pageContext.request.contextPath }/LoginServlet" method="post">
<div class="form-group">
<label for="name" class="col-md-4 control-label">用戶名</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name" id="name" placeholder="請輸入用戶名">
</div>
</div>
<div class="form-group">
<label for="pass" class="col-md-4 control-label">密碼</label>
<div class="col-md-4">
<input type="password" class="form-control" id="pass" name="pass" placeholder="請輸入密碼">
</div>
</div>
<div class="form-group text-center">
<input type="submit" class="btn btn-success" style="width: 200px;" value="登錄"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>-->
</body>
</html>
3.user.js
function layout(){
window.location.href = getRootPath()+"/LayoutServlet";
}
/**
* js獲取應用程序根路徑
* @return {}
*/
function getRootPath() {
//獲取當前網址，如： http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath = window.document.location.href;
//獲取主機地址之後的目錄，如： /uimcardprj/share/meun.jsp
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//獲取主機地址，如： http://localhost:8083
var localhostPaht = curWwwPath.substring(0, pos);
//獲取帶"/"的項目名，如：/uimcardprj
var projectName = pathName
.substring(0, pathName.substr(1).indexOf('/') + 1);
return projectName;
}
/**
* 每次頁面載入的時候都執行checkIsLogoIn方法，判斷用戶是否已經登錄
*/
function checkIsLogin(){
var url = "/mybookstore/AjaxCheckIsLoginServlet";
var sendData = null;
$(function(){
$.post(url,sendData,function(backData,textStatus,xmlHttpRequest){
if(backData == "no"){
$("#myModal2").modal({backdrop: false,keyboard: false});
$("#myModal2").modal('show');
}
});
});
}
checkIsLogin();
/**
* 使用ajax提交修改用戶信息表單
*/
function modifyUser(){
//1.得到表單數據
var sendData = $("form").serialize();
//2.得到請求的url信息
var sendUrl = contextPath + "/AjaxModifyUserinfoServlet?time=" + new Date().getTime();
//3.發送ajax請求
$.ajax({
type:"post",
url:sendUrl,
data:sendData,
async:true,
success:function(backData,textStatus,xmlHttpRequest){
if(backData == "success"){
alert("修改成功！");
}else{
alert(backData);
}
}
});
}
/**
* 顯示訂單詳情
* 發送ajax請求到服務器，服務器返回詳情數據，本地js拼接數據顯示頁面
*/
function showOrderDetail(id){
//1.得到請求的url信息
var sendUrl = contextPath + "/AjaxShowOrderDetailServlet?id=" + id + "&time=" +new Date().getTime();
//2.發送ajax請求
$.ajax({
type:"post",
url:sendUrl,
async:true,
//3.請求成功的回調
success:function(backData,textStatus,xmlHttpRequest){
//給showorderdetail動態添加模態框
$("#showorderdetail").html(backData);
//彈出模態框
$("#myModal").modal();
}
});
}
/**
* 刪除訂單
* 發送ajax請求到服務器，服務器刪除訂單，跳轉頁面
*/
function deleteOrder(id,caller){
//1.得到請求的url信息
var sendUrl = contextPath + "/AjaxDeleteOrderServlet?id="+id+"&time="+new Date().getTime();
//2.發送ajax請求
$.ajax({
type:"post",
url:sendUrl,
async:true,
//3.請求成功的回調
success:function(backData,textSatus,xmlHttpRequest){
if(backData == "success"){
//刪除成功
alert("刪除成功");
$(caller).parent().remove();
}else{
alert(backData);
}
}
});
}
4.LayoutServlet.java,實現用戶退出
package com.chinasoft.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @author jf
* 功能：實現用戶退出
*/
@WebServlet("/LayoutServlet")
public class LayoutServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public LayoutServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//清空session信息
request.getSession().removeAttribute("user");
request.getSession().invalidate();
//退出登錄時清空cookie信息
Cookie[] cookies = request.getCookies();
for(Cookie c:cookies){
if("autologin".equals(c.getName())){
c.setMaxAge(0);
response.addCookie(c);
}
}
//跳轉頁面
request.getRequestDispatcher("foreground/login/login.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
5.檢測用戶是否登錄
package com.chinasoft.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.chinasoft.entity.User;
/**
* @author jf
* 功能：檢測用戶是否登錄
*/
@WebServlet("/AjaxCheckIsLoginServlet")
public class AjaxCheckIsLoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxCheckIsLoginServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//獲取瀏覽器中存儲的session對象
User user = (User) request.getSession().getAttribute("user");
//user不爲空，說明用戶已經登錄
if(user!=null){
response.getWriter().write("yes");
}else{
response.getWriter().write("no");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
6.處理修改用戶信息
package com.chinasoft.servlet;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.SQLException;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.BeanUtils;
import com.chinasoft.dao.impl.ImplUserDao;
import com.chinasoft.entity.User;
/**
* @author jf
* 處理修改用戶基本信息的表單
*/
@WebServlet("/AjaxModifyUserinfoServlet")
public class AjaxModifyUserinfoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxModifyUserinfoServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.獲取請求參數
Map<String,String[]> map = request.getParameterMap();
//2.使用beanutils的方法實現對象屬性的拷貝
User user = new User();
try {
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//3.修改用戶信息
ImplUserDao implUserDao = new ImplUserDao();
try {
User user2 = implUserDao.modifyUser(user);
//把新的修改後的用戶保存到session會話中
request.getSession().setAttribute("user", user2);
response.getWriter().write("success");
} catch (SQLException e) {
response.getWriter().write(e.getMessage());
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
7.顯示訂單詳情
package com.chinasoft.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.chinasoft.entity.Order;
import com.chinasoft.entity.OrderItem;
/**
* @author jf
* 點擊查看，顯示訂單詳情
*/
@WebServlet("/AjaxShowOrderDetailServlet")
public class AjaxShowOrderDetailServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxShowOrderDetailServlet() {
super();
}
@SuppressWarnings("unchecked")
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.得到請求參數
String id = request.getParameter("id");
//2.獲取session中保存的訂單信息
List<Order> orders = (List<Order>) request.getSession().getAttribute("orders");
Order o = null;
for(Order order : orders){
if(id.equals(order.getId())){
o = order;
break;
}
}
//3.拼接返回給客戶端的字符串
String html = "";
html+="<div>";
html+= "<div class='modal fade' tabindex='-1' id='myModal'>";
html+= "<div class='modal-dialog' >";
html+= "<div class='modal-content'>";
html+= "<div class='modal-header'>";
html+= "<button type='button' class='close' data-dismiss='modal'><span>×</span></button>";
html+= "<h4 class='modal-title'>訂單詳情</h4>";
html+= "</div>";
html+= "<div class='modal-body paddingtop'>";
html+= "<div class='panel panel-info table-responsive'>";
html+= "<div class='panel-heading text-center'><h4><strong>購物車列表</strong></h4></div>";
html+= "<div id='carttable'>";
html+= "<table class='table table-hover text-center'>";
html+= "<tr class='danger'>";
html+= "<th class='text-center'>序號</th>";
html+= "<th class='text-center'>商品名稱</th>";
html+= "<th class='text-center'>價格</th>";
html+= "<th class='text-center'>購買數量</th>";
html+= "<th class='text-center'>庫存</th>";
html+= "<th class='text-center'>小計</th>";
html+= "</tr>";
for(int i=0 ; i<o.getOrderitems().size();i++){
OrderItem item = o.getOrderitems().get(i);
html+= "<tr>";
html+= "<td>"+i+"</td>";
html+= "<td>"+item.getProduct().getName()+"</td>";
html+= "<td>"+item.getProduct().getPrice()+"</td>";
html+= "<td>"+item.getBuynum()+"</td>";
html+= "<td>"+item.getProduct().getNum()+"</td>";
html+= "<td>"+item.getBuynum()*item.getProduct().getPrice()+"</td>";
html+= "</tr>";
}
html+= "</table>";
html+= "</div>";
html+= "</div>";
html+= "<div class='modal-footer' style='text-align: left!important;'>";
html+= "<strong>地址：</strong>"+o.getReceiverAddress()+"<br/>";
html+= "<strong>收貨人:</strong>"+o.getReceiverName()+"<br/>";
html+= "<strong>電話：</strong>"+o.getReceiverPhone();
html+= "</div>";
html+= "</div>";
html+= "</div>";
html+= "</div>";
html+= "</div>";
html+="</div>";
//4.給客戶端返回字符串
response.getWriter().write(html);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
8.處理刪除訂單
package com.chinasoft.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.chinasoft.dao.impl.ImplOrderDao;
import com.chinasoft.entity.Order;
/**
* @author jf
* 處理刪除訂單的servlet
*/
@WebServlet("/AjaxDeleteOrderServlet")
public class AjaxDeleteOrderServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxDeleteOrderServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.得到請求參數
String id = request.getParameter("id");
//2.獲取session中保存的訂單信息
@SuppressWarnings("unchecked")
List<Order> orders = (List<Order>) request.getSession().getAttribute("orders");
Order o = null;
for(Order order:orders){
if(id.equals(order.getId())){
o = order;
break;
}
}
//3.刪除訂單
ImplOrderDao implOrderDao = new ImplOrderDao();
try {
//數據庫刪除訂單
implOrderDao.deleteOrder(o);
//域對象刪除訂單
orders.remove(o);
request.getSession().setAttribute("orders", orders);
//給客戶端返回值
response.getWriter().write("success");
} catch (SQLException e) {
response.getWriter().write(e.getMessage());
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
