ssm實戰--實現購物車功能
========================================後臺管理系統==================================================
管理人員可以在這裡釋出商品,檢視訂單等等操作
商品管理
* 帶條件查詢商品,通過boostrap的分頁外掛展示商品列表
* 建立商品,新增商品的資訊以及必須上傳五張照片用來展示商品效果
* 編輯商品
* 刪除商品
1.上傳圖片
* form表單的method="post" enctype="multipart/form-data"
* 用於接收表單元素所提交引數的處理器方法的形參型別為 MultipartFile 陣列,且必須使用註解@RequestParam 修飾
* 處理器方法中形參名字必須和表單中的name屬性一致
* 要想判斷是否上傳的圖片為空,不能用== null來判斷,必須用isEmpty(),因為系統會為每一個表單元素建立物件
* 向資料庫中儲存圖片,儲存的是圖片在專案中所在資料夾的地址,這樣讀取時可以直接訪問
2.表單驗證
* 提交表單的時候又想保留原來表單提交的方式,還想處理後臺返回的資訊,可以使用ajaxForm
$(function(){ // 點選報存按鈕提交表單 $("#saveProductBtn").click(function(){ $("#productForm").prop("action","product/saveProduct.do"); $("#productForm").submit(); }); // ajaxForm配置完,並不會真正的提交,而是要等到submit()事件,才會提交 $("#productForm").ajaxForm({ //clearForm:true, //提交成功後清空所有表單欄位值(包括文字域,但是檔案不會清空) //dataType:json, //type:"POST", resetForm:true, //表示成功提交後重置所有欄位 beforeSubmit:function(){ // 在提交前進行表單驗證 if(!checkProductNo() || !checkTitle() || !checkPrice() || !checkPhotos()){ return false; } return true; }, success:function(data){ if(data.success){ $("#message").text("儲存成功"); window.location.href = "${pageContext.request.contextPath}/product/index.do"; }else{ $("#message").text("儲存失敗"); } } }); });
* 但是要注意的一點是,在有檔案控制元件提交時,ajaxForm會自動過濾掉上傳為空的控制元件。
比如說總共有五個檔案控制元件,使用者只給三個控制元件選擇了上傳內容,通過ajaxForm傳到後臺的只有三個,但是通過原始Form傳到
後臺的有五個。所以在這樣的情況下,我們必須使用原始的form表單。
驗證可以在表單中有一個type="submit"的按鈕,form 屬性定義onsubmit="return 方法名();"
3.批量選擇資料
除了直接拼接,下面的方法用到陣列的特性
// 定義一個數組 var array = []; $o.each(function(){ // 向陣列中新增元素 array.push(this.value); }) // 通過分隔符將陣列中的元素拼接成一個字串 var data = "ids=" + array.join("&ids=");
========================================前端購物平臺==================================================
展示給使用者的頁面,使用者可以瀏覽商品新增購物車結算付款
1.頁面之間的跳轉
除了首頁(展示商品的主頁面)之外,其餘的頁面為了保護資料的安全性均放在WEB-INF下,所以頁面之間的跳轉需要通過controller來實現
2.從哪個頁面點選登入或註冊連結,操作成功後重新回到原來的頁面,需要將當前頁面的url傳給處理器
// 給"註冊"按鈕繫結單擊事件
$("#registerCustomerBtn").click(function(){
// 獲得當前URL
var returnURL = window.location.href;
window.location.href ="${pageContext.request.contextPath}/portal/main/register.do?returnURL="+returnURL;
});
3.新增購物車
這是最重要的一部分,業務上分為兩種情況,使用者在不登入和登入的狀態下都可以將商品新增到購物車
首先分析的是不登入的狀態:
遊客不登入,就不能將購物車狀態記錄到資料庫中,所以如何保留資料狀態是問題的關鍵。這時候我們想到的是cookie,
將資料儲存到瀏覽器本地。那麼如何儲存?購物車中的資訊包括兩部分,一部分是商品的詳細資訊,一部分是購買商品的數量。
所以將關鍵的商品標識和購買數量以"商品標識1-購買數量,商品標識2-購買數量,...."的形式儲存到cookie中。
有了思路,就是如何去實現?
由於對cookie的操作很繁瑣,所以以下操作可以寫到一個工具類中,方便呼叫:
* 新增商品操作
遊客在點選某一商品新增到購物車時,首先需要得到本地cookie的值,檢視本商品是否已經在cookie中。
(1)如果在,那麼直接更新該商品標識的數量即可。
(2)如果不在,就直接向cookie中新增該商品標識的資訊即可
* 刪除商品操作
得到cookie,找到該商品標識的鍵值對,清空即可
* 修改商品數量操作
得到cookie,找到對應商品標識,更新數量
* 統計購物車商品總數量
得到cookie,遍歷將數量相加,將總數量放到session中
* 展示cookie中的購物車
拿到cookie中的商品標識去資料庫中查詢詳細資訊
得到新拼接好的cookie響應給瀏覽器
其次分析的是登入狀態:
也分為兩種情況:
(1)使用者註冊
遊客在瀏覽商品過程中突然有了購買意向,將商品加入購物車去註冊新賬號,由於是新使用者,所以購物車表中肯定沒
有該使用者的資料,但是要得到cookie的值,判斷是否為空:
-----為空:不做處理,直接註冊成功
-----不為空:需要將cookie中的商品標識插入到購物車表中
(2)使用者登入
得到cookie的值,判斷是否為空
-----為空:不做處理,直接登入成功
-----不為空:判斷cookie中的商品標識是否已經存在購物車表中
---------如果存在:將cookie中的數量加上原來購物車中的數量更新
---------如果不存在:將該商品標識的資料插入到購物車中
得到購物車中商品總數量:由於每次會將cookie中的值更新到資料庫中,所以直接查詢資料庫計算總數即可。
展示購物車中的商品:直接查詢該使用者的購物車表
其他邊邊角角的問題:
a)Dao層有多個字串型別的引數,不封裝Map,如何應用?
Integer selectCountOfShoppingCart(@Param("customerId") Integer customerId, @Param("status") String status);
b) 對於一些在多個類中經常用到的變數,可以定義成系統常量,這樣如果發生變動,只需要改一處即可
public class ApplicationConstant {
/**
* 將使用者資訊儲存到session作用域的常量
*/
public static final String SESSION_CUSTOMER = "session_customer";
/**
* cookie中關於購物車的標識
*/
public static final String COOKIE_SHOPCART = "cookie_shopcart";
/**
* 購物車中商品總數量
*/
public static final String COUNTOFSHOPCART = "count_of_shopcart";
}
c)前臺對於有無使用者session的購物車數量展示可以通過jstl標籤
<c:choose>
<c:when test="${not empty session_customer}">
。。。。。
</c:when>
<c:otherwise>
。。。。。
</c:otherwise>
</c:choose>
d)重新整理當前頁面
location.replace(location);
e)判斷table中是否有內容
if($(".shoppingBox table tr:visible").length == 0){
alert("沒有商品可以結算");
return;
}
f)mybatis中統計數量
<!-- 查詢使用者標識下購物車的總數量 -->
<select id="selectCountOfShoppingCart" resultType="int">
select
ifnull(sum(purchaseCount),0)
from tbl_shopping_cart
where
customerId = #{customerId} and status = #{status}
</select>
g)回退
onclick="window.history.back(-1);"
相關推薦
ssm實戰--實現購物車功能
========================================後臺管理系統================================================== 管理
ssm系列實戰(5)——實現購物車功能,事務實現提交訂單
本篇為實戰系列第五篇,用session實現購物車功能,事務實現提交訂單 什麼是Session: 使用Cookie和附加URL引數都可以將上一次請求的狀態資訊傳遞到下一次請求中,但是如果傳遞的狀態資訊較多,將極大降低網路傳輸效率和增大伺服器端程式處理的
電商---實現購物車功能
decode typeof led 不存在 htm 問題 cap ssi des 購物車實現3種方式 1、利用cookie 優點:不占用服務器資源,可以永遠保存,不用考慮失效的問題 缺點: 對購買商品的數量是有限制的,存放數據的大小 不可以超過2k,用戶如果禁用cook
VUE.JS實現購物車功能
add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能,可以讓用戶一次性購買多個商品,常見的購物車實現方式有如下幾種: 1. 用戶更新購物車裏的商品後,頁面自動刷新。 2. 使用局部刷新功能,服務器端返回整個購物
實現購物車功能 --- 文件操作版
sent not 判斷 保存 進入 ali 修改 能夠 ret 1.用戶接口 >>>判斷用戶工資是否有記錄 >>>能夠從文件中讀取商品列表 >>>能夠選擇想要的商品,並扣除工資 >>>打印並保存訂單信息
1.實現購物車功能
alex for div 直接 watch car code pen dex # 1輸入工資,打印商品列表 # 2根據id選擇商品 # 3選擇商品檢查余額是否不足,直接扣款,提醒 # 4隨時退出,打印購物車 product_list = [ (‘Iphone‘,
cookie來實現購物車功能
pub boolean lis 商品 tao this token ont variable 一、大概思路 1、從cookie中取商品列表 2、判斷要添加的商品是否存在cookie中。 3、如果已添加過,則把對應的商品取出來,把要添加的商品的數量加上去。 4
用python實現購物車功能
功能 鼠標 購物車 %d () 顯示 ood 自己 根據 """功能要求:1.要求用戶輸入自己擁有的總資產,例如:20002.顯示商品列表的序號,商品名稱,商品價格,讓用戶根據序號選擇商品,然後加入購物車 例如: 1 電腦 1999 2 鼠
vue商品分類,實現購物車功能
new Vue({ el: "#app", data: { cIndex: 0, lists: [ { title: "推薦商品", goods: [
會話跟蹤:實現購物車功能
小白成長記,不
用OC和UI實現購物車功能 在iOS平臺上
購物車專案 作用:可以通過按鈕把物品簡單的新增到購物車中 思路: 一,設定兩個加減按鈕,有普通,高亮和enable狀態,在interface中有屬性宣告 二,設定購物車的imageview,在interface中有屬性宣告 三,設定陣列裝載字典物件,字典裡包含物品圖片
vuex實現購物車功能
購物車功能描述: 1. 點選+,-按鈕,“已選:xx件”隨之增減 2. checkbox選中時,當前項的已選數量增加到頭部“已選擇xx件”中,未選中時數量不計入 程式碼: 服務端 node+koa+koa-router server.js 1 const koa = require('
簡單的實現購物車功能,還有不到位的地方,加油!!!
要求: 1 import time 2 goods = [{"huawei":1000},{"apple":10},{"banana":23},{"pen":140},{"wanju":78}, 3 {"book":200},{"taiden
在做商城專案實現購物車功能的時候除了個小bug...
@Autowired private ItemService itemService; @Value("${COOKIE_CART_EXPIRE}") private int COOKIE_CART_EXPIRE; @Autowired private Cart
h5本地快取實現購物車功能(全功能)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>購物車特效</title>
Vue實現購物車功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
angular js 配合ajax 實現購物車功能
<?php namespace app\index\controller; use think\Controller; use think\Db; class Gowu extends Controller { public function index() {
微信小程式如何實現購物車功能
不管是商城類還是餐飲類小程式,都需要通過下單完成交易,因此都需要有一個加入購物車的操作。以往購物車功能基本都是通過大量的 DOM 操作來實現,由於小程式不是基於web以此無法建立DOM。其實跟 vue.js 的用法非常像。先來弄清楚購物車的需求。單選、全選和取消,而且會隨著選
利用jQuery實現購物車功能
<!DOCTYPE html> <html> <head> <title>購物車----jQuery</title> <meta charset="utf-8" /> <
利用GridView實現購物車功能
Partial Class Shopping Inherits System.Web.UI.Page Private sds As SqlDataSource = New SqlDataSource(Dao.ConnectionString, "select shoppi