簡(jiǎn)介本資源是一套完整的校園奶茶店線上點(diǎn)單系統(tǒng)實(shí)戰(zhàn)項(xiàng)目面向計(jì)算機(jī)類專業(yè)本科生開(kāi)展期末大作業(yè)或課程設(shè)計(jì)使用聚焦Java后端開(kāi)發(fā)與Vue前端工程化實(shí)踐解決校園場(chǎng)景下輕量級(jí)外賣點(diǎn)單、訂單管理與用戶交互等典型業(yè)務(wù)需求。壓縮包共2000個(gè)文件含49個(gè)核心Java后端源碼Spring Boot框架、16個(gè)Vue組件及配套TS/JS邏輯1192個(gè)JS、132個(gè)TS、16個(gè)Vue、204個(gè)CSS樣式與150個(gè)JSON配置另有SQL建表腳本、YML配置、MD文檔及完整報(bào)告文檔總大小17.02MB結(jié)構(gòu)清晰、模塊分明。所有代碼均經(jīng)本地編譯調(diào)試通過(guò)含完整數(shù)據(jù)庫(kù)腳本與高分評(píng)審報(bào)告98分涵蓋需求分析、系統(tǒng)設(shè)計(jì)、接口說(shuō)明與部署指南助學(xué)習(xí)者快速理解全棧開(kāi)發(fā)流程與校園O2O業(yè)務(wù)建模邏輯。1. 項(xiàng)目概述一個(gè)典型的“期末大作業(yè)”意味著什么看到“校園奶茶店線上點(diǎn)單系統(tǒng)”這個(gè)標(biāo)題再配上“SpringbootVue”和“期末大作業(yè)”這幾個(gè)關(guān)鍵詞我相信很多計(jì)算機(jī)相關(guān)專業(yè)的同學(xué)尤其是大二大三的會(huì)心一笑。這幾乎是近年來(lái)Web開(kāi)發(fā)課程、軟件工程課程或者畢業(yè)設(shè)計(jì)里最“經(jīng)典”的選題之一。它不像電商平臺(tái)那么龐大也不像管理系統(tǒng)那么枯燥它足夠貼近生活功能模塊清晰技術(shù)棧主流非常適合用來(lái)檢驗(yàn)一個(gè)學(xué)生從需求分析、數(shù)據(jù)庫(kù)設(shè)計(jì)、前后端開(kāi)發(fā)到部署上線的全鏈路能力。我當(dāng)年帶學(xué)生做課程設(shè)計(jì)十個(gè)里有三個(gè)會(huì)選這個(gè)或者類似的“校園XX系統(tǒng)”。所以今天我就以一個(gè)過(guò)來(lái)人、也是項(xiàng)目評(píng)審者的視角來(lái)深度拆解這個(gè)“經(jīng)典項(xiàng)目”。我們不僅要看它“是什么”更要挖出它“為什么”這么設(shè)計(jì)以及在實(shí)際開(kāi)發(fā)中那些教科書和實(shí)驗(yàn)指導(dǎo)書上不會(huì)寫的“坑”和“技巧”。無(wú)論你是正在為期末作業(yè)發(fā)愁的學(xué)生還是想通過(guò)一個(gè)完整項(xiàng)目入門SpringBoot和Vue的開(kāi)發(fā)者這篇文章都會(huì)給你提供一個(gè)遠(yuǎn)超模板的、充滿實(shí)戰(zhàn)細(xì)節(jié)的參考藍(lán)圖。這個(gè)系統(tǒng)的核心價(jià)值在于模擬一個(gè)真實(shí)的微商業(yè)場(chǎng)景用戶學(xué)生通過(guò)前端頁(yè)面瀏覽奶茶菜單、加入購(gòu)物車、下單支付商家奶茶店在后端管理臺(tái)處理訂單、管理商品和用戶系統(tǒng)本身需要處理并發(fā)雖然校園場(chǎng)景不高、保證數(shù)據(jù)一致性庫(kù)存、訂單狀態(tài)。用SpringBoot構(gòu)建穩(wěn)健的后端API服務(wù)用Vue構(gòu)建交互流暢的前端應(yīng)用用MySQL這類關(guān)系型數(shù)據(jù)庫(kù)存儲(chǔ)核心業(yè)務(wù)數(shù)據(jù)這是一個(gè)非常標(biāo)準(zhǔn)且健康的“前后端分離”架構(gòu)實(shí)踐。2. 系統(tǒng)整體架構(gòu)與核心模塊設(shè)計(jì)2.1 技術(shù)棧選型背后的邏輯為什么是SpringBoot Vue這幾乎是當(dāng)前高校和企業(yè)入門級(jí)全棧開(kāi)發(fā)的事實(shí)標(biāo)準(zhǔn)。后端SpringBootSpringBoot的核心優(yōu)勢(shì)是“約定大于配置”和快速啟動(dòng)。對(duì)于學(xué)生項(xiàng)目而言這意味著你可以用最少的XML配置快速搭建起一個(gè)具備Web MVC、數(shù)據(jù)訪問(wèn)JPA/MyBatis、事務(wù)管理、安全控制Spring Security等全套能力的后端服務(wù)。它內(nèi)嵌了Tomcat服務(wù)器你寫完代碼直接打包成一個(gè)Jar文件就能運(yùn)行極大簡(jiǎn)化了部署復(fù)雜度。在期末作業(yè)這個(gè)時(shí)間緊、任務(wù)重的背景下SpringBoot能幫你把精力集中在業(yè)務(wù)邏輯而不是繁瑣的環(huán)境配置上。注意很多同學(xué)初學(xué)時(shí)會(huì)糾結(jié)于用JPASpring Data JPA還是MyBatis。我的建議是對(duì)于“奶茶店系統(tǒng)”這種表結(jié)構(gòu)相對(duì)固定、關(guān)聯(lián)關(guān)系清晰的場(chǎng)景優(yōu)先使用JPA。它能通過(guò)注解自動(dòng)建表、實(shí)現(xiàn)基本的CRUD開(kāi)發(fā)效率極高。只有當(dāng)你有非常復(fù)雜的動(dòng)態(tài)SQL查詢需求時(shí)才考慮MyBatis。作業(yè)項(xiàng)目效率第一。前端Vue.jsVue以其漸進(jìn)式、易上手的特點(diǎn)脫穎而出。你不需要一開(kāi)始就理解整套Webpack配置和復(fù)雜的工程化概念通過(guò)一個(gè)script標(biāo)簽引入就能開(kāi)始寫組件。對(duì)于“點(diǎn)單系統(tǒng)”這種交互性較強(qiáng)的應(yīng)用Vue的響應(yīng)式數(shù)據(jù)綁定和組件化開(kāi)發(fā)模式非常合適。一個(gè)商品列表可以是一個(gè)組件購(gòu)物車彈窗是另一個(gè)組件邏輯清晰便于維護(hù)。而且Vue的生態(tài)豐富Element UI、Vant等UI庫(kù)能讓你快速搭建出美觀的界面這對(duì)追求界面效果的作業(yè)來(lái)說(shuō)是個(gè)加分項(xiàng)。數(shù)據(jù)庫(kù)MySQL沒(méi)什么好說(shuō)的關(guān)系型數(shù)據(jù)庫(kù)的絕對(duì)主流免費(fèi)、穩(wěn)定、資料多。對(duì)于奶茶店系統(tǒng)核心表如用戶、商品、訂單、訂單詳情之間的關(guān)系一對(duì)多、多對(duì)多用關(guān)系模型來(lái)表達(dá)非常直觀。輔助工具項(xiàng)目管理Maven或Gradle。SpringBoot默認(rèn)用Maven管理依賴非常方便。API調(diào)試Postman或Apifox。前后端分離開(kāi)發(fā)后端工程師寫完接口第一時(shí)間用它們測(cè)試比用前端調(diào)用快得多。版本控制Git。哪怕是一個(gè)人開(kāi)發(fā)也強(qiáng)烈建議使用。用main分支存放穩(wěn)定版本用feature/分支開(kāi)發(fā)新功能比如“優(yōu)惠券模塊”能有效管理代碼版本。2.2 核心功能模塊拆解一個(gè)完整的線上點(diǎn)單系統(tǒng)通常包含以下四個(gè)核心模塊用戶端模塊面向喝奶茶的同學(xué)。用戶認(rèn)證注冊(cè)、登錄含手機(jī)號(hào)驗(yàn)證、JWT令牌管理。商品瀏覽分類展示奶茶如芝士茶、水果茶、經(jīng)典奶茶、搜索、按價(jià)格/銷量排序。購(gòu)物車添加商品、修改數(shù)量、清空。訂單流程從購(gòu)物車生成訂單、選擇配送地址或到店自提、模擬支付集成微信/支付寶沙箱、訂單狀態(tài)跟蹤待支付、制作中、配送中、已完成。個(gè)人中心查看歷史訂單、管理收貨地址。商家管理后臺(tái)模塊面向奶茶店老板或店員。儀表盤顯示今日營(yíng)業(yè)額、訂單數(shù)、熱門商品等統(tǒng)計(jì)數(shù)據(jù)。商品管理對(duì)奶茶品類、具體商品進(jìn)行增刪改查特別是商品庫(kù)存的管理和預(yù)警。訂單管理列表展示所有訂單能按狀態(tài)篩選并執(zhí)行關(guān)鍵操作接單、開(kāi)始制作、出餐完成。這是后端邏輯的核心。用戶管理查看注冊(cè)用戶信息。數(shù)據(jù)統(tǒng)計(jì)簡(jiǎn)單的銷售報(bào)表按日/周/月統(tǒng)計(jì)。后端API服務(wù)模塊承上啟下處理所有業(yè)務(wù)邏輯和數(shù)據(jù)。控制器層定義RESTful API接口接收前端請(qǐng)求如GET /api/products,POST /api/orders。服務(wù)層實(shí)現(xiàn)核心業(yè)務(wù)邏輯例如創(chuàng)建訂單時(shí)需要校驗(yàn)庫(kù)存、計(jì)算總價(jià)、生成訂單號(hào)、扣減庫(kù)存這些事務(wù)性的操作必須放在這一層。數(shù)據(jù)訪問(wèn)層通過(guò)JPA或MyBatis與MySQL交互完成數(shù)據(jù)的持久化。安全與配置處理用戶認(rèn)證JWT校驗(yàn)、權(quán)限控制普通用戶 vs 管理員、全局異常處理、數(shù)據(jù)驗(yàn)證等。數(shù)據(jù)庫(kù)設(shè)計(jì)模塊系統(tǒng)的基石。用戶表id,username,password加密存儲(chǔ),phone,avatar,role。商品分類表 商品表分類和商品是典型的一對(duì)多關(guān)系。商品表需包含price,stock庫(kù)存,description,image_url等字段。訂單表 訂單詳情表這是核心。一個(gè)訂單對(duì)應(yīng)多個(gè)訂單詳情一種奶茶可能點(diǎn)多杯。訂單表記錄總金額、狀態(tài)、用戶ID、創(chuàng)建時(shí)間訂單詳情表記錄商品ID、購(gòu)買數(shù)量、當(dāng)時(shí)單價(jià)。這里的設(shè)計(jì)直接影響業(yè)務(wù)邏輯的復(fù)雜度。3. 數(shù)據(jù)庫(kù)設(shè)計(jì)與核心業(yè)務(wù)邏輯實(shí)現(xiàn)3.1 數(shù)據(jù)庫(kù)表結(jié)構(gòu)深度解析數(shù)據(jù)庫(kù)設(shè)計(jì)不是簡(jiǎn)單的建表每一個(gè)字段和關(guān)聯(lián)都承載著業(yè)務(wù)規(guī)則。我們重點(diǎn)看幾個(gè)核心表商品表CREATE TABLE product ( id int NOT NULL AUTO_INCREMENT, category_id int NOT NULL COMMENT 關(guān)聯(lián)分類ID, name varchar(100) NOT NULL COMMENT 商品名稱如“珍珠奶茶”, description text COMMENT 商品描述, price decimal(10,2) NOT NULL COMMENT 當(dāng)前售價(jià), stock int NOT NULL DEFAULT 0 COMMENT 庫(kù)存數(shù)量關(guān)鍵字段, image_url varchar(500) COMMENT 商品圖片鏈接, status tinyint DEFAULT 1 COMMENT 狀態(tài)1-上架0-下架, sales int DEFAULT 0 COMMENT 累計(jì)銷量, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_category (category_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT商品表;實(shí)操心得price字段用decimal類型避免浮點(diǎn)數(shù)計(jì)算精度問(wèn)題。stock庫(kù)存是關(guān)鍵所有涉及商品減少的操作下單、手動(dòng)調(diào)庫(kù)存都必須基于當(dāng)前庫(kù)存做原子性更新如UPDATE product SET stock stock - ? WHERE id ? AND stock ?防止超賣。訂單與訂單詳情表這是業(yè)務(wù)的核心體現(xiàn)了“主-子”表結(jié)構(gòu)。-- 訂單主表 CREATE TABLE order ( id varchar(32) NOT NULL COMMENT 訂單號(hào)建議用時(shí)間戳隨機(jī)數(shù)生成而非自增ID, user_id int NOT NULL, total_amount decimal(10,2) NOT NULL COMMENT 訂單總金額, status tinyint NOT NULL DEFAULT 0 COMMENT 狀態(tài)0-待支付1-已支付/待接單2-制作中3-待取餐/配送中4-已完成5-已取消, payment_method tinyint COMMENT 支付方式1-微信2-支付寶, address varchar(500) COMMENT 配送地址或自提信息, remark varchar(200) COMMENT 用戶備注如“少糖”, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_user_id (user_id), KEY idx_create_time (create_time) ) COMMENT訂單主表; -- 訂單詳情表 CREATE TABLE order_item ( id int NOT NULL AUTO_INCREMENT, order_id varchar(32) NOT NULL COMMENT 關(guān)聯(lián)訂單號(hào), product_id int NOT NULL, product_name varchar(100) NOT NULL COMMENT 下單時(shí)的商品名稱快照, product_price decimal(10,2) NOT NULL COMMENT 下單時(shí)的商品單價(jià)快照, quantity int NOT NULL COMMENT 購(gòu)買數(shù)量, subtotal decimal(10,2) NOT NULL COMMENT 小計(jì) product_price * quantity, PRIMARY KEY (id), KEY idx_order_id (order_id) ) COMMENT訂單詳情表;核心設(shè)計(jì)思想為什么要在order_item里冗余存儲(chǔ)product_name和product_price因?yàn)樯唐沸畔⒚Q、價(jià)格可能會(huì)變。如果只存product_id當(dāng)商家修改了商品價(jià)格或名稱后用戶查看歷史訂單時(shí)顯示的就是最新的信息這與下單時(shí)的實(shí)際情況不符會(huì)造成糾紛。因此必須在下單瞬間將當(dāng)時(shí)的商品信息“快照”存下來(lái)。這是電商類業(yè)務(wù)的一個(gè)通用設(shè)計(jì)模式。3.2 下單業(yè)務(wù)邏輯的完整實(shí)現(xiàn)與事務(wù)控制下單是系統(tǒng)最復(fù)雜的業(yè)務(wù)邏輯它涉及多個(gè)數(shù)據(jù)庫(kù)操作必須保證原子性要么全成功要么全失敗。我們用Spring的Transactional注解來(lái)管理事務(wù)。后端服務(wù)層代碼示例Service Slf4j public class OrderServiceImpl implements OrderService { Autowired private ProductRepository productRepo; Autowired private OrderRepository orderRepo; Autowired private OrderItemRepository orderItemRepo; Override Transactional(rollbackFor Exception.class) // 聲明式事務(wù)任何異常都回滾 public Order createOrder(Integer userId, OrderRequest orderRequest) { // 1. 參數(shù)校驗(yàn)略 // 2. 計(jì)算總價(jià)并校驗(yàn)庫(kù)存預(yù)扣庫(kù)存 BigDecimal totalAmount BigDecimal.ZERO; ListCartItemDTO items orderRequest.getItems(); MapInteger, Product productMap new HashMap(); for (CartItemDTO item : items) { Product product productRepo.findById(item.getProductId()) .orElseThrow(() - new BusinessException(商品不存在)); // 檢查庫(kù)存 if (product.getStock() item.getQuantity()) { throw new BusinessException(商品【 product.getName() 】庫(kù)存不足); } // 預(yù)扣庫(kù)存在內(nèi)存中計(jì)算先不更新數(shù)據(jù)庫(kù) product.setStock(product.getStock() - item.getQuantity()); productMap.put(product.getId(), product); BigDecimal subtotal product.getPrice().multiply(new BigDecimal(item.getQuantity())); totalAmount totalAmount.add(subtotal); } // 3. 生成訂單號(hào)簡(jiǎn)易版時(shí)間戳隨機(jī)數(shù) String orderId generateOrderId(); // 4. 保存訂單主表 Order order new Order(); order.setId(orderId); order.setUserId(userId); order.setTotalAmount(totalAmount); order.setStatus(OrderStatusEnum.WAITING_PAYMENT.getCode()); order.setAddress(orderRequest.getAddress()); order.setRemark(orderRequest.getRemark()); orderRepo.save(order); // 5. 保存訂單詳情并實(shí)際扣減庫(kù)存 ListOrderItem orderItems new ArrayList(); for (CartItemDTO item : items) { Product product productMap.get(item.getProductId()); OrderItem orderItem new OrderItem(); orderItem.setOrderId(orderId); orderItem.setProductId(product.getId()); orderItem.setProductName(product.getName()); // 快照 orderItem.setProductPrice(product.getPrice()); // 快照 orderItem.setQuantity(item.getQuantity()); orderItem.setSubtotal(product.getPrice().multiply(new BigDecimal(item.getQuantity()))); orderItemRepo.save(orderItem); orderItems.add(orderItem); // 實(shí)際更新數(shù)據(jù)庫(kù)庫(kù)存使用樂(lè)觀鎖或直接更新防止并發(fā)超賣 int affectedRows productRepo.deductStock(product.getId(), item.getQuantity()); if (affectedRows 0) { // 如果更新失敗說(shuō)明庫(kù)存已經(jīng)被其他請(qǐng)求修改拋出異常觸發(fā)事務(wù)回滾 throw new BusinessException(商品【 product.getName() 】庫(kù)存并發(fā)更新失敗請(qǐng)重試); } } order.setOrderItems(orderItems); log.info(訂單創(chuàng)建成功訂單號(hào){}, orderId); return order; } private String generateOrderId() { // 格式年月日時(shí)分秒4位隨機(jī)數(shù)例如 202310261430251234 SimpleDateFormat sdf new SimpleDateFormat(yyyyMMddHHmmss); String timePart sdf.format(new Date()); int randomPart (int) ((Math.random() * 9 1) * 1000); // 1000-9999 return timePart randomPart; } }關(guān)鍵點(diǎn)解析事務(wù)邊界整個(gè)createOrder方法被Transactional包裹確保訂單主表、詳情表插入和庫(kù)存扣減要么全部成功要么全部回滾。庫(kù)存校驗(yàn)與扣減分離先校驗(yàn)所有商品庫(kù)存是否充足內(nèi)存計(jì)算再統(tǒng)一扣減?？蹨p時(shí)使用deductStock這樣的自定義Repository方法在SQL層面執(zhí)行stock stock - ?并檢查stock ?這是防止超賣的最后一道防線。訂單號(hào)生成不使用數(shù)據(jù)庫(kù)自增ID而是用有一定業(yè)務(wù)含義的、分布式的唯一ID。這里用了時(shí)間戳隨機(jī)數(shù)簡(jiǎn)單有效。在實(shí)際生產(chǎn)環(huán)境中可能會(huì)考慮雪花算法Snowflake。快照存儲(chǔ)在保存OrderItem時(shí)存的是下單瞬間的商品名稱和價(jià)格保證了訂單數(shù)據(jù)的不可變性。4. 前后端交互與關(guān)鍵功能實(shí)現(xiàn)4.1 前端Vue組件設(shè)計(jì)與狀態(tài)管理對(duì)于中小型項(xiàng)目Vuex或Pinia并非必須但合理的組件設(shè)計(jì)和數(shù)據(jù)流管理至關(guān)重要。商品列表組件template div classproduct-list !-- 分類篩選 -- div classcategory-tabs button v-forcat in categories :keycat.id clickselectCategory(cat.id) :class{ active: selectedCategoryId cat.id } {{ cat.name }} /button /div !-- 商品網(wǎng)格 -- div classproduct-grid div v-forproduct in filteredProducts :keyproduct.id classproduct-card img :srcproduct.imageUrl :altproduct.name clickviewDetail(product)/ h3{{ product.name }}/h3 p classprice{{ product.price }}/p p classstock庫(kù)存{{ product.stock }}/p button clickaddToCart(product) :disabledproduct.stock 0 {{ product.stock 0 ? 加入購(gòu)物車 : 已售罄 }} /button /div /div /div /template script import { mapActions } from vuex; export default { data() { return { products: [], categories: [], selectedCategoryId: null, }; }, computed: { filteredProducts() { if (!this.selectedCategoryId) return this.products; return this.products.filter(p p.categoryId this.selectedCategoryId); } }, async created() { // 組件創(chuàng)建時(shí)調(diào)用API獲取商品和分類數(shù)據(jù) await this.fetchProducts(); await this.fetchCategories(); }, methods: { ...mapActions([addCartItem]), // 映射Vuex的action async fetchProducts() { try { const res await this.$axios.get(/api/products); this.products res.data; } catch (error) { console.error(獲取商品列表失敗:, error); this.$message.error(加載商品失敗); } }, async fetchCategories() { /* ... */ }, selectCategory(id) { this.selectedCategoryId id; }, addToCart(product) { // 調(diào)用Vuex action將商品添加到全局購(gòu)物車狀態(tài) this.addCartItem({ product, quantity: 1 }); this.$message.success(已添加${product.name}到購(gòu)物車); }, viewDetail(product) { // 跳轉(zhuǎn)到商品詳情頁(yè) this.$router.push(/product/${product.id}); } } }; /script前端經(jīng)驗(yàn)使用computed屬性filteredProducts來(lái)實(shí)現(xiàn)分類篩選比在methods里寫一個(gè)過(guò)濾函數(shù)并在模板中調(diào)用更高效因?yàn)閂ue會(huì)對(duì)其依賴的products和selectedCategoryId進(jìn)行緩存。按鈕的:disabled狀態(tài)根據(jù)庫(kù)存動(dòng)態(tài)變化提升了用戶體驗(yàn)。4.2 購(gòu)物車狀態(tài)管理與下單流程購(gòu)物車數(shù)據(jù)需要全局共享適合使用Vuex。Vuex Store示例// store/modules/cart.js const state { items: [], // 數(shù)組每個(gè)元素是 { productId, productName, price, quantity } }; const mutations { ADD_ITEM(state, payload) { const existingItem state.items.find(item item.productId payload.productId); if (existingItem) { existingItem.quantity payload.quantity; } else { state.items.push({ ...payload }); } // 可選將購(gòu)物車數(shù)據(jù)持久化到localStorage localStorage.setItem(cart, JSON.stringify(state.items)); }, UPDATE_QUANTITY(state, { productId, quantity }) { const item state.items.find(item item.productId productId); if (item) { item.quantity quantity; if (item.quantity 0) { this.commit(cart/REMOVE_ITEM, productId); } } localStorage.setItem(cart, JSON.stringify(state.items)); }, REMOVE_ITEM(state, productId) { state.items state.items.filter(item item.productId ! productId); localStorage.setItem(cart, JSON.stringify(state.items)); }, CLEAR_CART(state) { state.items []; localStorage.removeItem(cart); }, INIT_CART_FROM_STORAGE(state) { const saved localStorage.getItem(cart); if (saved) { state.items JSON.parse(saved); } } }; const actions { addCartItem({ commit }, { product, quantity }) { commit(ADD_ITEM, { productId: product.id, productName: product.name, price: product.price, imageUrl: product.imageUrl, quantity, maxStock: product.stock // 把庫(kù)存也存下來(lái)方便前端校驗(yàn) }); }, // ... 其他actions }; export default { namespaced: true, state, mutations, actions };技巧將購(gòu)物車數(shù)據(jù)同步到localStorage可以實(shí)現(xiàn)頁(yè)面刷新后購(gòu)物車不丟失這是一個(gè)提升用戶體驗(yàn)的小細(xì)節(jié)。在提交訂單時(shí)需要再次從后端校驗(yàn)庫(kù)存因?yàn)閘ocalStorage中的數(shù)據(jù)可能過(guò)期。下單流程前端交互用戶點(diǎn)擊“提交訂單”前端將購(gòu)物車中的商品列表、配送地址等信息組裝成OrderRequest對(duì)象。調(diào)用后端POST /api/orders接口。后端處理成功返回完整的訂單信息含訂單號(hào)。前端跳轉(zhuǎn)到訂單確認(rèn)頁(yè)或支付頁(yè)如果是模擬支付可以展示一個(gè)“支付成功”的按鈕。用戶“支付”后前端調(diào)用POST /api/orders/{orderId}/pay接口后端將訂單狀態(tài)更新為“已支付”。前端清空購(gòu)物車調(diào)用CLEAR_CARTmutation并引導(dǎo)用戶到“我的訂單”頁(yè)面。5. 項(xiàng)目部署、報(bào)告撰寫與常見(jiàn)問(wèn)題排查5.1 從開(kāi)發(fā)到部署的完整路徑期末作業(yè)不僅要求代碼能跑還常常要求一份部署文檔或演示。后端打包與運(yùn)行打包在SpringBoot項(xiàng)目根目錄下執(zhí)行mvn clean packageMaven或./gradlew bootJarGradle。會(huì)在target目錄下生成一個(gè)可執(zhí)行的your-project-0.0.1-SNAPSHOT.jar文件。本地運(yùn)行java -jar your-project-0.0.1-SNAPSHOT.jar。默認(rèn)使用application.properties或application.yml中的配置。生產(chǎn)配置通常我們會(huì)創(chuàng)建一個(gè)application-prod.yml文件配置生產(chǎn)環(huán)境的數(shù)據(jù)庫(kù)連接、服務(wù)器端口等。運(yùn)行時(shí)通過(guò)--spring.profiles.activeprod參數(shù)激活。前端構(gòu)建與部署構(gòu)建在Vue項(xiàng)目根目錄下執(zhí)行npm run build。這會(huì)生成一個(gè)dist文件夾里面是壓縮、優(yōu)化過(guò)的靜態(tài)文件HTML, JS, CSS。部署簡(jiǎn)單方式將dist文件夾里的所有文件扔到SpringBoot項(xiàng)目的src/main/resources/static/目錄下然后重新打包后端。這樣訪問(wèn)后端地址如http://localhost:8080就能直接看到前端頁(yè)面。這是交作業(yè)最省事的方法。分離部署將dist文件夾部署到Nginx服務(wù)器上Nginx負(fù)責(zé)提供前端頁(yè)面并將API請(qǐng)求代理到后端的SpringBoot服務(wù)http://localhost:8080/api。這更接近真實(shí)生產(chǎn)環(huán)境。數(shù)據(jù)庫(kù)初始化在你的項(xiàng)目報(bào)告里一定要附上數(shù)據(jù)庫(kù)的SQL腳本schema.sql和data.sql。這樣評(píng)審老師可以一鍵初始化數(shù)據(jù)庫(kù)。SpringBoot支持在啟動(dòng)時(shí)自動(dòng)執(zhí)行這些腳本只需將其放在src/main/resources下并在配置中設(shè)置spring: sql: init: mode: always # 總是初始化 schema-locations: classpath:schema.sql # 建表腳本 >Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) // 針對(duì)所有/api開(kāi)頭的接口 .allowedOrigins(http://localhost:8081) // 允許前端地址 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true); } }生產(chǎn)環(huán)境如果前后端分離部署在Nginx配置中設(shè)置代理和CORS頭或者在后端通過(guò)CrossOrigin注解或配置類針對(duì)生產(chǎn)域名進(jìn)行配置。問(wèn)題2Vue打包后部署到SpringBoot的static目錄刷新頁(yè)面出現(xiàn)404?，F(xiàn)象直接訪問(wèn)首頁(yè)正常但在非首頁(yè)路由如/order刷新頁(yè)面顯示SpringBoot的404錯(cuò)誤頁(yè)。原因Vue是單頁(yè)應(yīng)用SPA路由由前端控制。當(dāng)你刷新/order時(shí)請(qǐng)求發(fā)到了后端后端沒(méi)有這個(gè)路由對(duì)應(yīng)的資源。解決方案在SpringBoot中配置一個(gè)錯(cuò)誤處理器將所有未匹配API路由的請(qǐng)求都重定向到前端入口頁(yè)面index.html讓Vue路由接管。Controller public class FrontendController { RequestMapping(value {/, /{path:[^\\.]*}}) public String forward() { return forward:/index.html; } }問(wèn)題3多人開(kāi)發(fā)時(shí)數(shù)據(jù)庫(kù)字段或枚舉值不一致?，F(xiàn)象A同學(xué)在本地增加了用戶表的avatar字段B同學(xué)拉取代碼后運(yùn)行報(bào)錯(cuò)提示字段不存在。解決方案使用數(shù)據(jù)庫(kù)版本管理工具如Flyway或Liquibase。將每次數(shù)據(jù)庫(kù)變更創(chuàng)建表、增加字段寫成SQL腳本并納入版本控制。項(xiàng)目啟動(dòng)時(shí)會(huì)自動(dòng)按順序執(zhí)行這些腳本保證所有人的數(shù)據(jù)庫(kù)結(jié)構(gòu)一致。這是非常專業(yè)的做法強(qiáng)烈建議在報(bào)告中提及。手動(dòng)同步至少維護(hù)一個(gè)統(tǒng)一的、最新的schema.sql文件在項(xiàng)目中每次有變動(dòng)都更新它并通知組員執(zhí)行。問(wèn)題4訂單狀態(tài)流轉(zhuǎn)混亂?，F(xiàn)象訂單可能從“待支付”直接變成“已完成”邏輯混亂。解決方案在后端定義清晰的訂單狀態(tài)枚舉并在狀態(tài)變更時(shí)進(jìn)行校驗(yàn)。public enum OrderStatusEnum { WAITING_PAYMENT(0, 待支付), PAID(1, 已支付), MAKING(2, 制作中), READY_FOR_PICKUP(3, 待取餐), COMPLETED(4, 已完成), CANCELLED(5, 已取消); // 定義合法的狀態(tài)流轉(zhuǎn)例如待支付 - 已支付 - 制作中 - 待取餐 - 已完成 private static final MapInteger, ListInteger ALLOWED_TRANSITIONS new HashMap(); static { ALLOWED_TRANSITIONS.put(WAITING_PAYMENT.code, Arrays.asList(PAID.code, CANCELLED.code)); ALLOWED_TRANSITIONS.put(PAID.code, Arrays.asList(MAKING.code, CANCELLED.code)); // ... 其他 } public static boolean canTransitionFromTo(Integer from, Integer to) { ListInteger allowed ALLOWED_TRANSITIONS.get(from); return allowed ! null allowed.contains(to); } // ... getter, constructor }在修改訂單狀態(tài)的服務(wù)方法中先調(diào)用OrderStatusEnum.canTransitionFromTo(currentStatus, newStatus)進(jìn)行校驗(yàn)不合法則拋出業(yè)務(wù)異常。問(wèn)題5圖片上傳與訪問(wèn)。需求商家需要上傳奶茶圖片。方案本地存儲(chǔ)SpringBoot接收上傳的文件保存到服務(wù)器某個(gè)目錄如/uploads并在數(shù)據(jù)庫(kù)中存儲(chǔ)相對(duì)路徑如/images/奶茶.jpg。然后配置靜態(tài)資源映射使該目錄可通過(guò)URL訪問(wèn)。缺點(diǎn)部署遷移麻煩集群環(huán)境更復(fù)雜。對(duì)象存儲(chǔ)推薦使用云服務(wù)商如阿里云OSS、騰訊云COS的對(duì)象存儲(chǔ)服務(wù)。前端直接上傳到云存儲(chǔ)通常通過(guò)后端生成一個(gè)臨時(shí)上傳憑證數(shù)據(jù)庫(kù)只存完整的URL。這種方式解耦、可擴(kuò)展是生產(chǎn)環(huán)境的標(biāo)準(zhǔn)做法。對(duì)于期末作業(yè)你可以在報(bào)告中對(duì)比兩種方案并說(shuō)明為什么對(duì)象存儲(chǔ)更好。完成這樣一個(gè)系統(tǒng)從零到能演示大概需要80-100小時(shí)的專注開(kāi)發(fā)時(shí)間。關(guān)鍵在于前期把數(shù)據(jù)庫(kù)設(shè)計(jì)和核心業(yè)務(wù)流程如下單想清楚、畫明白中期遵循“前后端分離、API先行”的原則協(xié)作后期留出足夠的時(shí)間調(diào)試、部署和撰寫報(bào)告。當(dāng)你看到自己構(gòu)建的系統(tǒng)能流暢地完成點(diǎn)單、支付、管理的完整閉環(huán)時(shí)那種成就感絕對(duì)是抄一份源碼無(wú)法比擬的。這份經(jīng)歷和其中學(xué)到的解決問(wèn)題的方法才是你期末大作業(yè)最大的收獲。本文還有配套的精品資源點(diǎn)擊獲取