網(wǎng)上商城實戰(zhàn)三
今日內(nèi)容介紹
訂單管理/我的訂單
訂單管理/訂單詳情
訂單管理/在線支付
權(quán)限過濾器
后臺頁面搭建
后臺分類管理
后臺商品管理
項目部署
今日內(nèi)容學(xué)習(xí)目標(biāo)
JavaWeb知識鞏固
搭建商城后臺頁面
實現(xiàn)后臺分類管理
第1章 訂單管理
1.1 我的訂單
1.1.1 分析
1.1.2 代碼實現(xiàn)
步驟1：修改header.jsp頁面，查看“我的訂單”
<a href="${pageContext.request.contextPath}/OrderServlet?method=findByUid">我的訂單</a>
步驟2：修改OrderServlet，添加findByUid()方法
//我的訂單
public String findByUid(HttpServletRequest request, HttpServletResponse response)
throws Exception {
//1.1 獲得當(dāng)前頁
int pageNumber = 1;
try {
pageNumber = Integer.getInteger(request.getParameter("pageNumber"));
} catch (Exception e) {
}
int pageSize = 3 ; //暫時固定值
//1.2 獲得當(dāng)前用戶
User loginUser = (User) request.getSession().getAttribute("loginUser");
//2 通過業(yè)務(wù)層查詢
OrderService orderService = new OrderServiceImpl();
PageBean<Order> pageBean = orderService.findByUid(loginUser , pageNumber,pageSize);
//3 顯示數(shù)據(jù)
request.setAttribute("pageBean", pageBean);
return "/jsp/order_list.jsp";
}
步驟3：修改OrderService，添加findByUid()方法
//接口
//通過用戶查詢訂單
PageBean<Order> findByUid(User loginUser, int pageNumber, int pageSize)throws Exception;
//實現(xiàn)類
@Override
public PageBean<Order> findByUid(User user, int pageNumber, int pageSize)throws Exception{
//1 查詢總記錄數(shù)
int totalRecord = orderDao.findTotalRecordByUid(user);
//2 封裝數(shù)據(jù)
PageBean<Order> pageBean = new PageBean<>(pageNumber, pageSize, totalRecord);
//3 分頁數(shù)據(jù)
List<Order> data = orderDao.findAllByUid(user , pageBean.getStartIndex() , pageBean.getPageSize());
pageBean.setData(data);
return pageBean;
}
步驟4：修改OrderDao，提供findTotalRecordByUid() 和 findAllByUid() 兩個方法
//接口
/**
* 通過用戶查詢訂單總記錄數(shù)
* @param user 指定用戶
* @return
*/
int findTotalRecordByUid(User user)throws SQLException;
/**
* 查詢用戶訂單分頁數(shù)據(jù)
* @param user 指定用戶
* @param startIndex 開始索引
* @param pageSize 每頁顯示個數(shù)
* @return
*/
List<Order> findAllByUid(User user, int startIndex, int pageSize)throws Exception;
//實現(xiàn)類
@Override
public int findTotalRecordByUid(User user) throws SQLException {
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
String sql = "select count(*) from orders where uid = ?";
Long count = (Long) queryRunner.query(sql, new ScalarHandler(), user.getUid());
return count.intValue();
}
@Override
public List<Order> findAllByUid(User user, int startIndex, int pageSize) throws Exception {
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
String sql = "select * from orders where uid = ? order by ordertime desc limit ?,?";
List<Order> list = queryRunner.query(sql, new BeanListHandler<Order>(Order.class), user.getUid(), startIndex,
pageSize);
// 遍歷獲得每個訂單:
for (Order order : list) {
// 進行查詢每個訂單的訂單項:
sql = "SELECT * FROM orderitem o,product p WHERE oid = ? AND o.pid=p.pid";
// Array ArrayList Map MapList Bean BeanList ColumnName Scalar Keyed
List<Map<String, Object>> oList = queryRunner.query(sql, new MapListHandler(), order.getOid());
for (Map<String, Object> map : oList) {
// 將屬于訂單項的封裝到OrderItem中.
OrderItem orderItem = new OrderItem();
BeanUtils.populate(orderItem, map);
// 將屬于商品的數(shù)據(jù)封裝到Product中.
Product product = new Product();
BeanUtils.populate(product, map);
orderItem.setProduct(product);
orderItem.setOrder(order);
order.getList().add(orderItem);
}
order.setUser(user);
}
return list;
步驟5：jsp頁面顯示表單數(shù)據(jù)
<%--遍歷訂單 --%>
<c:forEach items="${pageBean.data}" var="order">
<tbody>
<tr>
<th colspan="5">訂單編號:${order.oid} </th>
</tr>
<tr>
<th>圖片</th>
<th>商品</th>
<th>價格</th>
<th>數(shù)量</th>
<th>小計</th>
</tr>
<c:forEach items="${order.list}" var="orderItem">
<tr>
<td width="60" width="40%">
<input type="hidden" name="id" value="22">
<img src="${pageContext.request.contextPath}/${orderItem.product.pimage}" width="70" height="60">
</td>
<td width="30%">
<a target="_blank">${orderItem.product.pname}</a>
</td>
<td width="20%">
￥${orderItem.product.shop_price}
</td>
<td width="10%">
${orderItem.subtotal}
</td>
<td width="15%">
<span>￥${orderItem.subtotal}</span>
</td>
</tr>
</c:forEach>
</tbody>
</c:forEach>
1.2 訂單詳情
1.2.1 分析
1.2.2 代碼實現(xiàn)
步驟1：顯示“我的訂單”時，顯示訂單狀態(tài)state對應(yīng)的文字提示
訂單編號:${order.oid} , ${order.state},
<c:if test="${ order.state == 1 }">
<a href="${pageContext.request.contextPath}/OrderServlet?method=findByOid&oid=${order.oid }">付款</a>
</c:if>
<c:if test="${ order.state == 2 }">
等待發(fā)貨
</c:if>
<c:if test="${ order.state == 3 }">
確認收貨
</c:if>
<c:if test="${ order.state == 4 }">
訂單結(jié)束
</c:if>
<font color="#b00">總金額：${order.total}</font>
步驟2：修改OrderServlet，添加findByOid方法，點擊“付款”，根據(jù)訂單id查詢看訂單詳情。
//通過訂單id查詢詳情
public String findByOid(HttpServletRequest request, HttpServletResponse response)
throws Exception {
//1獲得當(dāng)前頁
String oid = request.getParameter("oid");
//2 通過業(yè)務(wù)層查詢
OrderService orderService = new OrderServiceImpl();
Order order = orderService.findByOid(oid);
//3 顯示數(shù)據(jù)
request.setAttribute("order", order);
return "/jsp/order_info.jsp";
}
步驟3：修改OrderService，添加findByOid()方法
//接口
//通過oid查詢訂單詳情
Order findByOid(String oid);
//實現(xiàn)類
public Order findByOid(String oid) {
return orderDao.findByOid(oid);
}
步驟4：修改OrderDao，添加findByOid()方法
//接口
/**
* 通過oid查詢詳情
* @param oid
* @return
*/
Order findByOid(String oid) throws Exception;
//實現(xiàn)類
@Override
public Order findByOid(String oid) throws Exception {
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
String sql = "select * from orders where oid = ?";
Order order = queryRunner.query(sql, new BeanHandler<Order>(Order.class), oid);
// 封裝Order中l(wèi)ist集合的數(shù)據(jù)
sql = "select * from orderitem o,product p where o.pid = p.pid and o.oid = ?";
List<Map<String, Object>> oList = queryRunner.query(sql, new MapListHandler(), oid);
for (Map<String, Object> map : oList) {
OrderItem orderItem = new OrderItem();
BeanUtils.populate(orderItem, map);
Product product = new Product();
BeanUtils.populate(product, map);
orderItem.setProduct(product);
orderItem.setOrder(order);
order.getList().add(orderItem);
}
return order;
}
步驟5：修改/jsp/order_info.jsp頁面，顯示詳情，準(zhǔn)備付款。
訂單編號:${order.oid}
<tr>
<th>圖片</th>
<th>商品</th>
<th>價格</th>
<th>數(shù)量</th>
<th>小計</th>
</tr>
<c:forEach items="${order.list}" var="orderItem">
<tr>
<td width="60" width="40%">
<input type="hidden" name="id" value="22">
<img src="${pageContext.request.contextPath}/${orderItem.product.pimage}" width="70" height="60">
</td>
<td width="30%">
<a target="_blank">${orderItem.product.pname}.</a>
</td>
<td width="20%">
￥${orderItem.product.shop_price}
</td>
<td width="10%">
${orderItem.count}
</td>
<td width="15%">
<span>￥${orderItem.subtotal}</span>
</td>
</tr>
</c:forEach>
商品金額: <strong style="color:#ff6600;">￥${order.total}.00元</strong>
1.3 在線支付(了解)
1.3.1 分析
1.3.2 代碼實現(xiàn)
步驟1：修改/jsp/order_info.jsp ，完成支付。表單摘要如下：
<form id="orderForm" action="${pageContext.request.contextPath}/OrderServlet" >
<%--隱藏字段 --%>
<input type="hidden" name="method" value="payOrder"/>
<input type="hidden" name="oid" value="${order.oid}"/>
<input name="address" placeholder="請輸入收貨地址">
<input name="name" placeholder="請輸收貨人">
<input name="telephone" placeholder="請輸入聯(lián)系方式">
<input type="radio" name="pd_FrpId" value="ICBC-NET-B2C" checked="checked" />工商銀行
<a href="javascript:document.getElementById('orderForm').submit();">
</form>
步驟2：修改OrderServlet，添加payOrder方法
// 訂單付款
public String payOrder(HttpServletRequest request, HttpServletResponse response)
throws Exception {
//1 獲得請求參數(shù)
String oid = request.getParameter("oid");
String name = request.getParameter("name");
String address = request.getParameter("address");
String telephone = request.getParameter("telephone");
String pd_FrpId = request.getParameter("pd_FrpId");
//2 調(diào)用業(yè)務(wù)層，查詢訂單，并修改訂單狀態(tài)
OrderService orderService = new OrderServiceImpl();
Order order = orderService.findByOid(oid);
order.setAddress(address);
order.setName(name);
order.setTelephone(telephone);
orderService.update(order);
//3 重定向到第三方平臺
String p0_Cmd = "Buy";
String p1_MerId = "10001126856";
String p2_Order = oid;
String p3_Amt = "0.01";
String p4_Cur = "CNY";
String p5_Pid = "";
String p6_Pcat = "";
String p7_Pdesc = "";
String p8_Url = "http://localhost:8080/"+request.getContextPath()+"/OrderServlet?method=callBack";
String p9_SAF = "";
String pa_MP = "";
String pr_NeedResponse = "1";
String keyValue = "69cl522AV6q613Ii4W6u8K6XuW8vM1N6bFgyv769220IuYe9u37N4y7rI4Pl";
String hmac = PaymentUtil.buildHmac(p0_Cmd, p1_MerId, p2_Order, p3_Amt, p4_Cur, p5_Pid, p6_Pcat, p7_Pdesc, p8_Url, p9_SAF, pa_MP, pd_FrpId, pr_NeedResponse, keyValue);
StringBuffer sb = new StringBuffer("https://www.yeepay.com/app-merchant-proxy/node?");
sb.append("p0_Cmd=").append(p0_Cmd).append("&");
sb.append("p1_MerId=").append(p1_MerId).append("&");
sb.append("p2_Order=").append(p2_Order).append("&");
sb.append("p3_Amt=").append(p3_Amt).append("&");
sb.append("p4_Cur=").append(p4_Cur).append("&");
sb.append("p5_Pid=").append(p5_Pid).append("&");
sb.append("p6_Pcat=").append(p6_Pcat).append("&");
sb.append("p7_Pdesc=").append(p7_Pdesc).append("&");
sb.append("p8_Url=").append(p8_Url).append("&");
sb.append("p9_SAF=").append(p9_SAF).append("&");
sb.append("pa_MP=").append(pa_MP).append("&");
sb.append("pd_FrpId=").append(pd_FrpId).append("&");
sb.append("pr_NeedResponse=").append(pr_NeedResponse).append("&");
sb.append("hmac=").append(hmac);
// 使用重定向：
response.sendRedirect(sb.toString());
return null;
}
步驟3：修改service
//接口
//更新
void update(Order order)throws SQLException;
//實現(xiàn)類
public void update(Order order) throws SQLException{
orderDao.update(order);
}
步驟4：修改dao
//接口
/**
* 更新訂單
* @param order
*/
void update(Order order)throws SQLException;
//實現(xiàn)類
public void update(Order order) throws SQLException {
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
String sql = "update orders set total=?,state=?,address=?,name=?,telephone=? where oid = ?";
Object[] params = { order.getTotal(), order.getState(),
order.getAddress(), order.getName(),
order.getTelephone(), order.getOid() };
queryRunner.update(sql, params);
}
步驟5：回調(diào)程序，修改OrderServlet，添加callback()方法
//付款成功，回調(diào)方法，修改訂單狀態(tài)
public String callBack(HttpServletRequest request, HttpServletResponse response)
throws Exception {
String r6_Order = request.getParameter("r6_Order");
String r3_Amt = request.getParameter("r3_Amt");
OrderService orderService = new OrderServiceImpl();
Order order = orderService.findByOid(r6_Order);
order.setState(2);
orderService.update(order);
request.setAttribute("msg", "請！您已經(jīng)付款成！訂單號為："+r6_Order+" 支付的金額為:"+r3_Amt);
return "/jsp/msg.jsp";
}
第2章 權(quán)限過濾器
2.1 需求
我們已經(jīng)完成用戶管理、商品管理、分類管理、訂單管理等功能模塊，訂單模塊和購物車模塊必須確保用戶登錄后才能訪問，我們會在servlet中編寫相同的校驗代碼，我們可以通過權(quán)限過濾器統(tǒng)一處理。
2.2 代碼實現(xiàn)
步驟1：實現(xiàn)類
public class PrivilegeFilter implements Filter{
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
User loginUser = (User) req.getSession().getAttribute("loginUser");
if(loginUser == null){
req.setAttribute("msg", "您還沒有登錄！沒有權(quán)限訪問！");
req.getRequestDispatcher("/jsp/msg.jsp").forward(req, response);
return;
}
chain.doFilter(req, response);
}
@Override
public void destroy() {
}
}
步驟2：web.xml配置，只對訂單操作、購物車操作進行登錄權(quán)限校驗
<filter>
<filter-name>PrivilegeFilter</filter-name>
<filter-class>cn.com.javahelp.store.web.filter.PrivilegeFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>PrivilegeFilter</filter-name>
<url-pattern>/jsp/order_info.jsp</url-pattern>
<url-pattern>/jsp/order_list.jsp</url-pattern>
<url-pattern>/OrderServlet</url-pattern>
<url-pattern>/jsp/CartServlet</url-pattern>
</filter-mapping>
第3章 后臺頁面搭建
3.1 需求
今天我們要用EASYUI技術(shù)來實現(xiàn)WEB系統(tǒng)的后臺界面,如下圖:
3.2 相關(guān)知識點
3.3 案例分析
*_利用layout組件為后臺頁面進行整體布局布局形式為”西南北中”形式
*_利用according組件為后臺頁面西部區(qū)域進行布局,并且設(shè)置對應(yīng)的點擊鏈接
*_利用tabs組件為后臺頁面的中間區(qū)域?qū)崿F(xiàn)布局
*_實現(xiàn)頁面的JQ代碼
3.4 代碼實現(xiàn)
3.4.1 步驟1
<body>
<!-- 北部start... -->
<div region="north"
split="true"
border="false"
style="overflow: hidden;
height:30px;
background:url(/images/layout-browser-hd-bg.gif)
#7f99be repeat-x center 50%;
line-height:20px;
color:#fff;
font-family:Verdana, 微軟雅黑,黑體">
<span style="float:right;padding-right:20px;">歡迎管理員ad001
<a href="#" style="color:white;text-decoration: none" id="loginOut">
安全退出
</a>
</span>
<span style="padding-left:10px; font-size: 15px;">悟空教程商城 后臺</span>
</div>
<!-- 北部end... -->
<!-- 南部start.. -->
<div region="south" split="true" style="height: 30px; background: #D2E0F2; ">
<div style="text-align:center;color:#15428B; margin:0px;
padding:0px;line-height:23px; font-weight:bold;">
傳智播客版權(quán)所有
</div>
</div>
<!-- 南部end.. -->
<!-- 西部start...-->
<div data-options="region:'west',title:'',split:true,border:false"
style="width:180px;">
</div>
<!-- 西部end... -->
<!-- 中間start... -->
<div data-options="region:'center',title:'',border:false"
style="padding:5px;background:#eee;">
</div>
<!-- 中間end... -->
</body>
3.4.2 步驟2
在西部區(qū)域加入以下內(nèi)容
<div id="aa"
style="width:300px;height:200px;" data-options="fit:true,border:false">
<div title="分類管理" data-options="" style="padding:10px;">
<a href="http://www.baidu.com">訪問百度</a>
</div>
<div title="商品管理" data-options="selected:true">
<a href="http://www.jd.com">訪問京東</a>
<a href="http://www.taobao.com">訪問淘寶</a>
</div>
<div title="訂單管理">
<a href="http://www.csdn.com">訪問CSDN</a><br/>
</div>
為了使according組件中鏈接的樣式好看,加入以下樣式
.aa{ width:80%; background-color:#E0ECFF;
display:block;margin:10px auto;font-size: 15px;}
3.4.3 步驟3
<div id="tt" style="width:500px;height:250px;"
data-options="fit:true">
<div title="首頁"
data-options="iconCls:'icon-reload',border:false,closable:true"
style="padding:20px;">
歡迎來到首頁
</div>
</div>
3.4.4 步驟4
實現(xiàn)以下JQ語句
$(function(){
$("a[class=aa]").click(function(){
//alert("DDDD");
var url=this.href;
var title=this.innerHTML;
//alert(url+"<===>"+title);
addTab(url,title);
return false;
});
$(".aa").mouseover(function(){
$(this).css("background","");
$(this).css("background","#31507B").css("color","#FFF");
});
$(".aa").mouseout(function(){
$(this).css("background","");
$(this).css("background","#E0ECFF").css("color","#000");
});
});
function addTab(url,title){
if(!$("#tt").tabs("exists",title)){
$("#tt").tabs("add",{
title:title,
content:createStr(url),
closable:true
});
}else{
$("#tt").tabs("select",title);
}
}
function createStr(url){
Var str="<iframesrc='"+url+"' style='width:100%;height:100%'
frameborder='0'/>";
return str;
}
第4章 后臺分類管理
4.1 需求分析
用DataGrid組件實現(xiàn)對分類的管理
4.2 相關(guān)知識點
4.2.1 組件DataGrid的使用
4.2.1.1 JQ方式創(chuàng)建DataGrid組件
<table id="dg"></table>
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
4.2.1.2 DataGrid組件的屬性
url
一個URL從遠程站點請求數(shù)據(jù)
fitColumns
真正的自動展開/收縮列的大小，以適應(yīng)網(wǎng)格的寬度，防止水平滾動。
singleSelect
如果為true，則只允許選擇一行
rownumbers
如果為true，則顯示一個行號列
columns
DataGrid列配置對象
toolbar
頂部工具欄的DataGrid面板 一個數(shù)組，每個工具屬性都和linkbutton一樣
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('編輯按鈕')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('幫助按鈕')}
}]
});
4.3 案例分析
1_在頁面/admin/category/category.jsp中采用JQ的方式創(chuàng)建DataGrid
2_在頁面上實現(xiàn)Dialog對話框
3_完成頁面的JQ代碼
4.4 代碼實現(xiàn)
4.4.1 步驟1
創(chuàng)建DataGrid組件
頁面端代碼:
<div style="width:60%;margin:50px auto;">
<table id="dg"></table>
</div>
$(function(){
$('#dg').datagrid({
url:'/store_v3/CategoryServlet?method=findAllCats',
fitColumns:true,
singleSelect:true,
rownumbers:true,
columns:[[
{field:'cid',title:'分類id',width:100},
{field:'cname',title:'分類名稱',width:100}
]],
toolbar: [
{
iconCls: 'icon-edit',
text:'編輯',
handler: function(){
alert(“您正在編輯”);
}
},'-',{
iconCls: 'icon-add',
text:'添加分類',
handler: function(){
alert(“您正在添加”);
}
},'-',{
iconCls: 'icon-remove',
text:'刪除分類',
handler: function(){
alert(“您正在刪除”);
}
}]
});
});
服務(wù)端代碼
CategoryService CategoryService=new CategoryServiceImp();
List<Category> list=CategoryService.findAllCats();
String jsonStr=JSONArray.fromObject(list).toString();
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().print(jsonStr);
4.4.2 步驟2
創(chuàng)建對話框組件
<div id="dd"
class="easyui-dialog"
title="修改分類"
style="width:300px; height:160px;padding:5px;background: #fafafa;"
data-options="closed:true,iconCls:'icon-edit'">
<div fit="true">
<div region="center"
border="false"
style="padding:10px;background:#fff;border:1px solid #ccc;">
<table cellpadding='3'>
<tr id="row">
<td>分類id</td>
<td><input id="cid" type="text" name="cid"/></td>
</tr>
<tr>
<td>分類名稱</td>
<td><input id="cname" type="text" name="cname"/></td>
</tr>
</table>
</div>
<div region="south"
border="false"
style="text-align:right;height:30px;line-height:30px;">
<a id="btnEp"
icon="icon-ok" href="javascript:void(0)">確定</a>
<a id="btnCancel"
icon="icon-cancel" href="javascript:void(0)">取消</a>
</div>
</div>
</div>
4.4.3 步驟3
4.4.3.1 點擊DataGrid組件上的編輯按鈕
頁面端代碼:
var obj=$("#dg").datagrid("getSelected");
console.log(obj);
if(null!=obj){
globalUrl="/store_v3/AdminCategoryServlet?method=editCat";
$("#cid").val(obj.cid);
$("#cname").val(obj.cname);
$("#cid").attr("readonly",true);
$("#dd").dialog("open");
}else{
$.messager.alert("警告","請選中修改分類","warning");
}
服務(wù)端代碼
Category cat=MyBeanUtils.populate(Category.class, req.getParameterMap());
CategoryService CategoryService=new CategoryServiceImp();
CategoryService.updateCategory(cat);
String jsonStr="{\"flag\":true}";
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().print(jsonStr);
return null;
4.4.3.2 點擊DataGrid組件上的添加按鈕
頁面端代碼
globalUrl="/store_v3/AdminCategoryServlet?method=addCat";
$("#row").css("display","none");
$("#cname").val("");
$("#dd").dialog("open");
服務(wù)端代碼
String cname=req.getParameter("cname");
Category cat=new Category();
cat.setCid(UUIDUtils.getId());
cat.setCname(cname);
CategoryService CategoryService=new CategoryServiceImp();
CategoryService.addCat(cat);
String jsonStr="{\"flag\":true}";
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().print(jsonStr);
return null;
4.4.3.3 點擊DataGrid組件上的刪除按鈕
頁面端代碼
var obj=$("#dg").datagrid("getSelected");
if(null!=obj){
$.messager.confirm("刪除確認","你真忍心刪除嗎?",function(dt){
if(dt==true){
$.post("/store_v3/AdminCategoryServlet",
{"method":'delCat',"cid":obj.cid},
function(dt2){
$("#dd").dialog("close");
$("#dg").datagrid("reload");
});
}
});
}else{
$.messager.alert("警告","請選中被刪除的分類","warning");
}
服務(wù)端代碼
Category cat=MyBeanUtils.populate(Category.class, req.getParameterMap());
CategoryService CategoryService=new CategoryServiceImp();
CategoryService.delCategory(cat);
String jsonStr="{\"flag\":true}";
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().print(jsonStr);
return null;
4.4.3.4 點擊保存按鈕
頁面端代碼
$.ajax({
url:globalUrl,
beforeSend:function(){
if($("#cname").val()==""){
$.messager.alert("提示","請輸入分類名稱","warning");
return false;
}
},
data:{"cid":$("#cid").val(),"cname":$("#cname").val()},
success:function(dt){
if(dt.flag==true){
$("#dd").dialog("close");
$("#dg").datagrid("reload");
}
},
type:'post',
dataType:"json"
});
4.4.3.5 點擊對話框上的取消按鈕是
$("#dd").dialog("close");
第5章 后臺商品管理
5.1 需求
利用DataGrid組件,Form組件以及分頁組件實現(xiàn)對后臺商品的管理
5.2 相關(guān)知識點
5.2.1 Form組件
Form組件的使用方式
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input type="text"
name="name" data-options="required:true"/>
</div>
<div>
<label for="email">Email:</label>
<input type="text"
name="email" data-options="validType:'email'"/>
</div>
</form>
利用Form組件可以很方便的實現(xiàn)表單的Ajax提交動作
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
5.3 查詢商品信息
5.3.1 準(zhǔn)備工作
修改后臺主頁中的鏈接
<a href="${pageContext.request.contextPath}/admin03/product/product_list.jsp">
商品查看</a>
5.3.2 分析
1_當(dāng)用戶點擊商品查看鏈接時,向服務(wù)端發(fā)起請求,請求product_list.jsp頁面.服務(wù)端返回
product_list.jsp頁面,瀏覽器識別頁面中的datagrid組件和分頁組件
2_當(dāng)頁面加載完畢之后,瀏覽器再次向服務(wù)端發(fā)起一個ajax請求,獲取首頁的全部商品
信息以及全部商品的數(shù)量,并將返回的數(shù)據(jù)綁定在datagrid組件和分頁組件上
3_為分頁組件綁定onSelect事件,當(dāng)用戶點擊不同頁面時,向服務(wù)端再次發(fā)起請求
5.3.3 實現(xiàn)
1_實現(xiàn)頁面中datagrid組件和分頁組件的創(chuàng)建
<div id="tb">
<a href="#"
class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true" style="font-size: 12px;background: rgb(224, 224, 224)"> 添加</a>|
<a href="#"
data-options="iconCls:'icon-remove',plain:true" style="font-size: 12px;background: rgb(224, 224, 224)"> 刪除</a>
</div>
<div style="width:1000px;margin:30px auto;">
<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'pid',width:100">編號</th>
<th data-options="field:'pimage',
width:100,
formatter:
function(v){
return '<img src=${pageContext.request.contextPath}/'+v+' height=50px />'}">
商品</th>
<th data-options="field:'pname',width:200">名稱</th>
<th data-options="field:'shop_price',width:100,align:'right'">價格</th>
<th data-options="field:'pflag',width:100">下架</th>
</tr>
</thead>
</table>
<!-- 分頁欄 -->
<div id="pp" data-options=""
style="background:#efefef;border:1px solid #ccc;"></div>
</div>
2_頁面加載完畢之后向服務(wù)端發(fā)送AJAX請求,獲取響應(yīng)數(shù)據(jù),填充DataGrid組件和分頁組件
$("#dg").datagrid({
url:"${pageContext.request.contextPath}/AdminProductServlet?method=findAllProductsWithAjax&num=1",
fitColumns:true,
singleSelect:true,
toolbar:'#tb',
fitColumns:true,
singleSelect:true,
loadFilter : function(data) {
var data_ = {
"rows" : data.list,
"total" : data.total
};
$("#pp").pagination({
total:data.total,
pageSize:8,
pageList:[8]
});
return data_;
}
});
$("#pp").pagination({
onSelectPage: function(pageNumber, pageSize){
$("#dg").datagrid( { url :"${pageContext.request.contextPath}/AdminProductServlet?method=findAllProductsWithAjax&num="+pageNumber,
closable : true,
checkOnSelect : true,
striped : true,
rownumbers : true,
fitColumns : true,
loadFilter : function(data) {
var data_ = {
"rows" : data.list,
"total" :data.total
}
$("#pp").pagination( {
total : data.total
});
return data_;
}
});
}
});
3_實現(xiàn)服務(wù)端代碼
int curNum=Integer.parseInt(req.getParameter("num"));
ProductService ProductService = new ProductServiceImp();
PageModel pm=ProductService.findProductsWithPage(curNum);
List<Product> list=pm.getList();
for(Product p:list){
p.setPdate(null);
}
Map<String,Object> map=new HashMap<String,Object>();
map.put("list", list);
map.put("total", pm.getTotalRecords());
String jsonStr=JSONObject.fromObject(map).toString();
System.out.println(jsonStr);
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().println(jsonStr);
return nul;
5.4 上傳商品
5.4.1 分析:
5.4.1.1 流程分析
5.4.1.2 步驟分析
1_頁面端實現(xiàn)上傳商品對話框
2_當(dāng)在對話框中填寫完商品數(shù)據(jù)之后,點擊確定,利用Form組件向服務(wù)端發(fā)起Ajax請求
3_服務(wù)端接受商品數(shù)據(jù),將圖片存入到服務(wù)端的某個路徑下,同時將數(shù)據(jù)存入到數(shù)據(jù)庫中,向客戶端
返回上傳成功提示信息
4_瀏覽器接收到上傳成功消息,關(guān)閉對話框,重新加載DataGrid組件中的內(nèi)容
5.4.2 代碼實現(xiàn)
步驟1_實現(xiàn)上傳商品對話框
<div id="dd"
class="easyui-dialog"
title="添加商品"
style="width:315px;height:200px;padding:5px;background: #fafafa;"
data-options="closed:true,iconCls:'icon-add'">
<div fit="true">
<div region="center"
border="false"
style="padding:10px;background:#fff;border:1px solid #ccc;">
<form method="post" enctype="multipart/form-data" id="fm">
<table cellpadding='3' border="0">
<tr>
<td>商品</td>
<td><input type="file" name="pimage"/></td>
</tr>
<tr>
<td>名稱</td>
<td><input id="pname" type="text" name="pname"/></td>
</tr>
<tr>
<td>價格</td>
<td><input type="text" name="shop_price"/></td>
</tr>
</table>
</form>
</div>
<div region="south" border="false"
style="text-align:right;height:30px;line-height:30px;">
<a id="btnEp" icon="icon-ok"
href="javascript:void(0)">確定</a>
<a id="btnCancel" icon="icon-cancel"
href="javascript:void(0)">取消</a>
</div>
</div>
</div>
步驟2_點擊DataGrid組件中的添加商品功能
globalUrl="/store_v3/AddProductServlet";
$("#dd").dialog("open");
PS:globalUrl為JS中定義好的一個全局變量,存儲不同的路徑
步驟3:點擊保存功能
$("#btnEp").click(function(){
$('#fm').form('submit', {
url:"${pageContext.request.contextPath}/AddProductServlet",
onSubmit: function(){
},
success:function(data){
var dt=eval("("+data+")");
if(dt.flag){
$.messager.alert("成功提示",dt.msg,"info");
$("#dd").dialog("close");
$("#dg").datagrid("reload");
}
}
});
});
步驟4:完成服務(wù)端商品上傳代碼
DiskFileItemFactory fac=new DiskFileItemFactory();
ServletFileUpload fileUpload=new ServletFileUpload(fac);
//攜帶數(shù)據(jù)
Product product=new Product();
Map<String,String> map=new HashMap<String,String>();
try {
List<FileItem> list=fileUpload.parseRequest(request);
for(FileItem item:list){
if(item.isFormField()){
map.put(item.getFieldName(), item.getString());
}else{
//獲取到服務(wù)端圖片要上傳的真實路徑 D:\tomcat\tomcat\wtpwebapps\store_v3\products\3
String path=this.getServletContext().getRealPath("/products/3");
System.out.println("path....."+path);
//獲取文件名稱 111.bmp
String fileName=item.getName();
//獲取文件最終名稱 2343242342432424.bmp
String fName=UploadUtils.getUUIDName(fileName);
// /4/a/f/c/2/7/7/0
String path02=UploadUtils.getDir(fName);
// D:\tomcat\tomcat\wtpwebapps\store_v3\products\3/4/a/f/c/2/7/7/0
File f=new File(path+path02);
//創(chuàng)建文件夾
if(!f.exists()){
f.mkdirs();
}
//創(chuàng)建文件
//D:\tomcat\tomcat\wtpwebapps\store_v3\products\3/4/a/f/c/2/7/7/0
//2343242342432424.bmp
File ff=new File(f,fName);
if(!ff.exists()){
ff.createNewFile();
}
FileOutputStream ops=new FileOutputStream(ff);
InputStream is=item.getInputStream();
IOUtils.copy(is, ops);
IOUtils.closeQuietly(is);
IOUtils.closeQuietly(ops);
// products/3/4/a/f/c/2/7/7/0
product.setPimage("products/3"+path02+"/"+fName);
}
}
BeanUtils.populate(product, map);
product.setPid(UUIDUtils.getId());
product.setPdate(new Date());
product.setPflag(0);
System.out.println(product);
ProductService ProductService=new ProductServiceImp();
ProductService.addProduct(product);
Map<String,String> mp=new HashMap<String,String>();
mp.put("msg", "文件上傳成功");
mp.put("flag", "true");
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(JSONObject.fromObject(mp).toString());
} catch (Exception e) {
e.printStackTrace();
}
點擊取消按鈕時
$("#btnCancel").click(function(){
$("#dd").dialog("close");
});
第6章 部署
6.1 需要
將項目部署到linux系統(tǒng)下
6.2 步驟
6.2.1 war包
使用eclipse將web項目打成war包
6.2.2 準(zhǔn)備工作
安裝jdk，已經(jīng)配置
vim /etc/profile
安裝tomcat
vim /etc/sysconfig/iptables
安裝mysql
yum install MySQL-*.rpm
創(chuàng)建遠程訪問用戶
use mysql;
select user,host,password from user;
create user 'root'@'%' identified by '1234'; #創(chuàng)建用戶，并設(shè)置密碼
grant all on *.* to 'root'@'%' with grant option; #給指定的用戶授權(quán)
flush privileges; #刷新權(quán)限
安裝redis
6.2.3 初始化數(shù)據(jù)庫數(shù)據(jù)
6.2.4 上傳war到tomcat下
6.2.5 訪問
6.2.6 注意：亂碼問題
如果是window 的cmd命令創(chuàng)建初始化數(shù)據(jù)庫，需要
