簡(jiǎn)介這是一份面向JavaWeb初學(xué)者的簡(jiǎn)易購(gòu)物車項(xiàng)目完整源碼基于Servlet、JSP、Session、JDBC及MVC模式實(shí)現(xiàn)商品瀏覽、加入購(gòu)物車、修改數(shù)量、刪除商品等常見功能適合正在學(xué)習(xí)JavaWeb核心知識(shí)、準(zhǔn)備課程設(shè)計(jì)或希望理解完整業(yè)務(wù)邏輯的開發(fā)者參考。壓縮包共54個(gè)文件以Java源文件、JSP頁(yè)面、class編譯文件為主同時(shí)包含數(shù)據(jù)庫(kù)腳本、XML配置、properties配置、JSTL相關(guān)支持及項(xiàng)目導(dǎo)入所需文件整體僅1.58MB解壓即可開始學(xué)習(xí)。資源附帶了配套筆記與開發(fā)文檔逐模塊講解了HTTP請(qǐng)求處理、Session狀態(tài)保持、數(shù)據(jù)庫(kù)增刪改查、JSTL與EL表達(dá)式簡(jiǎn)化頁(yè)面以及異常和SQL注入等安全注意事項(xiàng)還提供目錄結(jié)構(gòu)和部署說(shuō)明便于快速在Tomcat中運(yùn)行。目前已有4125人學(xué)習(xí)下載無(wú)論是入門鞏固還是項(xiàng)目實(shí)戰(zhàn)借鑒都能從中獲得清晰的實(shí)現(xiàn)思路。1. javaWeb簡(jiǎn)易購(gòu)物車源代碼能做什么先跑通會(huì)話再談數(shù)據(jù)庫(kù)剛學(xué)完 Servlet 和 JSP很多人第一個(gè)想動(dòng)手的完整案例不是博客就是購(gòu)物車。購(gòu)物車這個(gè)題目好在它小卻能把你被迫摸一遍會(huì)話跟蹤、數(shù)據(jù)庫(kù) CRUD、表單提交、重定向這些 JavaWeb 基本功。市面上常見的 javaWeb 簡(jiǎn)易購(gòu)物車源代碼核心套路就是商品表放 MySQL購(gòu)物車數(shù)據(jù)放 Session用 Servlet 做入口JSP 做展示配合 Tomcat 就能跑起來(lái)。它能解決的是“讓用戶在沒(méi)有登錄的前提下也能選商品、改數(shù)量、看總價(jià)”這件事適合課程設(shè)計(jì)、畢業(yè)設(shè)計(jì)前練手也適合拿來(lái)理解一個(gè)完整 javaweb 項(xiàng)目完整案例 mysql 的目錄是什么樣。新手拿到這類源代碼第一件事不是急著跑而是先讀懂存儲(chǔ)在 Session 里的購(gòu)物車到底是怎么被“記下來(lái)”的。HTTP 本來(lái)是無(wú)狀態(tài)的用戶每次請(qǐng)求都像第一次來(lái)購(gòu)物車能跨頁(yè)面記住靠的就是 Session 里的一個(gè)對(duì)象。下面我會(huì)按數(shù)據(jù)模型、核心邏輯、運(yùn)行配置、踩坑記錄這個(gè)順序把這個(gè)方案從頭到尾講清楚代碼可以直接照著敲。2. 數(shù)據(jù)模型與項(xiàng)目結(jié)構(gòu)三張表和一個(gè) Map 把購(gòu)物車立起來(lái)2.1 為什么用 Session 直接存購(gòu)物車而不是一開始就建表購(gòu)物車本質(zhì)上是一個(gè)“臨時(shí)訂單”存哪里決定了項(xiàng)目的復(fù)雜度。很多新手的第一個(gè)反應(yīng)是把購(gòu)物車設(shè)計(jì)成數(shù)據(jù)庫(kù)表但那樣需要引入用戶表、會(huì)話標(biāo)識(shí)、CRUD 邏輯甚至要考慮登錄和匿名購(gòu)物的關(guān)聯(lián)復(fù)雜度一下子翻倍。簡(jiǎn)易購(gòu)物車最常見做法是把購(gòu)物車對(duì)象直接放進(jìn) HttpSession用瀏覽器那次會(huì)話當(dāng)作購(gòu)物車的生命周期。原理是用戶第一次訪問(wèn)時(shí)Tomcat 會(huì)在服務(wù)端創(chuàng)建一個(gè) Session并通過(guò) Cookie 把 JSESSIONID 寫回瀏覽器后續(xù)請(qǐng)求帶上這個(gè) ID服務(wù)端就能找到對(duì)應(yīng)的 Session 對(duì)象。購(gòu)物車就是 Session 里的一個(gè)屬性比如一個(gè)名叫 cart 的對(duì)象。這樣做的好處是用戶不需要登錄就能加購(gòu)各用戶的購(gòu)物車天然隔離代碼量也很小。邊界也很清楚Session 存在服務(wù)端內(nèi)存里服務(wù)器一重啟就沒(méi)了用戶清了 Cookie 也就丟了購(gòu)物車。如果你的場(chǎng)景是用戶登錄后換一臺(tái)設(shè)備購(gòu)物車還能同步那就必須改成數(shù)據(jù)庫(kù)方案建 user_cart 表和 user_cart_item 表把購(gòu)物車持久化到 MySQL。但既然是“簡(jiǎn)易”購(gòu)物車先從 Session 方案起步是最合理的。等 Session 方案跑通了再在登錄邏輯里做合并把 Session 購(gòu)物車倒進(jìn)數(shù)據(jù)庫(kù)這樣代碼演進(jìn)有條理。2.2 建表 SQL 與實(shí)體類設(shè)計(jì)購(gòu)物車項(xiàng)必須帶上數(shù)量和單價(jià)Session 購(gòu)物車即使不需要購(gòu)物車表商品表還是要有的。最簡(jiǎn)單的一張商品表至少包含商品主鍵、名稱、價(jià)格、庫(kù)存、圖片路徑、描述。下面這是我常用的建表腳本字符集建議直接用 utf8mb4不然中文描述很容易出問(wèn)題。CREATE DATABASE shop DEFAULT CHARACTER SET utf8mb4; CREATE TABLE product ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL, price DECIMAL(10,2) NOT NULL, stock INT NOT NULL DEFAULT 0, image VARCHAR(255) DEFAULT , description VARCHAR(500) DEFAULT );AUTO_INCREMENT 讓商品 id 自增price 用 DECIMAL(10,2) 而不是 FLOAT是為了避免浮點(diǎn)數(shù)導(dǎo)致金額計(jì)算出現(xiàn) 0.300000004 這種離譜結(jié)果。stock 字段在結(jié)算時(shí)要參與樂(lè)觀鎖扣減后面避坑那一章會(huì)專門講。image 和 description 都可以先留空不影響購(gòu)物車主流程。購(gòu)物車實(shí)體類我習(xí)慣建兩個(gè)CartItem 表示一條購(gòu)物車記錄Cart 表示整個(gè)購(gòu)物車。CartItem 必須包含商品 id、名稱、單價(jià)、數(shù)量和小計(jì)特別是“數(shù)量”不能省否則沒(méi)法處理同一種商品加購(gòu)多次的情況。public class CartItem { private int productId; private String name; private double price; private int quantity; public CartItem(int productId, String name, double price, int quantity) { this.productId productId; this.name name; this.price price; this.quantity quantity; } public double getSubtotal() { return price * quantity; } // getter/setter 省略實(shí)際開發(fā)要補(bǔ)全 }代碼里的 price 來(lái)源要特別說(shuō)明加購(gòu)時(shí)從商品表查出來(lái)塞進(jìn) CartItem這個(gè)價(jià)格只是給 JSP 頁(yè)面展示用的。真正下單結(jié)算時(shí)必須重新查數(shù)據(jù)庫(kù)里的最新價(jià)格覆蓋它否則管理員一改價(jià)購(gòu)物車?yán)锏慕痤~就和實(shí)際下單金額對(duì)不上。至于為什么不在每次顯示購(gòu)物車時(shí)都查一次數(shù)據(jù)庫(kù)原因很簡(jiǎn)單簡(jiǎn)易項(xiàng)目用 Session 緩存可以減少一次查詢代價(jià)就是價(jià)格可能滯后。Cart 類的核心是一個(gè) Map以商品 id 為 keyCartItem 為 value。用 Map 而不是 List是因?yàn)榧淤?gòu)時(shí)判斷“這個(gè)商品在不在購(gòu)物車?yán)铩敝恍枰淮?containKey時(shí)間為 O(1)省去遍歷。import java.util.*; public class Cart { private MapInteger, CartItem items new HashMap(); public void addItem(CartItem item) { if (items.containsKey(item.getProductId())) { CartItem old items.get(item.getProductId()); old.setQuantity(old.getQuantity() item.getQuantity()); } else { items.put(item.getProductId(), item); } } public void removeItem(int productId) { items.remove(productId); } public void updateQuantity(int productId, int quantity) { CartItem item items.get(productId); if (item ! null) { item.setQuantity(quantity); } } public ListCartItem getItems() { return new ArrayList(items.values()); } public double getTotalPrice() { return items.values().stream() .mapToDouble(CartItem::getSubtotal).sum(); } }addItem 方法里最關(guān)鍵的就是 containsKey 分支同一個(gè)商品再次加購(gòu)時(shí)不新增一條記錄而是在原記錄上疊加數(shù)量。更新數(shù)量時(shí)如果傳入 0 或負(fù)數(shù)調(diào)用方應(yīng)該先 removeItem避免購(gòu)物車出現(xiàn)數(shù)量為 0 的臟數(shù)據(jù)。2.3 目錄結(jié)構(gòu)怎么放MVC 分層不是架出來(lái)的是擺出來(lái)的很多課程設(shè)計(jì)源碼最大的問(wèn)題不是沒(méi)分層而是把所有 Servlet 堆在一個(gè)包、所有 JSP 堆在根目錄。拿到一個(gè) javaWeb 簡(jiǎn)易購(gòu)物車源代碼你先看目錄結(jié)構(gòu)基本就能判斷這代碼值不值得繼續(xù)讀。我一般按下面這樣組織 Maven 項(xiàng)目src/main/java/com/example/shop ├── entity # CartItem, Cart, Product, Order ├── dao # ProductDao, OrderDao用 JDBC 操作 MySQL ├── service # OrderService負(fù)責(zé)結(jié)算事務(wù) ├── web # CartServlet, OrderServlet, ProductServlet src/main/webapp ├── static/iconfont # 圖標(biāo)庫(kù)字體文件 ├── WEB-INF/jsp # 購(gòu)物車頁(yè)、商品列表頁(yè)、結(jié)算頁(yè)面 ├── index.jsp └── WEB-INF/web.xmlServlet 只做三件事接收參數(shù)、調(diào)用 service、決定跳轉(zhuǎn)還是重定向。DAO 層只管 SQL返回值給上層。JSP 盡量只用 EL 表達(dá)式和 JSTL 展示數(shù)據(jù)不要在 JSP 里寫大段 Java 腳本片段。這樣分開之后拿到源碼的人第一眼就能知道哪里改頁(yè)面、哪里改邏輯、哪里改 SQL。JSP 文件放在 WEB-INF 下是我的習(xí)慣因?yàn)?WEB-INF 下的資源不能被瀏覽器直接訪問(wèn)必須通過(guò) Servlet forward 出來(lái)可以防止用戶繞過(guò)流程直接打開購(gòu)物車頁(yè)面。如果項(xiàng)目里沒(méi)有用 MVC 框架Servlet 里用 request.getRequestDispatcher(/WEB-INF/jsp/cart.jsp).forward(req, resp) 就能把數(shù)據(jù)帶過(guò)去。這里的“MVC 分層不是架出來(lái)的”意思是不用引入 Spring MVC光靠 Servlet 和 JSP 的物理目錄劃分就能把職責(zé)拆開。3. 購(gòu)物車核心邏輯實(shí)現(xiàn)加購(gòu)、改數(shù)量、結(jié)算三個(gè)動(dòng)作寫進(jìn)一個(gè) Servlet3.1 加入購(gòu)物車先查商品再塞 Session最后重定向購(gòu)物車最常見的入口是商品列表頁(yè)的“加入購(gòu)物車”按鈕。點(diǎn)擊后把商品 id 通過(guò) POST 提交到 CartServletServlet 先判斷 Session 里有沒(méi)有 cart沒(méi)有就 new 一個(gè)然后根據(jù) id 查商品查到了再組裝 CartItem 放進(jìn)去。下面是核心代碼action 參數(shù)用來(lái)區(qū)分本次請(qǐng)求是加購(gòu)還是更新數(shù)量。WebServlet(/cart) public class CartServlet extends HttpServlet { private ProductDao productDao new ProductDao(); Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding(UTF-8); String action req.getParameter(action); if (add.equals(action)) { addItem(req, resp); } else if (update.equals(action)) { updateQuantity(req, resp); } } private void addItem(HttpServletRequest req, HttpServletResponse resp) throws IOException { HttpSession session req.getSession(); Cart cart (Cart) session.getAttribute(cart); if (cart null) { cart new Cart(); session.setAttribute(cart, cart); } int productId Integer.parseInt(req.getParameter(productId)); int quantity 1; if (req.getParameter(quantity) ! null) { quantity Integer.parseInt(req.getParameter(quantity)); } Product product productDao.findById(productId); if (product ! null product.getStock() quantity) { cart.addItem(new CartItem( product.getId(), product.getName(), product.getPrice(), quantity)); } resp.sendRedirect(req.getContextPath() /WEB-INF/jsp/cart.jsp); } }doPost 開頭先 setCharacterEncoding(UTF-8)是為了處理表單提交過(guò)來(lái)的中文參數(shù)。action 這個(gè)參數(shù)是整個(gè) Servlet 的分流開關(guān)前端每個(gè)表單里放一個(gè) hidden 字段名字就叫 action提交時(shí)告訴服務(wù)端這次要做什么。加購(gòu)邏輯里有兩個(gè)防御點(diǎn)商品查出來(lái)是 null 就什么都不加庫(kù)存不夠也不加。這里對(duì)庫(kù)存只是預(yù)防性判斷真正要能攔住并發(fā)超賣得靠后面結(jié)算時(shí)的 SQL 扣減。最后用 sendRedirect 而不是 forward是因?yàn)榧淤?gòu)后瀏覽器地址欄會(huì)變成/cart用戶按 F5 刷新時(shí)只重發(fā)一個(gè) GET 請(qǐng)求不會(huì)重復(fù)提交表單把同一種商品再加一遍。這是典型的 Post/Redirect/Get 模式簡(jiǎn)易項(xiàng)目也值得一上來(lái)就用。3.2 修改數(shù)量與單條刪除用 action 參數(shù)讓一個(gè) Servlet 吃下所有操作購(gòu)物車頁(yè)面要支持用戶改數(shù)量、刪除某一行如果每個(gè)操作單獨(dú)寫一個(gè) Servlet目錄會(huì)很難看。常見做法是繼續(xù)復(fù)用 CartServlet通過(guò) action 參數(shù)區(qū)分。更新數(shù)量的邏輯里有個(gè)容易忽略的細(xì)節(jié)數(shù)量小于等于 0 時(shí)不能直接更新而應(yīng)該調(diào)用 removeItem 把它刪掉否則購(gòu)物車列表會(huì)冒出行數(shù)量為 0 的商品。private void updateQuantity(HttpServletRequest req, HttpServletResponse resp) throws IOException { Cart cart (Cart) req.getSession().getAttribute(cart); if (cart null) { resp.sendRedirect(req.getContextPath() /cart.jsp); return; } int productId Integer.parseInt(req.getParameter(productId)); int quantity Integer.parseInt(req.getParameter(quantity)); if (quantity 0) { cart.removeItem(productId); } else { cart.updateQuantity(productId, quantity); } resp.sendRedirect(req.getContextPath() /cart.jsp); }這里先取 Session 里的 cart如果為空說(shuō)明會(huì)話過(guò)期或者用戶沒(méi)加購(gòu)過(guò)任何商品直接重定向到購(gòu)物車頁(yè)面不要再繼續(xù)往下走。前端提交數(shù)量時(shí)我建議用表單里帶數(shù)字輸入框的方式input 的 name 設(shè)為 quantity這樣用戶點(diǎn)“更新數(shù)量”按鈕觸發(fā)提交。避免用 checkbox 數(shù)組是因?yàn)閯h除多條和更新多條混合在一起代碼會(huì)變得難讀。Cart 里的 updateQuantity 方法只負(fù)責(zé)改數(shù)字不負(fù)責(zé)判斷數(shù)量上限。如果需要限制用戶一次最多買 99 件可以在 Servlet 里加一個(gè) if (quantity 99) 的校驗(yàn)也可以在 JSP 的 input 上寫 max99。我給新手一般建議兩邊都做JSP 限制操作手感Servlet 限制真正的數(shù)據(jù)邊界。前端校驗(yàn)可以被繞過(guò)所以 Servlet 里那層才是關(guān)鍵。3.3 結(jié)算與庫(kù)存校驗(yàn)錢算對(duì)了不代表能下單購(gòu)物車頁(yè)面顯示總價(jià)很容易遍歷 Cart.getItems() 累加 getSubtotal() 就行。但真正點(diǎn)擊“去結(jié)算”時(shí)不能直接拿 Session 里的商品價(jià)格和庫(kù)存去生成訂單因?yàn)?Session 里的數(shù)據(jù)是用戶加購(gòu)那一刻的緩存可能已經(jīng)過(guò)期。我見過(guò)很多項(xiàng)目在這里翻車管理員在后臺(tái)改了價(jià)格老顧客結(jié)算時(shí)購(gòu)物車頁(yè)面顯示舊價(jià)格提交訂單卻按新價(jià)格扣款用戶投訴金額對(duì)不上。先寫一個(gè)結(jié)算前校驗(yàn)的框架重點(diǎn)是重查數(shù)據(jù)庫(kù)并扣庫(kù)存public Order createOrder(Cart cart, int userId) { ListCartItem items cart.getItems(); double total 0; for (CartItem item : items) { Product product productDao.findById(item.getProductId()); if (product null) { throw new RuntimeException(商品已下架); } if (product.getStock() item.getQuantity()) { throw new RuntimeException(商品[ product.getName() ]庫(kù)存不足); } // 以數(shù)據(jù)庫(kù)最新價(jià)格為準(zhǔn)購(gòu)物車?yán)锏膬r(jià)格只用于展示 item.setPrice(product.getPrice()); // 扣庫(kù)存這條 SQL 是防超賣的關(guān)鍵 int rows productDao.deductStock(item.getProductId(), item.getQuantity()); if (rows 0) { throw new RuntimeException(商品[ product.getName() ]已被搶完); } total product.getPrice() * item.getQuantity(); } return orderDao.insert(userId, total, items); }這里我用 item.setPrice(product.getPrice()) 做了兩件事一是讓購(gòu)物車頁(yè)面顯示的價(jià)格在結(jié)算后自動(dòng)刷新二是把最新價(jià)格傳給訂單明細(xì)保存訂單表里存的金額才算真正“價(jià)格快照”。deductStock 這條 SQL 是關(guān)鍵它會(huì)返回影響行數(shù)行數(shù)是 0 就說(shuō)明庫(kù)存已經(jīng)被別人扣完了這個(gè)方案比先 select 再 update 安全得多。對(duì)應(yīng)的 SQL 放在 DAO 里UPDATE product SET stock stock - ? WHERE id ? AND stock ?減庫(kù)存和生成訂單必須放在同一個(gè)數(shù)據(jù)庫(kù)事務(wù)里否則會(huì)出現(xiàn)訂單創(chuàng)建成功但庫(kù)存沒(méi)扣或者庫(kù)存扣了訂單卻沒(méi)落庫(kù)的尷尬局面。簡(jiǎn)易項(xiàng)目用 JDBC 的話可以手動(dòng) setAutoCommit(false)全部執(zhí)行成功后 commit任何一個(gè)中間步驟拋異常就 rollback。4. idea運(yùn)行javaweb項(xiàng)目配置與前端資源把源碼在本地跑起來(lái)4.1 Tomcat 運(yùn)行時(shí)配置war exploded 才是調(diào)試的正確姿勢(shì)拿到源代碼之后大多數(shù)人卡在第一步不知道在 IDEA 里怎么把項(xiàng)目跑起來(lái)。首先確認(rèn)這是一個(gè) Maven 項(xiàng)目還是普通 Web 項(xiàng)目Maven 項(xiàng)目導(dǎo)入后要等依賴下載完普通項(xiàng)目直接在 Project Structure 里把 src/main/java 標(biāo)成 Sources把 webapp 加入 Web Facet。配置 Tomcat 的路徑是 Run - Edit Configurations - 左上角加號(hào) - Tomcat Server - Local。注意這里不要選 TomEE。然后在 Deployment 標(biāo)簽頁(yè)點(diǎn)加號(hào)選擇 Artifact如果項(xiàng)目構(gòu)建正確會(huì)出現(xiàn)兩個(gè)選項(xiàng)war 和 war exploded。我強(qiáng)烈建議選 war exploded因?yàn)?exploded 是解壓后的目錄IDEA 可以直接把 class 和 JSP 的變更熱加載進(jìn)去不需要每次改一點(diǎn)就重新打包 war。Deployment 里要能看到 :war exploded Server 標(biāo)簽頁(yè)URL 留空或?qū)?http://localhost:8080/ On frame deactivation建議選 Update resources配置完啟動(dòng)后如果訪問(wèn)返回 404先檢查兩步第一Artifact 是否在 Deployment 里沒(méi)添加自然沒(méi)法訪問(wèn)第二項(xiàng)目里有沒(méi)有 Servlet 注解或者 web.xml。如果用 WebServlet 注解Servlet 3.0 會(huì)自動(dòng)掃描不需要 web.xml但如果項(xiàng)目結(jié)構(gòu)是老式的必須在 web.xml 里注冊(cè) Servlet。4.2 連接 MySQL驅(qū)動(dòng)、連接串、編碼三個(gè)坑一次排掉購(gòu)物車項(xiàng)目的數(shù)據(jù)庫(kù)連接最常用 JDBC。新建的 MySQL 如果版本是 8.x驅(qū)動(dòng)類名要寫 com.mysql.cj.jdbc.Driver不是老教程里的 com.mysql.jdbc.Driver。驅(qū)動(dòng) jar 包放哪也有地方講究如果你用 Maven在 pom.xml 里加 mysql-connector-j 依賴如果你是手動(dòng)導(dǎo) jar必須放到 src/main/webapp/WEB-INF/lib 目錄下Tomcat 才會(huì)把它加載進(jìn)應(yīng)用運(yùn)行時(shí)。連接串里的編碼參數(shù)和時(shí)區(qū)參數(shù)缺一不可jdbc:mysql://localhost:3306/shop?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseUnicodetrue 配合 characterEncodingutf8是為了讓中文從 Java 到 MySQL 不變成問(wèn)號(hào)。serverTimezoneAsia/Shanghai 是為了解決 MySQL 8.x 默認(rèn)時(shí)區(qū)在美國(guó)導(dǎo)致連接時(shí)報(bào) CST 的錯(cuò)誤。老項(xiàng)目如果報(bào) SSL 警告可以在連接串后面加 useSSLfalse 臨時(shí)壓掉但生產(chǎn)環(huán)境不建議關(guān)閉。JDBC 工具類我一般這樣寫把連接信息放到 db.propertiespublic class DBUtil { private static String url; private static String username; private static String password; static { Properties props new Properties(); try (InputStream in DBUtil.class.getClassLoader() .getResourceAsStream(db.properties)) { props.load(in); Class.forName(props.getProperty(jdbc.driver)); url props.getProperty(jdbc.url); username props.getProperty(jdbc.username); password props.getProperty(jdbc.password); } catch (Exception e) { throw new RuntimeException(數(shù)據(jù)庫(kù)配置加載失敗, e); } } public static Connection getConnection() throws SQLException { return DriverManager.getConnection(url, username, password); } }注意 static 塊里的 Class.forName 是為了讓驅(qū)動(dòng)注冊(cè)到 DriverManager有些教程說(shuō) MySQL 8 可以省略但我建議保留省得別人換驅(qū)動(dòng)版本時(shí)踩坑。db.properties 文件要放在 src/main/resources 下不要放在 webapp 下否則會(huì)被打包進(jìn) WEB-INF/classes 之外的地方。4.3 引入 iconfont 圖標(biāo)庫(kù)給“一鍵加入購(gòu)物車”按鈕配個(gè)圖標(biāo)商品列表頁(yè)的加購(gòu)按鈕默認(rèn)文字版“加入購(gòu)物車”其實(shí)夠用但很多人想把按鈕做得好看一點(diǎn)于是會(huì)用到 iconfont 這類圖標(biāo)庫(kù)。在 iconfont 網(wǎng)站選好購(gòu)物車圖標(biāo)后直接把下載的壓縮包解壓到 src/main/webapp/static/iconfont 目錄然后在 JSP 里引入 css 就可以。link relstylesheet href${pageContext.request.contextPath}/static/iconfont/iconfont.css button typesubmit classbtn-add i classiconfont icon-gouwuche/i span一鍵加入購(gòu)物車/span /button這里有一個(gè)常見的坑iconfont 下載包里的字體文件.ttf, .woff必須和 iconfont.css 保持同一目錄比如都在 static/iconfont 下。如果你只把 css 復(fù)制走了沒(méi)帶字體文件圖標(biāo)會(huì)顯示成方框。另一個(gè)坑是按鈕的外層不能嵌套也就是說(shuō)不允許 form 套 form如果你有兩個(gè)表單一個(gè)操作 actionadd一個(gè)操作 actionupdate要把它們用不同 form 包起來(lái)或者用 button 的 formaction 屬性指向不同地址不能簡(jiǎn)單地把兩個(gè)按鈕塞進(jìn)同一個(gè)表單。引入圖標(biāo)之后按鈕點(diǎn)擊時(shí)提交的請(qǐng)求依然是 POSThidden 字段 actionadd 照舊圖標(biāo)只是視覺(jué)效果。字體圖標(biāo)本身是一個(gè)字符點(diǎn)擊它等同于點(diǎn)擊按鈕內(nèi)的其他區(qū)域不需要額外寫 onclick 事件。5. javaWeb購(gòu)物車避坑指南Session消失、中文亂碼、并發(fā)超賣5.1 Session 會(huì)話失效購(gòu)物車為什么“神秘消失”現(xiàn)象用戶早上加購(gòu)了幾件商品下午打開頁(yè)面發(fā)現(xiàn)購(gòu)物車空了而且沒(méi)有任何錯(cuò)誤提示看起來(lái)就像一個(gè)魔幻 Bug。 原因Tomcat 的 Session 默認(rèn)過(guò)期時(shí)間是 30 分鐘無(wú)訪問(wèn)。如果用戶加購(gòu)后關(guān)掉瀏覽器、或者兩天后再打開JSESSIONID 這個(gè) Cookie 已經(jīng)丟失服務(wù)端也早把 Session 清掉了。服務(wù)器重啟同樣會(huì)導(dǎo)致所有內(nèi)存 Session 清空。 解決明確“簡(jiǎn)易購(gòu)物車”的生命周期就是瀏覽器會(huì)話登錄、結(jié)算、刷新都要考慮到 Session 可能為空。更好的辦法是用戶登錄后把購(gòu)物車持久化到數(shù)據(jù)庫(kù)Session 只在用戶未登錄時(shí)作為臨時(shí)載體這個(gè)方向我會(huì)在最后一章講合并邏輯。至少要在購(gòu)物車頁(yè)面給一句提示“購(gòu)物車僅在本瀏覽器會(huì)話內(nèi)有效”避免用戶誤以為商品已經(jīng)被下單。5.2 中文亂碼JSP、Servlet、MySQL 三處要同時(shí)設(shè) UTF-8現(xiàn)象購(gòu)物車頁(yè)面里商品名稱顯示成“???”或者數(shù)據(jù)庫(kù)查出來(lái)的中文變亂碼。 原因這是一個(gè)鏈路上的問(wèn)題任何一環(huán)漏了都會(huì)亂。最常見的是 Servlet doPost 里沒(méi)有 request.setCharacterEncoding(UTF-8)其次是 JSP 頁(yè)面雖然寫了 pageEncoding但瀏覽器端的 Content-Type 不匹配再就是 MySQL 表或連接串沒(méi)有使用 utf8mb4。 解決按順序檢查三處。Servlet 里在讀取任何參數(shù)前調(diào)用 req.setCharacterEncoding(UTF-8)JSP 第一行寫成 % page contentTypetext/html;charsetUTF-8 pageEncodingUTF-8 %MySQL 建庫(kù)時(shí)用 DEFAULT CHARACTER SET utf8mb4。如果這三處都對(duì)依然亂碼再用數(shù)據(jù)庫(kù)客戶端查看表結(jié)構(gòu)確認(rèn)字段的 collation 不是 latin1。5.3 并發(fā)超賣一個(gè) update 語(yǔ)句把庫(kù)存扣安全現(xiàn)象商品庫(kù)存只剩 1 件A 和 B 兩個(gè)人同時(shí)打開結(jié)算頁(yè)都提交了訂單最終系統(tǒng)發(fā)出兩筆訂單庫(kù)存顯示 -1。 原因代碼先從 product 表 select stock檢查到庫(kù)存大于 0然后再 update 庫(kù)存。兩個(gè)請(qǐng)求都讀到庫(kù)存為 1都認(rèn)為可以下單導(dǎo)致超賣。這是典型的“檢查與執(zhí)行之間出現(xiàn)時(shí)間差”。 解決不要用 select 判斷直接執(zhí)行 3.3 里那條 UPDATE product SET stock stock - ? WHERE id ? AND stock ?數(shù)據(jù)庫(kù)行鎖會(huì)保證同一時(shí)間只有一個(gè)請(qǐng)求能扣成功。影響行數(shù)為 0 的那個(gè)請(qǐng)求說(shuō)明庫(kù)存被別人搶完了直接拋異?；貪L訂單。如果你的項(xiàng)目已經(jīng)用了 Spring可以把這條 SQL 放在事務(wù)注解里用 JDBC 則需要手動(dòng)控制 commit/rollback。5.4 重復(fù)提交Post/Redirect/Get 三件套給購(gòu)物車兜底現(xiàn)象用戶手快連點(diǎn)了兩次“提交訂單”結(jié)果生成兩筆一模一樣的訂單或者 F5 刷新購(gòu)物車頁(yè)面瀏覽器彈窗“是否重新發(fā)送表單”點(diǎn)擊確認(rèn)后商品被重復(fù)加購(gòu)。 原因表單用 POST 提交后如果 Servlet 處理完直接 forward 到成功頁(yè)面瀏覽器的當(dāng)前請(qǐng)求還是 POST。用戶刷新時(shí)瀏覽器會(huì)重復(fù)提交上一次數(shù)據(jù)Servlet 又執(zhí)行了一次于是造成重復(fù)。 解決加購(gòu)、更新數(shù)量、結(jié)算提交成功之后一律 sendRedirect而不是 forward。重定向會(huì)讓瀏覽器發(fā)起一個(gè)新的 GET 請(qǐng)求地址欄也變成購(gòu)物車頁(yè)面地址這樣無(wú)論怎么刷新都不會(huì)把原來(lái)的 POST 請(qǐng)求重放一次。這條經(jīng)驗(yàn)對(duì)后端工程師來(lái)說(shuō)是基本功但課程設(shè)計(jì)里能看到正確做法的代碼真的不多所以值得單獨(dú)記一筆。6. 兩個(gè)值得加進(jìn)源碼的進(jìn)階技巧匿名購(gòu)物車合并與價(jià)格快照如果你的購(gòu)物車項(xiàng)目打算從“課程設(shè)計(jì)”往“能給別人演示的產(chǎn)品”走一步我建議除了跑通流程之外再加上兩個(gè)小功能登錄后的購(gòu)物車合并和訂單價(jià)格快照。匿名購(gòu)物車合并的邏輯是用戶未登錄時(shí)加購(gòu)的商品放在 Session 里登錄成功后不能直接把 Session 清空否則用戶一登錄購(gòu)物車就沒(méi)了。常見做法是登錄成功后先取出 Session 里的 cart遍歷每一件商品把它們 merge 進(jìn)數(shù)據(jù)庫(kù)購(gòu)物車表再把數(shù)據(jù)庫(kù)購(gòu)物車裝進(jìn) Session 覆蓋原來(lái)的匿名車。合并時(shí)要注意數(shù)量求和而不是覆蓋。價(jià)格快照這件事我在 3.3 里強(qiáng)調(diào)過(guò)訂單明細(xì)里面保存的 price 必須是下單那一刻從數(shù)據(jù)庫(kù)查出來(lái)的最新價(jià)格不能直接用 CartItem 里緩存的舊價(jià)格。很多源碼偷懶不更新 item 價(jià)格導(dǎo)致用戶購(gòu)物車顯示 100訂單卻按 120 結(jié)算。真正的商品價(jià)格是變動(dòng)的而訂單歷史是不能變的所以“快照”要落在訂單表里。我自己的血淚經(jīng)驗(yàn)是一開始為了省事結(jié)算邏輯直接遍歷 Session 里的 CartItem 求總和連續(xù)部署了幾次也沒(méi)出問(wèn)題。直到有一天運(yùn)營(yíng)在后臺(tái)改了商品價(jià)格一批老訂單金額全部對(duì)不上測(cè)試直接發(fā)了一個(gè)“金額計(jì)算錯(cuò)誤”的 Bug 單。從那以后我對(duì)購(gòu)物車?yán)锏膬r(jià)格一律只當(dāng)“展示緩存”結(jié)算必查數(shù)據(jù)庫(kù)。如果你手里的源碼也是這樣趁還沒(méi)翻車趕緊改掉。這個(gè)方向值得投入的原因很簡(jiǎn)單購(gòu)物車幾乎覆蓋了 JavaWeb 最核心的會(huì)話、狀態(tài)、事務(wù)、前后端交互跑通它后面學(xué) Spring MVC、Spring Boot 時(shí)很多概念你都會(huì)有“原來(lái)如此”的感覺(jué)。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取