)
1. 代碼獲取https://blog.xiaobias.com/article/72. 項(xiàng)目簡(jiǎn)介本項(xiàng)目為一款在線拍賣系統(tǒng)提供線上商品拍賣功能。系統(tǒng)包含前端用戶門戶基于 layui和后端管理界面基于 Vue Element UI支持用戶注冊(cè)/登錄、瀏覽拍賣商品、參與競(jìng)拍、生成歷史競(jìng)拍記錄、管理員審核競(jìng)拍、生成訂單及支付等完整流程。數(shù)據(jù)庫(kù)采用 MySQL后端使用 Spring Boot MyBatis-Plus 框架權(quán)限控制基于 Shiro 和自定義 Token 機(jī)制。3. 技術(shù)棧層級(jí)技術(shù)/框架說(shuō)明后端框架Spring Boot 2.2.2.RELEASE提供 IOC、Web 支持ORM 框架MyBatis-Plus 2.3 MyBatis簡(jiǎn)化數(shù)據(jù)庫(kù)操作支持分頁(yè)數(shù)據(jù)庫(kù)MySQL 5.7.32數(shù)據(jù)庫(kù)springbootp0eo6權(quán)限控制Apache Shiro 1.3.2 自定義 Token登錄認(rèn)證、接口鑒權(quán)前端管理Vue 2 Element UI后臺(tái)管理界面前端門戶layui HTML/CSS/JS用戶端頁(yè)面含輪播圖、商品列表、競(jìng)拍操作等工具庫(kù)Hutool, Fastjson, Commons-lang3字符串處理、JSON、MD5 等構(gòu)建工具M(jìn)aven依賴管理4. 詳細(xì)介紹4.1 系統(tǒng)角色管理員可管理用戶、商品類型、拍賣商品、歷史競(jìng)拍審核、競(jìng)拍訂單、留言板、輪播圖、競(jìng)拍公告等。普通用戶可瀏覽拍賣商品、參與競(jìng)拍、查看自己的歷史競(jìng)拍和訂單、留言反饋、支付訂單等。4.2 核心模塊4.2.1 拍賣商品管理表paimaishangpin存儲(chǔ)商品名稱、類型、圖片、起拍價(jià)格、商品詳情、活動(dòng)時(shí)間、活動(dòng)狀態(tài)競(jìng)拍中/已結(jié)束。管理員可增刪改查拍賣商品前端用戶可查看商品詳情并點(diǎn)擊“競(jìng)拍”參與。4.2.2 商品類型管理表shangpinleixing維護(hù)商品分類手機(jī)、數(shù)碼、電器、書籍等用于商品篩選。4.2.3 歷史競(jìng)拍用戶點(diǎn)擊“競(jìng)拍”后系統(tǒng)自動(dòng)向表lishijingpai插入一條記錄包含商品名稱、類型、出價(jià)價(jià)格、用戶信息、日期等。該記錄默認(rèn)sfsh是否審核為“否”需要管理員審核。管理員審核通過(guò)后該競(jìng)拍記錄生效并自動(dòng)生成對(duì)應(yīng)的競(jìng)拍訂單。4.2.4 競(jìng)拍訂單表jingpaidingdan存儲(chǔ)成交訂單信息包括訂單編號(hào)、商品名稱、成交價(jià)格、用戶信息、支付狀態(tài)ispay。用戶可在個(gè)人中心查看自己的訂單并完成支付前端模擬支付按鈕。4.2.5 用戶管理表yonghu存儲(chǔ)用戶賬號(hào)yonghuming、密碼、姓名、性別、頭像、身份證、手機(jī)、郵箱、地址。支持用戶注冊(cè)、登錄、修改個(gè)人信息。4.2.6 留言板表messages存儲(chǔ)用戶留言及管理員回復(fù)。用戶可發(fā)表留言管理員可回復(fù)。4.2.7 系統(tǒng)管理輪播圖管理表config存儲(chǔ)首頁(yè)輪播圖圖片地址picture1~picture3等。競(jìng)拍公告表news存儲(chǔ)公告標(biāo)題、簡(jiǎn)介、圖片、內(nèi)容用戶端可查看公告列表及詳情。4.2.8 前后端分離與權(quán)限后端所有 API 均需攜帶Token頭進(jìn)行身份驗(yàn)證除IgnoreAuth標(biāo)注的接口如登錄、注冊(cè)、部分列表查詢。前端管理后臺(tái)Vue通過(guò)http.js攔截器自動(dòng)添加 Token。用戶端頁(yè)面通過(guò)localStorage存儲(chǔ) Token 和用戶角色判斷權(quán)限按鈕顯示。4.3 業(yè)務(wù)流程示例用戶注冊(cè)/登錄 → 進(jìn)入商品列表頁(yè)。選擇“競(jìng)拍中”的商品 → 點(diǎn)擊“競(jìng)拍”按鈕填寫出價(jià)系統(tǒng)邏輯未完全展示但前端會(huì)攜帶用戶信息提交至lishijingpai表。管理員后臺(tái)查看歷史競(jìng)拍記錄 → 審核通過(guò) → 系統(tǒng)自動(dòng)生成競(jìng)拍訂單jingpaidingdan表。用戶查看訂單 → 點(diǎn)擊“支付”模擬 → 訂單狀態(tài)變?yōu)椤耙阎Ц丁?。管理員可管理輪播圖、公告等維護(hù)系統(tǒng)首頁(yè)內(nèi)容。5. 部分代碼5.1 數(shù)據(jù)庫(kù)表結(jié)構(gòu)示例paimaishangpinCREATETABLEpaimaishangpin(idbigint(20)NOTNULLAUTO_INCREMENTCOMMENT主鍵,addtimetimestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT創(chuàng)建時(shí)間,shangpinmingchengvarchar(200)NOTNULLCOMMENT商品名稱,shangpinleixingvarchar(200)NOTNULLCOMMENT商品類型,tupianvarchar(200)DEFAULTNULLCOMMENT圖片,jiageint(11)NOTNULLCOMMENT價(jià)格,shangpinxiangqinglongtextCOMMENT商品詳情,huodongshijianvarchar(200)DEFAULTNULLCOMMENT活動(dòng)時(shí)間,huodongzhuangtaivarchar(200)DEFAULTNULLCOMMENT活動(dòng)狀態(tài),PRIMARYKEY(id))ENGINEInnoDBDEFAULTCHARSETutf8COMMENT拍賣商品;5.2 后端 Controller 示例競(jìng)拍訂單RestControllerRequestMapping(/jingpaidingdan)publicclassJingpaidingdanController{AutowiredprivateJingpaidingdanServicejingpaidingdanService;RequestMapping(/page)publicRpage(RequestParamMapString,Objectparams,JingpaidingdanEntityjingpaidingdan,HttpServletRequestrequest){StringtableNamerequest.getSession().getAttribute(tableName).toString();if(tableName.equals(yonghu)){jingpaidingdan.setYonghuming((String)request.getSession().getAttribute(username));}EntityWrapperJingpaidingdanEntityewnewEntityWrapper();PageUtilspagejingpaidingdanService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,jingpaidingdan),params),params));returnR.ok().put(data,page);}// ... 其他增刪改查方法}5.3 前端用戶登錄login.html片段http.request(data.role/login,get,data,function(res){layer.msg(登錄成功,{time:2000,icon:6});localStorage.setItem(Token,res.token);localStorage.setItem(role,jquery(#role:checked).attr(title));localStorage.setItem(userTable,data.role);localStorage.setItem(adminName,data.username);// 跳轉(zhuǎn)首頁(yè)window.location.href../../index.html;});5.4 MyBatis-Plus 配置mybatis-plus:mapper-locations:classpath*:mapper/*.xmltypeAliasesPackage:com.entityglobal-config:id-type:1field-strategy:2db-column-underline:truelogic-delete-value:-1logic-not-delete-value:0configuration:map-underscore-to-camel-case:truecache-enabled:falseUse the tool for decodingIGh0dHBzOi8vYmxvZy54aWFvYmlhcy5jb20vYXJ0aWNsZS836. 部分截圖7. 項(xiàng)目總結(jié)本項(xiàng)目是一個(gè)功能較為完整的在線拍賣系統(tǒng)涵蓋用戶端和管理端。后端采用 Spring Boot MyBatis-Plus 實(shí)現(xiàn) RESTful API數(shù)據(jù)庫(kù)設(shè)計(jì)合理包含商品、競(jìng)拍、訂單、用戶等核心表。權(quán)限控制通過(guò) Token Session 結(jié)合 Shiro 實(shí)現(xiàn)前端分為 layui 用戶門戶和 Vue Element 管理后臺(tái)滿足不同角色的操作需求。主要亮點(diǎn)競(jìng)拍流程完整用戶出價(jià) → 管理員審核 → 生成訂單 → 支付。支持輪播圖動(dòng)態(tài)配置和公告發(fā)布。前后端分離接口統(tǒng)一返回R對(duì)象。整體而言該項(xiàng)目可作為學(xué)習(xí) Spring Boot MyBatis-Plus Vue 整合開(kāi)發(fā)的參考案例也可在此基礎(chǔ)上擴(kuò)展更復(fù)雜的拍賣規(guī)則和支付功能。 基于SpringBoot2+vue2的在線拍賣系統(tǒng)
1. 代碼獲取https://blog.xiaobias.com/article/72. 項(xiàng)目簡(jiǎn)介本項(xiàng)目為一款在線拍賣系統(tǒng)提供線上商品拍賣功能。系統(tǒng)包含前端用戶門戶基于 layui和后端管理界面基于 Vue Element UI支持用戶注冊(cè)/登錄、瀏覽拍賣商品、參與競(jìng)拍、生成歷史競(jìng)拍記錄、管理員審核競(jìng)拍、生成訂單及支付等完整流程。數(shù)據(jù)庫(kù)采用 MySQL后端使用 Spring Boot MyBatis-Plus 框架權(quán)限控制基于 Shiro 和自定義 Token 機(jī)制。3. 技術(shù)棧層級(jí)技術(shù)/框架說(shuō)明后端框架Spring Boot 2.2.2.RELEASE提供 IOC、Web 支持ORM 框架MyBatis-Plus 2.3 MyBatis簡(jiǎn)化數(shù)據(jù)庫(kù)操作支持分頁(yè)數(shù)據(jù)庫(kù)MySQL 5.7.32數(shù)據(jù)庫(kù)springbootp0eo6權(quán)限控制Apache Shiro 1.3.2 自定義 Token登錄認(rèn)證、接口鑒權(quán)前端管理Vue 2 Element UI后臺(tái)管理界面前端門戶layui HTML/CSS/JS用戶端頁(yè)面含輪播圖、商品列表、競(jìng)拍操作等工具庫(kù)Hutool, Fastjson, Commons-lang3字符串處理、JSON、MD5 等構(gòu)建工具M(jìn)aven依賴管理4. 詳細(xì)介紹4.1 系統(tǒng)角色管理員可管理用戶、商品類型、拍賣商品、歷史競(jìng)拍審核、競(jìng)拍訂單、留言板、輪播圖、競(jìng)拍公告等。普通用戶可瀏覽拍賣商品、參與競(jìng)拍、查看自己的歷史競(jìng)拍和訂單、留言反饋、支付訂單等。4.2 核心模塊4.2.1 拍賣商品管理表paimaishangpin存儲(chǔ)商品名稱、類型、圖片、起拍價(jià)格、商品詳情、活動(dòng)時(shí)間、活動(dòng)狀態(tài)競(jìng)拍中/已結(jié)束。管理員可增刪改查拍賣商品前端用戶可查看商品詳情并點(diǎn)擊“競(jìng)拍”參與。4.2.2 商品類型管理表shangpinleixing維護(hù)商品分類手機(jī)、數(shù)碼、電器、書籍等用于商品篩選。4.2.3 歷史競(jìng)拍用戶點(diǎn)擊“競(jìng)拍”后系統(tǒng)自動(dòng)向表lishijingpai插入一條記錄包含商品名稱、類型、出價(jià)價(jià)格、用戶信息、日期等。該記錄默認(rèn)sfsh是否審核為“否”需要管理員審核。管理員審核通過(guò)后該競(jìng)拍記錄生效并自動(dòng)生成對(duì)應(yīng)的競(jìng)拍訂單。4.2.4 競(jìng)拍訂單表jingpaidingdan存儲(chǔ)成交訂單信息包括訂單編號(hào)、商品名稱、成交價(jià)格、用戶信息、支付狀態(tài)ispay。用戶可在個(gè)人中心查看自己的訂單并完成支付前端模擬支付按鈕。4.2.5 用戶管理表yonghu存儲(chǔ)用戶賬號(hào)yonghuming、密碼、姓名、性別、頭像、身份證、手機(jī)、郵箱、地址。支持用戶注冊(cè)、登錄、修改個(gè)人信息。4.2.6 留言板表messages存儲(chǔ)用戶留言及管理員回復(fù)。用戶可發(fā)表留言管理員可回復(fù)。4.2.7 系統(tǒng)管理輪播圖管理表config存儲(chǔ)首頁(yè)輪播圖圖片地址picture1~picture3等。競(jìng)拍公告表news存儲(chǔ)公告標(biāo)題、簡(jiǎn)介、圖片、內(nèi)容用戶端可查看公告列表及詳情。4.2.8 前后端分離與權(quán)限后端所有 API 均需攜帶Token頭進(jìn)行身份驗(yàn)證除IgnoreAuth標(biāo)注的接口如登錄、注冊(cè)、部分列表查詢。前端管理后臺(tái)Vue通過(guò)http.js攔截器自動(dòng)添加 Token。用戶端頁(yè)面通過(guò)localStorage存儲(chǔ) Token 和用戶角色判斷權(quán)限按鈕顯示。4.3 業(yè)務(wù)流程示例用戶注冊(cè)/登錄 → 進(jìn)入商品列表頁(yè)。選擇“競(jìng)拍中”的商品 → 點(diǎn)擊“競(jìng)拍”按鈕填寫出價(jià)系統(tǒng)邏輯未完全展示但前端會(huì)攜帶用戶信息提交至lishijingpai表。管理員后臺(tái)查看歷史競(jìng)拍記錄 → 審核通過(guò) → 系統(tǒng)自動(dòng)生成競(jìng)拍訂單jingpaidingdan表。用戶查看訂單 → 點(diǎn)擊“支付”模擬 → 訂單狀態(tài)變?yōu)椤耙阎Ц丁?。管理員可管理輪播圖、公告等維護(hù)系統(tǒng)首頁(yè)內(nèi)容。5. 部分代碼5.1 數(shù)據(jù)庫(kù)表結(jié)構(gòu)示例paimaishangpinCREATETABLEpaimaishangpin(idbigint(20)NOTNULLAUTO_INCREMENTCOMMENT主鍵,addtimetimestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT創(chuàng)建時(shí)間,shangpinmingchengvarchar(200)NOTNULLCOMMENT商品名稱,shangpinleixingvarchar(200)NOTNULLCOMMENT商品類型,tupianvarchar(200)DEFAULTNULLCOMMENT圖片,jiageint(11)NOTNULLCOMMENT價(jià)格,shangpinxiangqinglongtextCOMMENT商品詳情,huodongshijianvarchar(200)DEFAULTNULLCOMMENT活動(dòng)時(shí)間,huodongzhuangtaivarchar(200)DEFAULTNULLCOMMENT活動(dòng)狀態(tài),PRIMARYKEY(id))ENGINEInnoDBDEFAULTCHARSETutf8COMMENT拍賣商品;5.2 后端 Controller 示例競(jìng)拍訂單RestControllerRequestMapping(/jingpaidingdan)publicclassJingpaidingdanController{AutowiredprivateJingpaidingdanServicejingpaidingdanService;RequestMapping(/page)publicRpage(RequestParamMapString,Objectparams,JingpaidingdanEntityjingpaidingdan,HttpServletRequestrequest){StringtableNamerequest.getSession().getAttribute(tableName).toString();if(tableName.equals(yonghu)){jingpaidingdan.setYonghuming((String)request.getSession().getAttribute(username));}EntityWrapperJingpaidingdanEntityewnewEntityWrapper();PageUtilspagejingpaidingdanService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,jingpaidingdan),params),params));returnR.ok().put(data,page);}// ... 其他增刪改查方法}5.3 前端用戶登錄login.html片段http.request(data.role/login,get,data,function(res){layer.msg(登錄成功,{time:2000,icon:6});localStorage.setItem(Token,res.token);localStorage.setItem(role,jquery(#role:checked).attr(title));localStorage.setItem(userTable,data.role);localStorage.setItem(adminName,data.username);// 跳轉(zhuǎn)首頁(yè)window.location.href../../index.html;});5.4 MyBatis-Plus 配置mybatis-plus:mapper-locations:classpath*:mapper/*.xmltypeAliasesPackage:com.entityglobal-config:id-type:1field-strategy:2db-column-underline:truelogic-delete-value:-1logic-not-delete-value:0configuration:map-underscore-to-camel-case:truecache-enabled:falseUse the tool for decodingIGh0dHBzOi8vYmxvZy54aWFvYmlhcy5jb20vYXJ0aWNsZS836. 部分截圖7. 項(xiàng)目總結(jié)本項(xiàng)目是一個(gè)功能較為完整的在線拍賣系統(tǒng)涵蓋用戶端和管理端。后端采用 Spring Boot MyBatis-Plus 實(shí)現(xiàn) RESTful API數(shù)據(jù)庫(kù)設(shè)計(jì)合理包含商品、競(jìng)拍、訂單、用戶等核心表。權(quán)限控制通過(guò) Token Session 結(jié)合 Shiro 實(shí)現(xiàn)前端分為 layui 用戶門戶和 Vue Element 管理后臺(tái)滿足不同角色的操作需求。主要亮點(diǎn)競(jìng)拍流程完整用戶出價(jià) → 管理員審核 → 生成訂單 → 支付。支持輪播圖動(dòng)態(tài)配置和公告發(fā)布。前后端分離接口統(tǒng)一返回R對(duì)象。整體而言該項(xiàng)目可作為學(xué)習(xí) Spring Boot MyBatis-Plus Vue 整合開(kāi)發(fā)的參考案例也可在此基礎(chǔ)上擴(kuò)展更復(fù)雜的拍賣規(guī)則和支付功能。