目實(shí)戰(zhàn)：從MySQL數(shù)據(jù)庫到前后端分離部署)
之前整理過一個(gè)SpringBootVue的無人智慧超市項(xiàng)目被好幾個(gè)準(zhǔn)備做畢設(shè)的同學(xué)追著問干脆把完整的實(shí)現(xiàn)思路和坑點(diǎn)都寫出來。這套系統(tǒng)后端是SpringBootMyBatis-Plus前端是VueElement UI數(shù)據(jù)庫用MySQL邏輯并不復(fù)雜但覆蓋了一個(gè)小型管理系統(tǒng)的完整閉環(huán)商品管理、會(huì)員管理、自助購物車、訂單結(jié)算、門禁模擬、數(shù)據(jù)統(tǒng)計(jì)拿去應(yīng)付本科畢設(shè)或者課程設(shè)計(jì)完全夠用更重要的是每個(gè)模塊都能講清楚為什么這么做。如果你正處在選型階段最關(guān)心的無非是三件事好不好跑起來、代碼量大不大、答辯能不能講明白。先說結(jié)論這套項(xiàng)目屬于中等體量后端大概十幾個(gè)核心接口前端七八個(gè)頁面一個(gè)人一周左右能啃完而且因?yàn)闃I(yè)務(wù)貼近日常生活功能解釋起來非常直觀。1. 項(xiàng)目整體定位與設(shè)計(jì)思路1.1 這個(gè)系統(tǒng)到底解決了什么問題無人智慧超市核心就是把傳統(tǒng)超市的人工收銀、人工盤貨、人工門禁這些環(huán)節(jié)自動(dòng)化。放在畢設(shè)場(chǎng)景里不需要你真的接入人臉識(shí)別硬件或重力感應(yīng)貨架而是用軟件模擬這套流程用戶掃碼或注冊(cè)會(huì)員后進(jìn)店選擇商品加入虛擬購物車結(jié)算時(shí)系統(tǒng)自動(dòng)計(jì)算金額并扣除賬戶余額或模擬支付出門時(shí)校驗(yàn)訂單狀態(tài)。管理端則負(fù)責(zé)商品上下架、庫存調(diào)整、訂單查詢、會(huì)員管理、銷售統(tǒng)計(jì)。這個(gè)業(yè)務(wù)模型的價(jià)值在于它天然包含了一個(gè)管理信息系統(tǒng)該有的所有要素?cái)?shù)據(jù)建模、前后端交互、權(quán)限控制、狀態(tài)流轉(zhuǎn)、統(tǒng)計(jì)報(bào)表。老師問你這個(gè)系統(tǒng)做了什么你可以順著用戶一條完整的購物鏈路講下來老師問你用了什么技術(shù)前后端分離、RESTful接口、JWT鑒權(quán)、MyBatis-Plus條件構(gòu)造器都能排得上用場(chǎng)。1.2 為什么選SpringBootVue這套組合而不是其他方案每年畢設(shè)選型都會(huì)被問這個(gè)問題我的建議很直接如果你是Java方向這就是最穩(wěn)的組合。SpringBoot把Spring的配置簡化到了極致內(nèi)嵌Tomcat打成一個(gè)Jar包就能跑不需要折騰Tomcat部署。MyBatis-Plus又在MyBatis基礎(chǔ)上把單表CRUD寫成了現(xiàn)成的方法省掉大量重復(fù)的Mapper XML。前端Vue配合Element UI表格、表單、彈窗、分頁這些后臺(tái)管理頁面最常見的組件都有現(xiàn)成的不需要自己手搓UI。對(duì)比一下其他方案你就明白了如果用JSPServlet代碼寫得再規(guī)范答辯時(shí)也容易被質(zhì)疑技術(shù)陳舊如果后端用Python的Django又和你Java課程的主線不一致面試時(shí)不好解釋。SpringBootVue是當(dāng)前企業(yè)里中小型管理系統(tǒng)的主流搭檔學(xué)完寫在簡歷上不虧。還有一個(gè)實(shí)際原因網(wǎng)上這套組合的參考資料最多遇到報(bào)錯(cuò)基本都能搜到解決方案。我見過太多同學(xué)選了冷門框架最后卡在一個(gè)莫名其妙的依賴沖突上連問都沒處問。選熱門技術(shù)棧本身就是降低風(fēng)險(xiǎn)的手段。1.3 無人超市的完整業(yè)務(wù)流程梳理把業(yè)務(wù)流程理清楚后面建模就順了。一個(gè)用戶從進(jìn)店到離店大致經(jīng)歷這樣幾步進(jìn)店用戶掃碼或者輸入會(huì)員手機(jī)號(hào)系統(tǒng)校驗(yàn)身份生成一個(gè)會(huì)話記錄標(biāo)記在店?duì)顟B(tài)。選購用戶瀏覽商品列表把商品加入購物車。這里不需要真實(shí)掃碼槍前端頁面加個(gè)按鈕就行。結(jié)算用戶提交購物車后端計(jì)算總金額調(diào)用模擬支付接口扣減余額生成訂單扣減庫存。離店系統(tǒng)根據(jù)訂單狀態(tài)更新會(huì)話記錄為已離店后端返回一個(gè)放行標(biāo)識(shí)前端展示模擬門禁放行動(dòng)畫。管理端的流程就簡單了管理員登錄維護(hù)商品分類和商品信息處理庫存預(yù)警查看訂單列表和銷售額統(tǒng)計(jì)。整個(gè)系統(tǒng)就是這兩條主線的交織數(shù)據(jù)庫表也是圍繞這兩條線設(shè)計(jì)的。2. 技術(shù)棧與項(xiàng)目結(jié)構(gòu)2.1 后端分層結(jié)構(gòu)與Maven依賴后端我用標(biāo)準(zhǔn)的四層結(jié)構(gòu)Controller接收前端請(qǐng)求Service寫業(yè)務(wù)邏輯Mapper操作數(shù)據(jù)庫Entity映射表結(jié)構(gòu)。有人覺得分層麻煩但畢設(shè)答辯時(shí)這就是加分項(xiàng)你可以明確告訴老師我遵循了單一職責(zé)原則。pom.xml里的核心依賴就這么幾個(gè)dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.5/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.25/version /dependencyHutool是個(gè)小工具庫生成隨機(jī)訂單號(hào)、日期處理、加密都用得上。依賴別一股腦全加夠用就好加多了版本沖突反而麻煩。JWT用來做登錄鑒權(quán)比傳統(tǒng)的Session更適合前后端分離的場(chǎng)景。2.2 SpringBoot版本與JDK版本怎么選這里需要重點(diǎn)提醒SpringBoot版本不是越高越好。我一開始用了SpringBoot 3.2.x結(jié)果它要求JDK 17而且部分老版本的MyBatis-Plus、Druid和它有兼容問題。如果你只是做畢設(shè)沒必要追新推薦用SpringBoot 2.7.18配合JDK 8這個(gè)組合經(jīng)過大量項(xiàng)目驗(yàn)證網(wǎng)上報(bào)錯(cuò)解決方案也最全。# application.yml 核心配置 server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_mart?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0注意url里的serverTimezoneAsia/Shanghai不加上MySQL 8連接時(shí)會(huì)報(bào)時(shí)區(qū)錯(cuò)誤。log-impl配置成StdOutImpl可以在控制臺(tái)打印SQL排查問題時(shí)非常有用答辯演示時(shí)也方便展示。我見過不少同學(xué)卡在這些基礎(chǔ)配置上其實(shí)都是經(jīng)驗(yàn)問題。2.3 前端Vue項(xiàng)目的搭建方式前端我用的是Vue 2不是Vue 3。不是說Vue 3不好而是Element UI對(duì)Vue 2的支持最成熟網(wǎng)上的示例代碼90%都是Vue 2寫法照著抄不容易翻車。如果你非要用Vue 3那配合Element Plus也行但很多細(xì)節(jié)寫法有差異調(diào)試成本會(huì)高一些。創(chuàng)建項(xiàng)目用Vue CLInpm install -g vue/cli vue create smart-mart-web # 選擇 Manually select features勾選 Router cd smart-mart-web npm install element-ui axios安裝依賴的過程經(jīng)常出問題尤其是網(wǎng)絡(luò)不穩(wěn)定的時(shí)候node_modules裝一半失敗了。國內(nèi)環(huán)境建議先設(shè)置npm鏡像源再安裝npm config set registry https://registry.npmmirror.com裝完依賴后在main.js里注冊(cè)Element UI和Router然后按頁面拆組件。我的頁面結(jié)構(gòu)是登錄頁、用戶端首頁、商品列表頁、購物車頁、訂單確認(rèn)頁、管理端布局、商品管理頁、訂單管理頁、會(huì)員管理頁、統(tǒng)計(jì)頁。每個(gè)頁面一個(gè)文件夾組件按需拆分。3. 數(shù)據(jù)庫設(shè)計(jì)與核心功能模塊3.1 數(shù)據(jù)庫表設(shè)計(jì)五張表串起整個(gè)系統(tǒng)數(shù)據(jù)庫是這套項(xiàng)目的地基表設(shè)計(jì)得好后面的代碼能少寫一半。我設(shè)計(jì)了五張核心表用戶表、商品表、訂單表、訂單明細(xì)表、購物車表。下面給出建表SQL的核心片段。CREATE TABLE user ( id bigint NOT NULL AUTO_INCREMENT, phone varchar(20) NOT NULL, password varchar(100) NOT NULL, nickname varchar(50) DEFAULT NULL, balance decimal(10,2) DEFAULT 0.00, role tinyint DEFAULT 1, status tinyint DEFAULT 1, create_time datetime DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY uk_phone (phone) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;role字段區(qū)分管理員和普通用戶balance存賬戶余額這是模擬支付的賬戶來源。手機(jī)號(hào)加唯一索引這是登錄賬號(hào)。CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL, category_id bigint DEFAULT NULL, price decimal(10,2) NOT NULL, stock int NOT NULL, image varchar(255) DEFAULT NULL, status tinyint DEFAULT 1, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;商品表加了category_id字段預(yù)留分類擴(kuò)展status字段控制上下架下架的商品用戶端不展示。CREATE TABLE orders ( id bigint NOT NULL AUTO_INCREMENT, order_no varchar(32) NOT NULL, user_id bigint NOT NULL, total_amount decimal(10,2) NOT NULL, status tinyint DEFAULT 0, create_time datetime DEFAULT NULL, pay_time datetime DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY uk_order_no (order_no) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;訂單表里status是整個(gè)系統(tǒng)最關(guān)鍵的狀態(tài)字段0代表待支付1代表已支付2代表已離店。字段注釋必須寫清楚答辯時(shí)老師一定會(huì)問狀態(tài)怎么流轉(zhuǎn)的。CREATE TABLE order_item ( id bigint NOT NULL AUTO_INCREMENT, order_id bigint NOT NULL, product_id bigint NOT NULL, product_name varchar(100) DEFAULT NULL, price decimal(10,2) NOT NULL, quantity int NOT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;為什么要有訂單明細(xì)表因?yàn)橐粋€(gè)訂單可能包含多個(gè)商品而訂單表只保存總額。到時(shí)候你要查某個(gè)訂單里買了哪些東西沒有明細(xì)表根本查不了。還有一點(diǎn)下單時(shí)要把商品名稱和價(jià)格冗余存一份這樣即使日后商品改名或者刪除訂單的歷史記錄仍然完整。這是電商系統(tǒng)的常規(guī)做法講出來顯得專業(yè)。3.2 用戶端功能模塊從登錄到購物車用戶端核心接口就四個(gè)注冊(cè)登錄、商品列表、購物車操作、提交訂單。登錄用手機(jī)號(hào)密碼密碼存在數(shù)據(jù)庫里用MD5加鹽處理。我知道MD5不算安全但畢設(shè)項(xiàng)目里夠用而且你可以主動(dòng)跟老師說生產(chǎn)環(huán)境應(yīng)該用BCrypt這反而成了加分項(xiàng)。購物車我采用了后端存儲(chǔ)而不是前端存儲(chǔ)的方案。有人認(rèn)為購物車存前端localStorage簡單但那樣用戶換設(shè)備數(shù)據(jù)就丟了。我用一張購物車表關(guān)聯(lián)用戶和商品后端提供添加、修改數(shù)量、刪除、查詢四個(gè)接口。數(shù)據(jù)結(jié)構(gòu)很簡單操作邏輯都在Service層。Service public class CartServiceImpl implements CartService { Override public Result addCart(CartDTO dto) { // 先查詢?cè)撚脩糍徫镘嚴(yán)锸欠褚延羞@個(gè)商品 LambdaQueryWrapperCart wrapper new LambdaQueryWrapper(); wrapper.eq(Cart::getUserId, dto.getUserId()) .eq(Cart::getProductId, dto.getProductId()); Cart exist cartMapper.selectOne(wrapper); if (exist ! null) { exist.setQuantity(exist.getQuantity() dto.getQuantity()); cartMapper.updateById(exist); } else { Cart cart new Cart(); cart.setUserId(dto.getUserId()); cart.setProductId(dto.getProductId()); cart.setQuantity(dto.getQuantity()); cartMapper.insert(cart); } return Result.success(加入成功); } }這里用MyBatis-Plus的LambdaQueryWrapper構(gòu)造條件比寫XML簡潔很多而且類型安全字段名寫錯(cuò)了編譯期就能發(fā)現(xiàn)。3.3 管理端功能模塊商品、訂單、會(huì)員、統(tǒng)計(jì)管理端的商品管理就是常規(guī)的增刪改查分頁MyBatis-Plus自帶Page對(duì)象配合selectPage方法幾行代碼搞定Override public PageProduct pageProducts(int pageNum, int pageSize, String keyword) { PageProduct page new Page(pageNum, pageSize); LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); if (StringUtils.hasText(keyword)) { wrapper.like(Product::getName, keyword); } wrapper.orderByDesc(Product::getCreateTime); return productMapper.selectPage(page, wrapper); }訂單管理就是按狀態(tài)篩選訂單列表也可以查看訂單的明細(xì)。這里有個(gè)小技巧查詢訂單列表時(shí)如果每條訂單都要單獨(dú)查一次明細(xì)會(huì)產(chǎn)生N1查詢問題。簡單項(xiàng)目可以不那么較真但如果想展示自己的水平可以在Service層先把訂單ID列表查出來再一次性批量查詢明細(xì)然后按訂單ID分組組裝。這個(gè)優(yōu)化講出來能讓老師覺得你不是在背代碼。會(huì)員管理做得簡單就是一個(gè)用戶列表可以看到每個(gè)用戶的余額和消費(fèi)統(tǒng)計(jì)。統(tǒng)計(jì)模塊我用ECharts畫了兩個(gè)圖表近七天銷售額折線圖、商品分類銷量占比餅圖。數(shù)據(jù)來源是SQL的聚合查詢。這里千萬別用循環(huán)查數(shù)據(jù)庫再在Java里計(jì)算效率低而且代碼丑直接讓MySQL分組求和查出來什么就展示什么。SELECT DATE_FORMAT(create_time, %Y-%m-%d) AS day, SUM(total_amount) AS amount FROM orders WHERE status 1 AND create_time DATE_SUB(CURDATE(), INTERVAL 7 DAY) GROUP BY day ORDER BY day;4. 關(guān)鍵代碼實(shí)現(xiàn)與實(shí)操細(xì)節(jié)4.1 模擬門禁與結(jié)算的核心邏輯無人超市系統(tǒng)最需要講故事的地方就是結(jié)算后如何放行。真實(shí)場(chǎng)景是硬件聯(lián)動(dòng)這里用軟件模擬。我在后端設(shè)計(jì)了這樣一套邏輯用戶在購物車頁面點(diǎn)擊結(jié)算前端把購物車ID列表和用戶ID傳給后端。后端先校驗(yàn)所有商品庫存是否充足如果不夠就返回明確提示。庫存充足的情況下在一個(gè)方法里完成三件事計(jì)算總金額、生成訂單和訂單明細(xì)、扣減庫存和用戶余額。這三件事必須放在同一個(gè)事務(wù)里要么全部成功要么全部回滾。這一步一定要講清楚事務(wù)是保證數(shù)據(jù)一致性的關(guān)鍵。Transactional(rollbackFor Exception.class) public Result checkout(CheckoutDTO dto) { ListCart carts cartMapper.selectBatchIds(dto.getCartIds()); BigDecimal total BigDecimal.ZERO; for (Cart cart : carts) { Product product productMapper.selectById(cart.getProductId()); if (product.getStock() cart.getQuantity()) { return Result.error(商品【 product.getName() 】庫存不足); } total total.add(product.getPrice().multiply(BigDecimal.valueOf(cart.getQuantity()))); } // 生成訂單號(hào) String orderNo SM DateUtil.format(new Date(), yyyyMMddHHmmss) RandomUtil.randomNumbers(4); Orders order new Orders(); order.setOrderNo(orderNo); order.setUserId(dto.getUserId()); order.setTotalAmount(total); order.setStatus(1); order.setPayTime(new Date()); ordersMapper.insert(order); // 插入訂單明細(xì)、扣減庫存、扣減余額、清空購物車 return Result.success(orderNo); }事務(wù)注解Transactional放在這里的作用是如果插入訂單成功后扣庫存失敗整個(gè)方法回滾不會(huì)出現(xiàn)訂單生成了但庫存沒扣的臟數(shù)據(jù)。你可以把這句話原封不動(dòng)寫進(jìn)論文里。4.2 JWT登錄鑒權(quán)的實(shí)現(xiàn)細(xì)節(jié)前后端分離項(xiàng)目里登錄狀態(tài)通常用JWT而不是Session。JWT就是一個(gè)包含用戶信息的加密字符串服務(wù)器不保存狀態(tài)客戶端每次請(qǐng)求帶上服務(wù)器驗(yàn)證簽名后解析出用戶ID。實(shí)現(xiàn)分三步第一步登錄成功后簽發(fā)TokenString token Jwts.builder() .setSubject(user.getId().toString()) .claim(phone, user.getPhone()) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 86400000)) .signWith(secretKey, SignatureAlgorithm.HS256) .compact();第二步寫一個(gè)攔截器攔截需要登錄的接口public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(Authorization); if (token null || !token.startsWith(Bearer )) { // 返回401狀態(tài)碼 response.setStatus(401); return false; } try { Claims claims Jwts.parserBuilder() .setSigningKey(secretKey) .build() .parseClaimsJws(token.substring(7)) .getBody(); request.setAttribute(userId, claims.getSubject()); return true; } catch (JwtException e) { response.setStatus(401); return false; } }第三步在WebMvcConfigurer里注冊(cè)攔截器配置哪些路徑需要攔截。登錄接口和商品列表接口不需要攔截購物車、訂單、管理端接口全部攔截。前端拿到401響應(yīng)就跳回登錄頁。這里要注意一個(gè)坑攔截器注冊(cè)路徑如果寫錯(cuò)你會(huì)發(fā)現(xiàn)某些接口沒攔截、某些接口明明應(yīng)該攔截卻放行了。我習(xí)慣把接口路徑統(tǒng)一用/api/**開頭然后根據(jù)需要排除/api/user/login、/api/product/list這些公開接口。4.3 Vue端的路由守衛(wèi)與Axios封裝前端要做的事情是在Axios請(qǐng)求攔截器里自動(dòng)帶上Token在響應(yīng)攔截器里統(tǒng)一處理401跳轉(zhuǎn)。這個(gè)屬于固定套路直接貼代碼說明。// request.js axios.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }); axios.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } return Promise.reject(error); } );路由守衛(wèi)控制頁面訪問權(quán)限。比如管理端頁面只有role0的用戶能訪問普通用戶跳進(jìn)去要彈提示router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.path /login) { next(); return; } if (!token) { next(/login); return; } const role localStorage.getItem(role); if (to.meta.requiresAdmin role ! 0) { next(/); return; } next(); });我見過有些同學(xué)的畢設(shè)前端頁面能直接通過URL訪問后臺(tái)接口這就是沒做路由守衛(wèi)答辯時(shí)被問如何防止未授權(quán)訪問就答不上來。這一段屬于安全要點(diǎn)值得單獨(dú)準(zhǔn)備一下。4.4 模擬支付與訂單狀態(tài)流轉(zhuǎn)支付模塊不用接真實(shí)支付接口做一個(gè)模擬余額支付就行。用戶可以事先在個(gè)人中心給賬戶充值也是模擬的管理員直接改余額。結(jié)算時(shí)后端判斷余額是否足夠不夠就返回余額不足請(qǐng)充值夠就扣減余額并生成支付記錄。訂單狀態(tài)從0流轉(zhuǎn)到1再在用戶點(diǎn)擊確認(rèn)離店時(shí)流轉(zhuǎn)到2。如果你想讓系統(tǒng)看起來更完整還可以加一層虛擬的門外設(shè)備檢測(cè)用戶訂單狀態(tài)為2之后前端門禁頁顯示門鎖已開啟請(qǐng)通過。這個(gè)效果用Vue的過渡動(dòng)畫就能實(shí)現(xiàn)成本低演示效果好。5. 本地部署與運(yùn)行環(huán)境搭建5.1 開發(fā)環(huán)境準(zhǔn)備清單我把整套環(huán)境版本列成一個(gè)清單照著裝就不會(huì)出兼容性問題組件版本說明JDK1.8別用17兼容問題太多MySQL5.7 或 8.08.0需要配置時(shí)區(qū)Node.js16.xVue2項(xiàng)目對(duì)Node版本要求寬松Maven3.8.xIDEA自帶也可IDEA2023.x社區(qū)版夠用MySQL安裝時(shí)有個(gè)細(xì)節(jié)安裝到Windows上的時(shí)候如果之前裝過其他版本端口3306可能被占用用netstat -ano查一下端口占用或者直接改端口3307并在連接串里同步修改。我遇到過一個(gè)同學(xué)裝完MySQLNavicat連接不上折騰半天發(fā)現(xiàn)服務(wù)根本沒啟動(dòng)Windows服務(wù)列表里把MySQL服務(wù)啟動(dòng)就好了。5.2 數(shù)據(jù)庫初始化的兩種方式第一種是用Navicat手工導(dǎo)入SQL文件適合看不懂命令行的人。新建數(shù)據(jù)庫smart_mart字符集選utf8mb4右鍵運(yùn)行SQL文件把建表語句和初始數(shù)據(jù)一起導(dǎo)入。第二種是用命令行mysql -u root -p smart_mart.sql初始數(shù)據(jù)里我預(yù)置了幾個(gè)測(cè)試賬號(hào)一個(gè)管理員賬號(hào)admin/123456一個(gè)普通用戶13800000000/123456還有十來個(gè)商品數(shù)據(jù)。有初始數(shù)據(jù)的好處是系統(tǒng)一跑起來就能看到效果不用一個(gè)個(gè)手動(dòng)錄入。答辯前務(wù)必檢查演示賬號(hào)還能不能用我見過有人把數(shù)據(jù)庫密碼改了現(xiàn)場(chǎng)登錄不進(jìn)去非常尷尬。5.3 SpringBoot與Vue的啟動(dòng)順序后端啟動(dòng)很簡單IDEA里直接運(yùn)行SmartMartApplication的main方法。啟動(dòng)后訪問http://localhost:8080如果看到SpringBoot默認(rèn)的錯(cuò)誤頁說明端口正常。前端啟動(dòng)分兩步npm install npm run serveDevServer默認(rèn)跑在8080端口而后端也在8080必然沖突。解決辦法是在vue.config.js里配置前端端口和代理module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }配置代理之后前端請(qǐng)求/api/product/list會(huì)轉(zhuǎn)發(fā)到后端的http://localhost:8080/api/product/list跨域問題由DevServer解決瀏覽器里看不到跨域報(bào)錯(cuò)。啟動(dòng)順序沒有嚴(yán)格要求但先啟動(dòng)后端再啟動(dòng)前端能保證前端代理的調(diào)試信息里不至于報(bào)連接被拒絕。5.4 生產(chǎn)環(huán)境打包前后端怎么合到一起畢設(shè)如果需要部署演示最省事的方式是把前端的build產(chǎn)物放到SpringBoot的static目錄下最后只發(fā)布一個(gè)Jar包。操作流程是npm run build生成dist目錄把dist下的所有文件復(fù)制到后端項(xiàng)目的src/main/resources/static目錄下再用Maven打包mvn clean package -DskipTests生成的target/smart-mart.jar用java -jar smart-mart.jar運(yùn)行瀏覽器直接訪問http://localhost:8080SpringBoot會(huì)把前端頁面和接口請(qǐng)求放在同一個(gè)端口處理。注意此時(shí)前端的接口請(qǐng)求路徑必須是相對(duì)路徑也就是/api/xxx不能寫死成localhost:3000否則頁面加載了但接口全部403。6. 常見問題與避坑記錄6.1 SpringBoot版本太高引發(fā)的連環(huán)報(bào)錯(cuò)這是這一屆學(xué)生里最常見的坑。SpringBoot 3.x強(qiáng)制要求JDK 17而很多人本機(jī)裝的是JDK 8啟動(dòng)直接報(bào)UnsupportedClassVersionError。就算你臨時(shí)改了JDK版本MyBatis-Plus老版本里的Jsoup等依賴也會(huì)出現(xiàn)ClassNotFoundException因?yàn)镾pringBoot 3用了Jakarta命名空間不再兼容javax.*。我的建議是統(tǒng)一用SpringBoot 2.7.18 JDK 8。如果你的團(tuán)隊(duì)或者老師要求必須用新版本也不要硬扛直接換MyBatis-Plus 3.5.5以上版本并在pom.xml里排查所有用到j(luò)avax.servlet的依賴。這類問題排查耗時(shí)很長而且越查越亂不如一開始就選穩(wěn)定版本。6.2 MySQL連接失敗時(shí)區(qū)、驅(qū)動(dòng)、密碼三個(gè)坎連接MySQL 8時(shí)第一個(gè)坎是時(shí)區(qū)不配置serverTimezoneAsia/Shanghai會(huì)報(bào)The server time zone value ?D1ú±ê×?ê±?? is unrecognized解決辦法就是在連接串里加上時(shí)區(qū)參數(shù)。第二個(gè)坎是驅(qū)動(dòng)類名MySQL 8要寫com.mysql.cj.jdbc.Driver寫舊的com.mysql.jdbc.Driver雖然也能跑但會(huì)報(bào)警告。第三個(gè)坎是密碼驗(yàn)證方式MySQL 8默認(rèn)用的caching_sha2_password和舊版JDBC驅(qū)動(dòng)不兼容要么升級(jí)驅(qū)動(dòng)版本要么在MySQL里執(zhí)行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 密碼。新手最容易在這里喪失信心其實(shí)這些報(bào)錯(cuò)信息都很直白把英文翻譯一下就知道缺什么了。排查原則先看MySQL服務(wù)有沒有啟動(dòng)再用命令行工具連接測(cè)試最后才去檢查Java代碼和配置。6.3 Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)與依賴安裝問題vue create過程可能卡在chromedriver這個(gè)依賴上這個(gè)是網(wǎng)絡(luò)問題居多。裝依賴時(shí)看到卡住不要直接CtrlC先等一會(huì)兒實(shí)在不行就換成npmmirror鏡像源再試。有些同學(xué)從前端拿到別人項(xiàng)目壓縮包后直接扔進(jìn)IDEA這東西不是Java項(xiàng)目要先用命令行進(jìn)入目錄執(zhí)行npm installIDEA只能幫你打開文件裝依賴還得靠npm。還有一類問題是Vue CLI版本太高要求Node.js版本過低的環(huán)境會(huì)報(bào)Digital Envelope routines::unsupported錯(cuò)誤。常見的臨時(shí)解決辦法是執(zhí)行export NODE_OPTIONS--openssl-legacy-provider但這是權(quán)宜之計(jì)最好還是把Node.js升級(jí)到16或18的穩(wěn)定版本。總之前端環(huán)境問題大多出在版本不匹配上和寫代碼的關(guān)系不大但確實(shí)很消磨耐心。6.4 前后端聯(lián)調(diào)時(shí)常見的跨域與接口對(duì)接問題跨域問題是必考題。如果前端直接請(qǐng)求后端地址而沒有走代理瀏覽器會(huì)報(bào)CORS錯(cuò)誤。解決方式有兩個(gè)一個(gè)是在SpringBoot里配置全局CORS另一個(gè)是像前面那樣在vue.config.js里配代理。我推薦后者因?yàn)樯a(chǎn)環(huán)境打包后是同源部署配置代理能順帶模擬出這個(gè)效果。接口對(duì)接時(shí)的另一個(gè)坑是字段名對(duì)不上。前端約定用productName后端實(shí)體類寫的是name結(jié)果列表里商品名稱一列全是空的。這種問題排查起來很煩建議開發(fā)時(shí)打開瀏覽器F12看網(wǎng)絡(luò)請(qǐng)求的響應(yīng)體先確定后端返回了哪些字段再去前端模板里核對(duì)。關(guān)鍵接口直接用Polyline圖的思路調(diào)通一個(gè)再看下一個(gè)不要攢了一堆問題再一起調(diào)試。6.5 答辯演示時(shí)的三個(gè)穩(wěn)定性建議現(xiàn)場(chǎng)演示翻車是畢設(shè)答辯的重災(zāi)區(qū)我總結(jié)三個(gè)經(jīng)驗(yàn)。第一演示前一天必須跑一遍完整流程不要僥幸小改動(dòng)不影響。第二手機(jī)熱點(diǎn)和現(xiàn)場(chǎng)WiFi都不要壓上把學(xué)生證、身份證等無關(guān)頁面關(guān)掉省得切換頁面時(shí)卡頓。第三數(shù)據(jù)庫里要準(zhǔn)備好演示數(shù)據(jù)商品別太少訂單要有不同狀態(tài)的這樣展示列表篩選功能時(shí)才有內(nèi)容。還有一個(gè)容易被忽略的點(diǎn)答辯時(shí)老師喜歡反問你覺得這個(gè)系統(tǒng)哪里還可以改進(jìn)。提前準(zhǔn)備幾個(gè)合理的優(yōu)化方向比如引入Redis做購物車緩存、用RabbitMQ處理訂單異步通知、接入真實(shí)人臉識(shí)別SDK都會(huì)讓回答更從容。7. 后端的擴(kuò)展與學(xué)習(xí)建議7.1 這個(gè)項(xiàng)目還能怎么擴(kuò)展成創(chuàng)新點(diǎn)畢設(shè)如果只是把基本功能做完很多學(xué)校只給中等分。想讓系統(tǒng)更有競(jìng)爭力可以從三個(gè)方向擴(kuò)展。第一個(gè)方向是把靜態(tài)的商品列表升級(jí)成分頁條件搜索比如按價(jià)格區(qū)間、分類、熱度排序這涉及MyBatis-Plus的多條件組合查詢論文里也好寫。第二個(gè)方向是加一個(gè)簡單的推薦模塊根據(jù)用戶購買記錄推薦同類商品不需要上機(jī)器學(xué)習(xí)算法用一個(gè)簡單規(guī)則統(tǒng)計(jì)就行。第三個(gè)方向是接入WebSocket做實(shí)時(shí)庫存展示前端頁面每兩秒刷新一次庫存管理員能看到哪些商品快賣完了。我個(gè)人覺得最劃算的擴(kuò)展是導(dǎo)入導(dǎo)出用EasyExcel實(shí)現(xiàn)商品數(shù)據(jù)的Excel批量導(dǎo)入和訂單導(dǎo)出。這個(gè)功能企業(yè)里用得極多而且演示效果直觀先把Excel模板下載出來填幾條數(shù)據(jù)再導(dǎo)入前后端都有交互答辯時(shí)可以讓老師親眼看到數(shù)據(jù)從Excel流進(jìn)了數(shù)據(jù)庫比純口頭描述有說服力得多。7.2 學(xué)完這套項(xiàng)目你真正會(huì)收獲什么把這個(gè)項(xiàng)目完整擼一遍你收獲的不只是一堆代碼。你會(huì)真正理解一個(gè)管理系統(tǒng)的請(qǐng)求怎么從前端頁面發(fā)起經(jīng)過攔截器校驗(yàn)、Controller參數(shù)接收、Service業(yè)務(wù)處理、Mapper數(shù)據(jù)查詢最后再返回到頁面上完整走通。這個(gè)鏈路是書本里很難講透的只有親手連起來才有感覺。很多人學(xué)新項(xiàng)目喜歡通篇復(fù)制跑通了就覺得自己會(huì)了。我的建議是跑通之后從一個(gè)小功能開始獨(dú)立重寫比如單獨(dú)把提交訂單邏輯自己寫一遍不參考原代碼。能寫出來說明你真正掌握了寫不出來就對(duì)著原代碼一行行比對(duì)找出你卡住的地方那正是你需要補(bǔ)的知識(shí)點(diǎn)。7.3 最后補(bǔ)充一個(gè)調(diào)試的小技巧在項(xiàng)目開發(fā)過程中我強(qiáng)烈建議后端保持log-impl: org.apache.ibatis.logging.stdout.StdOutImpl這條配置能讓控制臺(tái)打印出每條SQL執(zhí)行語句和參數(shù)值。當(dāng)你的列表數(shù)據(jù)不對(duì)時(shí)先看SQL有沒有按預(yù)期拼接條件當(dāng)更新操作沒生效時(shí)先看SQL影響行數(shù)是0還是1。大部分?jǐn)?shù)據(jù)問題都能靠這一步定位比在Java代碼里打斷點(diǎn)還高效。調(diào)試工具上前端打開F12的Network面板看接口響應(yīng)后端看IDEA控制臺(tái)的日志兩邊對(duì)照著調(diào)效率會(huì)高很多。不要碰到問題就甩給系統(tǒng)報(bào)錯(cuò)四個(gè)字先把報(bào)錯(cuò)信息完整讀三遍你會(huì)發(fā)現(xiàn)大部分問題其實(shí)描述得已經(jīng)很清楚了。 SpringBoot+Vue無人智慧超市項(xiàng)目實(shí)戰(zhàn)：從MySQL數(shù)據(jù)庫到前后端分離部署
之前整理過一個(gè)SpringBootVue的無人智慧超市項(xiàng)目被好幾個(gè)準(zhǔn)備做畢設(shè)的同學(xué)追著問干脆把完整的實(shí)現(xiàn)思路和坑點(diǎn)都寫出來。這套系統(tǒng)后端是SpringBootMyBatis-Plus前端是VueElement UI數(shù)據(jù)庫用MySQL邏輯并不復(fù)雜但覆蓋了一個(gè)小型管理系統(tǒng)的完整閉環(huán)商品管理、會(huì)員管理、自助購物車、訂單結(jié)算、門禁模擬、數(shù)據(jù)統(tǒng)計(jì)拿去應(yīng)付本科畢設(shè)或者課程設(shè)計(jì)完全夠用更重要的是每個(gè)模塊都能講清楚為什么這么做。如果你正處在選型階段最關(guān)心的無非是三件事好不好跑起來、代碼量大不大、答辯能不能講明白。先說結(jié)論這套項(xiàng)目屬于中等體量后端大概十幾個(gè)核心接口前端七八個(gè)頁面一個(gè)人一周左右能啃完而且因?yàn)闃I(yè)務(wù)貼近日常生活功能解釋起來非常直觀。1. 項(xiàng)目整體定位與設(shè)計(jì)思路1.1 這個(gè)系統(tǒng)到底解決了什么問題無人智慧超市核心就是把傳統(tǒng)超市的人工收銀、人工盤貨、人工門禁這些環(huán)節(jié)自動(dòng)化。放在畢設(shè)場(chǎng)景里不需要你真的接入人臉識(shí)別硬件或重力感應(yīng)貨架而是用軟件模擬這套流程用戶掃碼或注冊(cè)會(huì)員后進(jìn)店選擇商品加入虛擬購物車結(jié)算時(shí)系統(tǒng)自動(dòng)計(jì)算金額并扣除賬戶余額或模擬支付出門時(shí)校驗(yàn)訂單狀態(tài)。管理端則負(fù)責(zé)商品上下架、庫存調(diào)整、訂單查詢、會(huì)員管理、銷售統(tǒng)計(jì)。這個(gè)業(yè)務(wù)模型的價(jià)值在于它天然包含了一個(gè)管理信息系統(tǒng)該有的所有要素?cái)?shù)據(jù)建模、前后端交互、權(quán)限控制、狀態(tài)流轉(zhuǎn)、統(tǒng)計(jì)報(bào)表。老師問你這個(gè)系統(tǒng)做了什么你可以順著用戶一條完整的購物鏈路講下來老師問你用了什么技術(shù)前后端分離、RESTful接口、JWT鑒權(quán)、MyBatis-Plus條件構(gòu)造器都能排得上用場(chǎng)。1.2 為什么選SpringBootVue這套組合而不是其他方案每年畢設(shè)選型都會(huì)被問這個(gè)問題我的建議很直接如果你是Java方向這就是最穩(wěn)的組合。SpringBoot把Spring的配置簡化到了極致內(nèi)嵌Tomcat打成一個(gè)Jar包就能跑不需要折騰Tomcat部署。MyBatis-Plus又在MyBatis基礎(chǔ)上把單表CRUD寫成了現(xiàn)成的方法省掉大量重復(fù)的Mapper XML。前端Vue配合Element UI表格、表單、彈窗、分頁這些后臺(tái)管理頁面最常見的組件都有現(xiàn)成的不需要自己手搓UI。對(duì)比一下其他方案你就明白了如果用JSPServlet代碼寫得再規(guī)范答辯時(shí)也容易被質(zhì)疑技術(shù)陳舊如果后端用Python的Django又和你Java課程的主線不一致面試時(shí)不好解釋。SpringBootVue是當(dāng)前企業(yè)里中小型管理系統(tǒng)的主流搭檔學(xué)完寫在簡歷上不虧。還有一個(gè)實(shí)際原因網(wǎng)上這套組合的參考資料最多遇到報(bào)錯(cuò)基本都能搜到解決方案。我見過太多同學(xué)選了冷門框架最后卡在一個(gè)莫名其妙的依賴沖突上連問都沒處問。選熱門技術(shù)棧本身就是降低風(fēng)險(xiǎn)的手段。1.3 無人超市的完整業(yè)務(wù)流程梳理把業(yè)務(wù)流程理清楚后面建模就順了。一個(gè)用戶從進(jìn)店到離店大致經(jīng)歷這樣幾步進(jìn)店用戶掃碼或者輸入會(huì)員手機(jī)號(hào)系統(tǒng)校驗(yàn)身份生成一個(gè)會(huì)話記錄標(biāo)記在店?duì)顟B(tài)。選購用戶瀏覽商品列表把商品加入購物車。這里不需要真實(shí)掃碼槍前端頁面加個(gè)按鈕就行。結(jié)算用戶提交購物車后端計(jì)算總金額調(diào)用模擬支付接口扣減余額生成訂單扣減庫存。離店系統(tǒng)根據(jù)訂單狀態(tài)更新會(huì)話記錄為已離店后端返回一個(gè)放行標(biāo)識(shí)前端展示模擬門禁放行動(dòng)畫。管理端的流程就簡單了管理員登錄維護(hù)商品分類和商品信息處理庫存預(yù)警查看訂單列表和銷售額統(tǒng)計(jì)。整個(gè)系統(tǒng)就是這兩條主線的交織數(shù)據(jù)庫表也是圍繞這兩條線設(shè)計(jì)的。2. 技術(shù)棧與項(xiàng)目結(jié)構(gòu)2.1 后端分層結(jié)構(gòu)與Maven依賴后端我用標(biāo)準(zhǔn)的四層結(jié)構(gòu)Controller接收前端請(qǐng)求Service寫業(yè)務(wù)邏輯Mapper操作數(shù)據(jù)庫Entity映射表結(jié)構(gòu)。有人覺得分層麻煩但畢設(shè)答辯時(shí)這就是加分項(xiàng)你可以明確告訴老師我遵循了單一職責(zé)原則。pom.xml里的核心依賴就這么幾個(gè)dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.5/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.25/version /dependencyHutool是個(gè)小工具庫生成隨機(jī)訂單號(hào)、日期處理、加密都用得上。依賴別一股腦全加夠用就好加多了版本沖突反而麻煩。JWT用來做登錄鑒權(quán)比傳統(tǒng)的Session更適合前后端分離的場(chǎng)景。2.2 SpringBoot版本與JDK版本怎么選這里需要重點(diǎn)提醒SpringBoot版本不是越高越好。我一開始用了SpringBoot 3.2.x結(jié)果它要求JDK 17而且部分老版本的MyBatis-Plus、Druid和它有兼容問題。如果你只是做畢設(shè)沒必要追新推薦用SpringBoot 2.7.18配合JDK 8這個(gè)組合經(jīng)過大量項(xiàng)目驗(yàn)證網(wǎng)上報(bào)錯(cuò)解決方案也最全。# application.yml 核心配置 server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_mart?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghai mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0注意url里的serverTimezoneAsia/Shanghai不加上MySQL 8連接時(shí)會(huì)報(bào)時(shí)區(qū)錯(cuò)誤。log-impl配置成StdOutImpl可以在控制臺(tái)打印SQL排查問題時(shí)非常有用答辯演示時(shí)也方便展示。我見過不少同學(xué)卡在這些基礎(chǔ)配置上其實(shí)都是經(jīng)驗(yàn)問題。2.3 前端Vue項(xiàng)目的搭建方式前端我用的是Vue 2不是Vue 3。不是說Vue 3不好而是Element UI對(duì)Vue 2的支持最成熟網(wǎng)上的示例代碼90%都是Vue 2寫法照著抄不容易翻車。如果你非要用Vue 3那配合Element Plus也行但很多細(xì)節(jié)寫法有差異調(diào)試成本會(huì)高一些。創(chuàng)建項(xiàng)目用Vue CLInpm install -g vue/cli vue create smart-mart-web # 選擇 Manually select features勾選 Router cd smart-mart-web npm install element-ui axios安裝依賴的過程經(jīng)常出問題尤其是網(wǎng)絡(luò)不穩(wěn)定的時(shí)候node_modules裝一半失敗了。國內(nèi)環(huán)境建議先設(shè)置npm鏡像源再安裝npm config set registry https://registry.npmmirror.com裝完依賴后在main.js里注冊(cè)Element UI和Router然后按頁面拆組件。我的頁面結(jié)構(gòu)是登錄頁、用戶端首頁、商品列表頁、購物車頁、訂單確認(rèn)頁、管理端布局、商品管理頁、訂單管理頁、會(huì)員管理頁、統(tǒng)計(jì)頁。每個(gè)頁面一個(gè)文件夾組件按需拆分。3. 數(shù)據(jù)庫設(shè)計(jì)與核心功能模塊3.1 數(shù)據(jù)庫表設(shè)計(jì)五張表串起整個(gè)系統(tǒng)數(shù)據(jù)庫是這套項(xiàng)目的地基表設(shè)計(jì)得好后面的代碼能少寫一半。我設(shè)計(jì)了五張核心表用戶表、商品表、訂單表、訂單明細(xì)表、購物車表。下面給出建表SQL的核心片段。CREATE TABLE user ( id bigint NOT NULL AUTO_INCREMENT, phone varchar(20) NOT NULL, password varchar(100) NOT NULL, nickname varchar(50) DEFAULT NULL, balance decimal(10,2) DEFAULT 0.00, role tinyint DEFAULT 1, status tinyint DEFAULT 1, create_time datetime DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY uk_phone (phone) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;role字段區(qū)分管理員和普通用戶balance存賬戶余額這是模擬支付的賬戶來源。手機(jī)號(hào)加唯一索引這是登錄賬號(hào)。CREATE TABLE product ( id bigint NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL, category_id bigint DEFAULT NULL, price decimal(10,2) NOT NULL, stock int NOT NULL, image varchar(255) DEFAULT NULL, status tinyint DEFAULT 1, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;商品表加了category_id字段預(yù)留分類擴(kuò)展status字段控制上下架下架的商品用戶端不展示。CREATE TABLE orders ( id bigint NOT NULL AUTO_INCREMENT, order_no varchar(32) NOT NULL, user_id bigint NOT NULL, total_amount decimal(10,2) NOT NULL, status tinyint DEFAULT 0, create_time datetime DEFAULT NULL, pay_time datetime DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY uk_order_no (order_no) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;訂單表里status是整個(gè)系統(tǒng)最關(guān)鍵的狀態(tài)字段0代表待支付1代表已支付2代表已離店。字段注釋必須寫清楚答辯時(shí)老師一定會(huì)問狀態(tài)怎么流轉(zhuǎn)的。CREATE TABLE order_item ( id bigint NOT NULL AUTO_INCREMENT, order_id bigint NOT NULL, product_id bigint NOT NULL, product_name varchar(100) DEFAULT NULL, price decimal(10,2) NOT NULL, quantity int NOT NULL, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;為什么要有訂單明細(xì)表因?yàn)橐粋€(gè)訂單可能包含多個(gè)商品而訂單表只保存總額。到時(shí)候你要查某個(gè)訂單里買了哪些東西沒有明細(xì)表根本查不了。還有一點(diǎn)下單時(shí)要把商品名稱和價(jià)格冗余存一份這樣即使日后商品改名或者刪除訂單的歷史記錄仍然完整。這是電商系統(tǒng)的常規(guī)做法講出來顯得專業(yè)。3.2 用戶端功能模塊從登錄到購物車用戶端核心接口就四個(gè)注冊(cè)登錄、商品列表、購物車操作、提交訂單。登錄用手機(jī)號(hào)密碼密碼存在數(shù)據(jù)庫里用MD5加鹽處理。我知道MD5不算安全但畢設(shè)項(xiàng)目里夠用而且你可以主動(dòng)跟老師說生產(chǎn)環(huán)境應(yīng)該用BCrypt這反而成了加分項(xiàng)。購物車我采用了后端存儲(chǔ)而不是前端存儲(chǔ)的方案。有人認(rèn)為購物車存前端localStorage簡單但那樣用戶換設(shè)備數(shù)據(jù)就丟了。我用一張購物車表關(guān)聯(lián)用戶和商品后端提供添加、修改數(shù)量、刪除、查詢四個(gè)接口。數(shù)據(jù)結(jié)構(gòu)很簡單操作邏輯都在Service層。Service public class CartServiceImpl implements CartService { Override public Result addCart(CartDTO dto) { // 先查詢?cè)撚脩糍徫镘嚴(yán)锸欠褚延羞@個(gè)商品 LambdaQueryWrapperCart wrapper new LambdaQueryWrapper(); wrapper.eq(Cart::getUserId, dto.getUserId()) .eq(Cart::getProductId, dto.getProductId()); Cart exist cartMapper.selectOne(wrapper); if (exist ! null) { exist.setQuantity(exist.getQuantity() dto.getQuantity()); cartMapper.updateById(exist); } else { Cart cart new Cart(); cart.setUserId(dto.getUserId()); cart.setProductId(dto.getProductId()); cart.setQuantity(dto.getQuantity()); cartMapper.insert(cart); } return Result.success(加入成功); } }這里用MyBatis-Plus的LambdaQueryWrapper構(gòu)造條件比寫XML簡潔很多而且類型安全字段名寫錯(cuò)了編譯期就能發(fā)現(xiàn)。3.3 管理端功能模塊商品、訂單、會(huì)員、統(tǒng)計(jì)管理端的商品管理就是常規(guī)的增刪改查分頁MyBatis-Plus自帶Page對(duì)象配合selectPage方法幾行代碼搞定Override public PageProduct pageProducts(int pageNum, int pageSize, String keyword) { PageProduct page new Page(pageNum, pageSize); LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); if (StringUtils.hasText(keyword)) { wrapper.like(Product::getName, keyword); } wrapper.orderByDesc(Product::getCreateTime); return productMapper.selectPage(page, wrapper); }訂單管理就是按狀態(tài)篩選訂單列表也可以查看訂單的明細(xì)。這里有個(gè)小技巧查詢訂單列表時(shí)如果每條訂單都要單獨(dú)查一次明細(xì)會(huì)產(chǎn)生N1查詢問題。簡單項(xiàng)目可以不那么較真但如果想展示自己的水平可以在Service層先把訂單ID列表查出來再一次性批量查詢明細(xì)然后按訂單ID分組組裝。這個(gè)優(yōu)化講出來能讓老師覺得你不是在背代碼。會(huì)員管理做得簡單就是一個(gè)用戶列表可以看到每個(gè)用戶的余額和消費(fèi)統(tǒng)計(jì)。統(tǒng)計(jì)模塊我用ECharts畫了兩個(gè)圖表近七天銷售額折線圖、商品分類銷量占比餅圖。數(shù)據(jù)來源是SQL的聚合查詢。這里千萬別用循環(huán)查數(shù)據(jù)庫再在Java里計(jì)算效率低而且代碼丑直接讓MySQL分組求和查出來什么就展示什么。SELECT DATE_FORMAT(create_time, %Y-%m-%d) AS day, SUM(total_amount) AS amount FROM orders WHERE status 1 AND create_time DATE_SUB(CURDATE(), INTERVAL 7 DAY) GROUP BY day ORDER BY day;4. 關(guān)鍵代碼實(shí)現(xiàn)與實(shí)操細(xì)節(jié)4.1 模擬門禁與結(jié)算的核心邏輯無人超市系統(tǒng)最需要講故事的地方就是結(jié)算后如何放行。真實(shí)場(chǎng)景是硬件聯(lián)動(dòng)這里用軟件模擬。我在后端設(shè)計(jì)了這樣一套邏輯用戶在購物車頁面點(diǎn)擊結(jié)算前端把購物車ID列表和用戶ID傳給后端。后端先校驗(yàn)所有商品庫存是否充足如果不夠就返回明確提示。庫存充足的情況下在一個(gè)方法里完成三件事計(jì)算總金額、生成訂單和訂單明細(xì)、扣減庫存和用戶余額。這三件事必須放在同一個(gè)事務(wù)里要么全部成功要么全部回滾。這一步一定要講清楚事務(wù)是保證數(shù)據(jù)一致性的關(guān)鍵。Transactional(rollbackFor Exception.class) public Result checkout(CheckoutDTO dto) { ListCart carts cartMapper.selectBatchIds(dto.getCartIds()); BigDecimal total BigDecimal.ZERO; for (Cart cart : carts) { Product product productMapper.selectById(cart.getProductId()); if (product.getStock() cart.getQuantity()) { return Result.error(商品【 product.getName() 】庫存不足); } total total.add(product.getPrice().multiply(BigDecimal.valueOf(cart.getQuantity()))); } // 生成訂單號(hào) String orderNo SM DateUtil.format(new Date(), yyyyMMddHHmmss) RandomUtil.randomNumbers(4); Orders order new Orders(); order.setOrderNo(orderNo); order.setUserId(dto.getUserId()); order.setTotalAmount(total); order.setStatus(1); order.setPayTime(new Date()); ordersMapper.insert(order); // 插入訂單明細(xì)、扣減庫存、扣減余額、清空購物車 return Result.success(orderNo); }事務(wù)注解Transactional放在這里的作用是如果插入訂單成功后扣庫存失敗整個(gè)方法回滾不會(huì)出現(xiàn)訂單生成了但庫存沒扣的臟數(shù)據(jù)。你可以把這句話原封不動(dòng)寫進(jìn)論文里。4.2 JWT登錄鑒權(quán)的實(shí)現(xiàn)細(xì)節(jié)前后端分離項(xiàng)目里登錄狀態(tài)通常用JWT而不是Session。JWT就是一個(gè)包含用戶信息的加密字符串服務(wù)器不保存狀態(tài)客戶端每次請(qǐng)求帶上服務(wù)器驗(yàn)證簽名后解析出用戶ID。實(shí)現(xiàn)分三步第一步登錄成功后簽發(fā)TokenString token Jwts.builder() .setSubject(user.getId().toString()) .claim(phone, user.getPhone()) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 86400000)) .signWith(secretKey, SignatureAlgorithm.HS256) .compact();第二步寫一個(gè)攔截器攔截需要登錄的接口public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(Authorization); if (token null || !token.startsWith(Bearer )) { // 返回401狀態(tài)碼 response.setStatus(401); return false; } try { Claims claims Jwts.parserBuilder() .setSigningKey(secretKey) .build() .parseClaimsJws(token.substring(7)) .getBody(); request.setAttribute(userId, claims.getSubject()); return true; } catch (JwtException e) { response.setStatus(401); return false; } }第三步在WebMvcConfigurer里注冊(cè)攔截器配置哪些路徑需要攔截。登錄接口和商品列表接口不需要攔截購物車、訂單、管理端接口全部攔截。前端拿到401響應(yīng)就跳回登錄頁。這里要注意一個(gè)坑攔截器注冊(cè)路徑如果寫錯(cuò)你會(huì)發(fā)現(xiàn)某些接口沒攔截、某些接口明明應(yīng)該攔截卻放行了。我習(xí)慣把接口路徑統(tǒng)一用/api/**開頭然后根據(jù)需要排除/api/user/login、/api/product/list這些公開接口。4.3 Vue端的路由守衛(wèi)與Axios封裝前端要做的事情是在Axios請(qǐng)求攔截器里自動(dòng)帶上Token在響應(yīng)攔截器里統(tǒng)一處理401跳轉(zhuǎn)。這個(gè)屬于固定套路直接貼代碼說明。// request.js axios.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }); axios.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } return Promise.reject(error); } );路由守衛(wèi)控制頁面訪問權(quán)限。比如管理端頁面只有role0的用戶能訪問普通用戶跳進(jìn)去要彈提示router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.path /login) { next(); return; } if (!token) { next(/login); return; } const role localStorage.getItem(role); if (to.meta.requiresAdmin role ! 0) { next(/); return; } next(); });我見過有些同學(xué)的畢設(shè)前端頁面能直接通過URL訪問后臺(tái)接口這就是沒做路由守衛(wèi)答辯時(shí)被問如何防止未授權(quán)訪問就答不上來。這一段屬于安全要點(diǎn)值得單獨(dú)準(zhǔn)備一下。4.4 模擬支付與訂單狀態(tài)流轉(zhuǎn)支付模塊不用接真實(shí)支付接口做一個(gè)模擬余額支付就行。用戶可以事先在個(gè)人中心給賬戶充值也是模擬的管理員直接改余額。結(jié)算時(shí)后端判斷余額是否足夠不夠就返回余額不足請(qǐng)充值夠就扣減余額并生成支付記錄。訂單狀態(tài)從0流轉(zhuǎn)到1再在用戶點(diǎn)擊確認(rèn)離店時(shí)流轉(zhuǎn)到2。如果你想讓系統(tǒng)看起來更完整還可以加一層虛擬的門外設(shè)備檢測(cè)用戶訂單狀態(tài)為2之后前端門禁頁顯示門鎖已開啟請(qǐng)通過。這個(gè)效果用Vue的過渡動(dòng)畫就能實(shí)現(xiàn)成本低演示效果好。5. 本地部署與運(yùn)行環(huán)境搭建5.1 開發(fā)環(huán)境準(zhǔn)備清單我把整套環(huán)境版本列成一個(gè)清單照著裝就不會(huì)出兼容性問題組件版本說明JDK1.8別用17兼容問題太多MySQL5.7 或 8.08.0需要配置時(shí)區(qū)Node.js16.xVue2項(xiàng)目對(duì)Node版本要求寬松Maven3.8.xIDEA自帶也可IDEA2023.x社區(qū)版夠用MySQL安裝時(shí)有個(gè)細(xì)節(jié)安裝到Windows上的時(shí)候如果之前裝過其他版本端口3306可能被占用用netstat -ano查一下端口占用或者直接改端口3307并在連接串里同步修改。我遇到過一個(gè)同學(xué)裝完MySQLNavicat連接不上折騰半天發(fā)現(xiàn)服務(wù)根本沒啟動(dòng)Windows服務(wù)列表里把MySQL服務(wù)啟動(dòng)就好了。5.2 數(shù)據(jù)庫初始化的兩種方式第一種是用Navicat手工導(dǎo)入SQL文件適合看不懂命令行的人。新建數(shù)據(jù)庫smart_mart字符集選utf8mb4右鍵運(yùn)行SQL文件把建表語句和初始數(shù)據(jù)一起導(dǎo)入。第二種是用命令行mysql -u root -p smart_mart.sql初始數(shù)據(jù)里我預(yù)置了幾個(gè)測(cè)試賬號(hào)一個(gè)管理員賬號(hào)admin/123456一個(gè)普通用戶13800000000/123456還有十來個(gè)商品數(shù)據(jù)。有初始數(shù)據(jù)的好處是系統(tǒng)一跑起來就能看到效果不用一個(gè)個(gè)手動(dòng)錄入。答辯前務(wù)必檢查演示賬號(hào)還能不能用我見過有人把數(shù)據(jù)庫密碼改了現(xiàn)場(chǎng)登錄不進(jìn)去非常尷尬。5.3 SpringBoot與Vue的啟動(dòng)順序后端啟動(dòng)很簡單IDEA里直接運(yùn)行SmartMartApplication的main方法。啟動(dòng)后訪問http://localhost:8080如果看到SpringBoot默認(rèn)的錯(cuò)誤頁說明端口正常。前端啟動(dòng)分兩步npm install npm run serveDevServer默認(rèn)跑在8080端口而后端也在8080必然沖突。解決辦法是在vue.config.js里配置前端端口和代理module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }配置代理之后前端請(qǐng)求/api/product/list會(huì)轉(zhuǎn)發(fā)到后端的http://localhost:8080/api/product/list跨域問題由DevServer解決瀏覽器里看不到跨域報(bào)錯(cuò)。啟動(dòng)順序沒有嚴(yán)格要求但先啟動(dòng)后端再啟動(dòng)前端能保證前端代理的調(diào)試信息里不至于報(bào)連接被拒絕。5.4 生產(chǎn)環(huán)境打包前后端怎么合到一起畢設(shè)如果需要部署演示最省事的方式是把前端的build產(chǎn)物放到SpringBoot的static目錄下最后只發(fā)布一個(gè)Jar包。操作流程是npm run build生成dist目錄把dist下的所有文件復(fù)制到后端項(xiàng)目的src/main/resources/static目錄下再用Maven打包mvn clean package -DskipTests生成的target/smart-mart.jar用java -jar smart-mart.jar運(yùn)行瀏覽器直接訪問http://localhost:8080SpringBoot會(huì)把前端頁面和接口請(qǐng)求放在同一個(gè)端口處理。注意此時(shí)前端的接口請(qǐng)求路徑必須是相對(duì)路徑也就是/api/xxx不能寫死成localhost:3000否則頁面加載了但接口全部403。6. 常見問題與避坑記錄6.1 SpringBoot版本太高引發(fā)的連環(huán)報(bào)錯(cuò)這是這一屆學(xué)生里最常見的坑。SpringBoot 3.x強(qiáng)制要求JDK 17而很多人本機(jī)裝的是JDK 8啟動(dòng)直接報(bào)UnsupportedClassVersionError。就算你臨時(shí)改了JDK版本MyBatis-Plus老版本里的Jsoup等依賴也會(huì)出現(xiàn)ClassNotFoundException因?yàn)镾pringBoot 3用了Jakarta命名空間不再兼容javax.*。我的建議是統(tǒng)一用SpringBoot 2.7.18 JDK 8。如果你的團(tuán)隊(duì)或者老師要求必須用新版本也不要硬扛直接換MyBatis-Plus 3.5.5以上版本并在pom.xml里排查所有用到j(luò)avax.servlet的依賴。這類問題排查耗時(shí)很長而且越查越亂不如一開始就選穩(wěn)定版本。6.2 MySQL連接失敗時(shí)區(qū)、驅(qū)動(dòng)、密碼三個(gè)坎連接MySQL 8時(shí)第一個(gè)坎是時(shí)區(qū)不配置serverTimezoneAsia/Shanghai會(huì)報(bào)The server time zone value ?D1ú±ê×?ê±?? is unrecognized解決辦法就是在連接串里加上時(shí)區(qū)參數(shù)。第二個(gè)坎是驅(qū)動(dòng)類名MySQL 8要寫com.mysql.cj.jdbc.Driver寫舊的com.mysql.jdbc.Driver雖然也能跑但會(huì)報(bào)警告。第三個(gè)坎是密碼驗(yàn)證方式MySQL 8默認(rèn)用的caching_sha2_password和舊版JDBC驅(qū)動(dòng)不兼容要么升級(jí)驅(qū)動(dòng)版本要么在MySQL里執(zhí)行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 密碼。新手最容易在這里喪失信心其實(shí)這些報(bào)錯(cuò)信息都很直白把英文翻譯一下就知道缺什么了。排查原則先看MySQL服務(wù)有沒有啟動(dòng)再用命令行工具連接測(cè)試最后才去檢查Java代碼和配置。6.3 Vue項(xiàng)目啟動(dòng)報(bào)錯(cuò)與依賴安裝問題vue create過程可能卡在chromedriver這個(gè)依賴上這個(gè)是網(wǎng)絡(luò)問題居多。裝依賴時(shí)看到卡住不要直接CtrlC先等一會(huì)兒實(shí)在不行就換成npmmirror鏡像源再試。有些同學(xué)從前端拿到別人項(xiàng)目壓縮包后直接扔進(jìn)IDEA這東西不是Java項(xiàng)目要先用命令行進(jìn)入目錄執(zhí)行npm installIDEA只能幫你打開文件裝依賴還得靠npm。還有一類問題是Vue CLI版本太高要求Node.js版本過低的環(huán)境會(huì)報(bào)Digital Envelope routines::unsupported錯(cuò)誤。常見的臨時(shí)解決辦法是執(zhí)行export NODE_OPTIONS--openssl-legacy-provider但這是權(quán)宜之計(jì)最好還是把Node.js升級(jí)到16或18的穩(wěn)定版本。總之前端環(huán)境問題大多出在版本不匹配上和寫代碼的關(guān)系不大但確實(shí)很消磨耐心。6.4 前后端聯(lián)調(diào)時(shí)常見的跨域與接口對(duì)接問題跨域問題是必考題。如果前端直接請(qǐng)求后端地址而沒有走代理瀏覽器會(huì)報(bào)CORS錯(cuò)誤。解決方式有兩個(gè)一個(gè)是在SpringBoot里配置全局CORS另一個(gè)是像前面那樣在vue.config.js里配代理。我推薦后者因?yàn)樯a(chǎn)環(huán)境打包后是同源部署配置代理能順帶模擬出這個(gè)效果。接口對(duì)接時(shí)的另一個(gè)坑是字段名對(duì)不上。前端約定用productName后端實(shí)體類寫的是name結(jié)果列表里商品名稱一列全是空的。這種問題排查起來很煩建議開發(fā)時(shí)打開瀏覽器F12看網(wǎng)絡(luò)請(qǐng)求的響應(yīng)體先確定后端返回了哪些字段再去前端模板里核對(duì)。關(guān)鍵接口直接用Polyline圖的思路調(diào)通一個(gè)再看下一個(gè)不要攢了一堆問題再一起調(diào)試。6.5 答辯演示時(shí)的三個(gè)穩(wěn)定性建議現(xiàn)場(chǎng)演示翻車是畢設(shè)答辯的重災(zāi)區(qū)我總結(jié)三個(gè)經(jīng)驗(yàn)。第一演示前一天必須跑一遍完整流程不要僥幸小改動(dòng)不影響。第二手機(jī)熱點(diǎn)和現(xiàn)場(chǎng)WiFi都不要壓上把學(xué)生證、身份證等無關(guān)頁面關(guān)掉省得切換頁面時(shí)卡頓。第三數(shù)據(jù)庫里要準(zhǔn)備好演示數(shù)據(jù)商品別太少訂單要有不同狀態(tài)的這樣展示列表篩選功能時(shí)才有內(nèi)容。還有一個(gè)容易被忽略的點(diǎn)答辯時(shí)老師喜歡反問你覺得這個(gè)系統(tǒng)哪里還可以改進(jìn)。提前準(zhǔn)備幾個(gè)合理的優(yōu)化方向比如引入Redis做購物車緩存、用RabbitMQ處理訂單異步通知、接入真實(shí)人臉識(shí)別SDK都會(huì)讓回答更從容。7. 后端的擴(kuò)展與學(xué)習(xí)建議7.1 這個(gè)項(xiàng)目還能怎么擴(kuò)展成創(chuàng)新點(diǎn)畢設(shè)如果只是把基本功能做完很多學(xué)校只給中等分。想讓系統(tǒng)更有競(jìng)爭力可以從三個(gè)方向擴(kuò)展。第一個(gè)方向是把靜態(tài)的商品列表升級(jí)成分頁條件搜索比如按價(jià)格區(qū)間、分類、熱度排序這涉及MyBatis-Plus的多條件組合查詢論文里也好寫。第二個(gè)方向是加一個(gè)簡單的推薦模塊根據(jù)用戶購買記錄推薦同類商品不需要上機(jī)器學(xué)習(xí)算法用一個(gè)簡單規(guī)則統(tǒng)計(jì)就行。第三個(gè)方向是接入WebSocket做實(shí)時(shí)庫存展示前端頁面每兩秒刷新一次庫存管理員能看到哪些商品快賣完了。我個(gè)人覺得最劃算的擴(kuò)展是導(dǎo)入導(dǎo)出用EasyExcel實(shí)現(xiàn)商品數(shù)據(jù)的Excel批量導(dǎo)入和訂單導(dǎo)出。這個(gè)功能企業(yè)里用得極多而且演示效果直觀先把Excel模板下載出來填幾條數(shù)據(jù)再導(dǎo)入前后端都有交互答辯時(shí)可以讓老師親眼看到數(shù)據(jù)從Excel流進(jìn)了數(shù)據(jù)庫比純口頭描述有說服力得多。7.2 學(xué)完這套項(xiàng)目你真正會(huì)收獲什么把這個(gè)項(xiàng)目完整擼一遍你收獲的不只是一堆代碼。你會(huì)真正理解一個(gè)管理系統(tǒng)的請(qǐng)求怎么從前端頁面發(fā)起經(jīng)過攔截器校驗(yàn)、Controller參數(shù)接收、Service業(yè)務(wù)處理、Mapper數(shù)據(jù)查詢最后再返回到頁面上完整走通。這個(gè)鏈路是書本里很難講透的只有親手連起來才有感覺。很多人學(xué)新項(xiàng)目喜歡通篇復(fù)制跑通了就覺得自己會(huì)了。我的建議是跑通之后從一個(gè)小功能開始獨(dú)立重寫比如單獨(dú)把提交訂單邏輯自己寫一遍不參考原代碼。能寫出來說明你真正掌握了寫不出來就對(duì)著原代碼一行行比對(duì)找出你卡住的地方那正是你需要補(bǔ)的知識(shí)點(diǎn)。7.3 最后補(bǔ)充一個(gè)調(diào)試的小技巧在項(xiàng)目開發(fā)過程中我強(qiáng)烈建議后端保持log-impl: org.apache.ibatis.logging.stdout.StdOutImpl這條配置能讓控制臺(tái)打印出每條SQL執(zhí)行語句和參數(shù)值。當(dāng)你的列表數(shù)據(jù)不對(duì)時(shí)先看SQL有沒有按預(yù)期拼接條件當(dāng)更新操作沒生效時(shí)先看SQL影響行數(shù)是0還是1。大部分?jǐn)?shù)據(jù)問題都能靠這一步定位比在Java代碼里打斷點(diǎn)還高效。調(diào)試工具上前端打開F12的Network面板看接口響應(yīng)后端看IDEA控制臺(tái)的日志兩邊對(duì)照著調(diào)效率會(huì)高很多。不要碰到問題就甩給系統(tǒng)報(bào)錯(cuò)四個(gè)字先把報(bào)錯(cuò)信息完整讀三遍你會(huì)發(fā)現(xiàn)大部分問題其實(shí)描述得已經(jīng)很清楚了。