)
1. 代碼獲取https://blog.xiaobias.com/article/72. 項目簡介本項目為一款在線拍賣系統(tǒng)提供線上商品拍賣功能。系統(tǒng)包含前端用戶門戶基于 layui和后端管理界面基于 Vue Element UI支持用戶注冊/登錄、瀏覽拍賣商品、參與競拍、生成歷史競拍記錄、管理員審核競拍、生成訂單及支付等完整流程。數(shù)據(jù)庫采用 MySQL后端使用 Spring Boot MyBatis-Plus 框架權(quán)限控制基于 Shiro 和自定義 Token 機制。3. 技術(shù)棧層級技術(shù)/框架說明后端框架Spring Boot 2.2.2.RELEASE提供 IOC、Web 支持ORM 框架MyBatis-Plus 2.3 MyBatis簡化數(shù)據(jù)庫操作支持分頁數(shù)據(jù)庫MySQL 5.7.32數(shù)據(jù)庫springbootp0eo6權(quán)限控制Apache Shiro 1.3.2 自定義 Token登錄認證、接口鑒權(quán)前端管理Vue 2 Element UI后臺管理界面前端門戶layui HTML/CSS/JS用戶端頁面含輪播圖、商品列表、競拍操作等工具庫Hutool, Fastjson, Commons-lang3字符串處理、JSON、MD5 等構(gòu)建工具Maven依賴管理4. 詳細介紹4.1 系統(tǒng)角色管理員可管理用戶、商品類型、拍賣商品、歷史競拍審核、競拍訂單、留言板、輪播圖、競拍公告等。普通用戶可瀏覽拍賣商品、參與競拍、查看自己的歷史競拍和訂單、留言反饋、支付訂單等。4.2 核心模塊4.2.1 拍賣商品管理表paimaishangpin存儲商品名稱、類型、圖片、起拍價格、商品詳情、活動時間、活動狀態(tài)競拍中/已結(jié)束。管理員可增刪改查拍賣商品前端用戶可查看商品詳情并點擊“競拍”參與。4.2.2 商品類型管理表shangpinleixing維護商品分類手機、數(shù)碼、電器、書籍等用于商品篩選。4.2.3 歷史競拍用戶點擊“競拍”后系統(tǒng)自動向表lishijingpai插入一條記錄包含商品名稱、類型、出價價格、用戶信息、日期等。該記錄默認sfsh是否審核為“否”需要管理員審核。管理員審核通過后該競拍記錄生效并自動生成對應(yīng)的競拍訂單。4.2.4 競拍訂單表jingpaidingdan存儲成交訂單信息包括訂單編號、商品名稱、成交價格、用戶信息、支付狀態(tài)ispay。用戶可在個人中心查看自己的訂單并完成支付前端模擬支付按鈕。4.2.5 用戶管理表yonghu存儲用戶賬號yonghuming、密碼、姓名、性別、頭像、身份證、手機、郵箱、地址。支持用戶注冊、登錄、修改個人信息。4.2.6 留言板表messages存儲用戶留言及管理員回復。用戶可發(fā)表留言管理員可回復。4.2.7 系統(tǒng)管理輪播圖管理表config存儲首頁輪播圖圖片地址picture1~picture3等。競拍公告表news存儲公告標題、簡介、圖片、內(nèi)容用戶端可查看公告列表及詳情。4.2.8 前后端分離與權(quán)限后端所有 API 均需攜帶Token頭進行身份驗證除IgnoreAuth標注的接口如登錄、注冊、部分列表查詢。前端管理后臺Vue通過http.js攔截器自動添加 Token。用戶端頁面通過localStorage存儲 Token 和用戶角色判斷權(quán)限按鈕顯示。4.3 業(yè)務(wù)流程示例用戶注冊/登錄 → 進入商品列表頁。選擇“競拍中”的商品 → 點擊“競拍”按鈕填寫出價系統(tǒng)邏輯未完全展示但前端會攜帶用戶信息提交至lishijingpai表。管理員后臺查看歷史競拍記錄 → 審核通過 → 系統(tǒng)自動生成競拍訂單jingpaidingdan表。用戶查看訂單 → 點擊“支付”模擬 → 訂單狀態(tài)變?yōu)椤耙阎Ц丁?。管理員可管理輪播圖、公告等維護系統(tǒng)首頁內(nèi)容。5. 部分代碼5.1 數(shù)據(jù)庫表結(jié)構(gòu)示例paimaishangpinCREATETABLEpaimaishangpin(idbigint(20)NOTNULLAUTO_INCREMENTCOMMENT主鍵,addtimetimestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT創(chuàng)建時間,shangpinmingchengvarchar(200)NOTNULLCOMMENT商品名稱,shangpinleixingvarchar(200)NOTNULLCOMMENT商品類型,tupianvarchar(200)DEFAULTNULLCOMMENT圖片,jiageint(11)NOTNULLCOMMENT價格,shangpinxiangqinglongtextCOMMENT商品詳情,huodongshijianvarchar(200)DEFAULTNULLCOMMENT活動時間,huodongzhuangtaivarchar(200)DEFAULTNULLCOMMENT活動狀態(tài),PRIMARYKEY(id))ENGINEInnoDBDEFAULTCHARSETutf8COMMENT拍賣商品;5.2 后端 Controller 示例競拍訂單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)首頁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. 項目總結(jié)本項目是一個功能較為完整的在線拍賣系統(tǒng)涵蓋用戶端和管理端。后端采用 Spring Boot MyBatis-Plus 實現(xiàn) RESTful API數(shù)據(jù)庫設(shè)計合理包含商品、競拍、訂單、用戶等核心表。權(quán)限控制通過 Token Session 結(jié)合 Shiro 實現(xiàn)前端分為 layui 用戶門戶和 Vue Element 管理后臺滿足不同角色的操作需求。主要亮點競拍流程完整用戶出價 → 管理員審核 → 生成訂單 → 支付。支持輪播圖動態(tài)配置和公告發(fā)布。前后端分離接口統(tǒng)一返回R對象。整體而言該項目可作為學習 Spring Boot MyBatis-Plus Vue 整合開發(fā)的參考案例也可在此基礎(chǔ)上擴展更復雜的拍賣規(guī)則和支付功能。 基于SpringBoot2+vue2的在線拍賣系統(tǒng)
1. 代碼獲取https://blog.xiaobias.com/article/72. 項目簡介本項目為一款在線拍賣系統(tǒng)提供線上商品拍賣功能。系統(tǒng)包含前端用戶門戶基于 layui和后端管理界面基于 Vue Element UI支持用戶注冊/登錄、瀏覽拍賣商品、參與競拍、生成歷史競拍記錄、管理員審核競拍、生成訂單及支付等完整流程。數(shù)據(jù)庫采用 MySQL后端使用 Spring Boot MyBatis-Plus 框架權(quán)限控制基于 Shiro 和自定義 Token 機制。3. 技術(shù)棧層級技術(shù)/框架說明后端框架Spring Boot 2.2.2.RELEASE提供 IOC、Web 支持ORM 框架MyBatis-Plus 2.3 MyBatis簡化數(shù)據(jù)庫操作支持分頁數(shù)據(jù)庫MySQL 5.7.32數(shù)據(jù)庫springbootp0eo6權(quán)限控制Apache Shiro 1.3.2 自定義 Token登錄認證、接口鑒權(quán)前端管理Vue 2 Element UI后臺管理界面前端門戶layui HTML/CSS/JS用戶端頁面含輪播圖、商品列表、競拍操作等工具庫Hutool, Fastjson, Commons-lang3字符串處理、JSON、MD5 等構(gòu)建工具Maven依賴管理4. 詳細介紹4.1 系統(tǒng)角色管理員可管理用戶、商品類型、拍賣商品、歷史競拍審核、競拍訂單、留言板、輪播圖、競拍公告等。普通用戶可瀏覽拍賣商品、參與競拍、查看自己的歷史競拍和訂單、留言反饋、支付訂單等。4.2 核心模塊4.2.1 拍賣商品管理表paimaishangpin存儲商品名稱、類型、圖片、起拍價格、商品詳情、活動時間、活動狀態(tài)競拍中/已結(jié)束。管理員可增刪改查拍賣商品前端用戶可查看商品詳情并點擊“競拍”參與。4.2.2 商品類型管理表shangpinleixing維護商品分類手機、數(shù)碼、電器、書籍等用于商品篩選。4.2.3 歷史競拍用戶點擊“競拍”后系統(tǒng)自動向表lishijingpai插入一條記錄包含商品名稱、類型、出價價格、用戶信息、日期等。該記錄默認sfsh是否審核為“否”需要管理員審核。管理員審核通過后該競拍記錄生效并自動生成對應(yīng)的競拍訂單。4.2.4 競拍訂單表jingpaidingdan存儲成交訂單信息包括訂單編號、商品名稱、成交價格、用戶信息、支付狀態(tài)ispay。用戶可在個人中心查看自己的訂單并完成支付前端模擬支付按鈕。4.2.5 用戶管理表yonghu存儲用戶賬號yonghuming、密碼、姓名、性別、頭像、身份證、手機、郵箱、地址。支持用戶注冊、登錄、修改個人信息。4.2.6 留言板表messages存儲用戶留言及管理員回復。用戶可發(fā)表留言管理員可回復。4.2.7 系統(tǒng)管理輪播圖管理表config存儲首頁輪播圖圖片地址picture1~picture3等。競拍公告表news存儲公告標題、簡介、圖片、內(nèi)容用戶端可查看公告列表及詳情。4.2.8 前后端分離與權(quán)限后端所有 API 均需攜帶Token頭進行身份驗證除IgnoreAuth標注的接口如登錄、注冊、部分列表查詢。前端管理后臺Vue通過http.js攔截器自動添加 Token。用戶端頁面通過localStorage存儲 Token 和用戶角色判斷權(quán)限按鈕顯示。4.3 業(yè)務(wù)流程示例用戶注冊/登錄 → 進入商品列表頁。選擇“競拍中”的商品 → 點擊“競拍”按鈕填寫出價系統(tǒng)邏輯未完全展示但前端會攜帶用戶信息提交至lishijingpai表。管理員后臺查看歷史競拍記錄 → 審核通過 → 系統(tǒng)自動生成競拍訂單jingpaidingdan表。用戶查看訂單 → 點擊“支付”模擬 → 訂單狀態(tài)變?yōu)椤耙阎Ц丁?。管理員可管理輪播圖、公告等維護系統(tǒng)首頁內(nèi)容。5. 部分代碼5.1 數(shù)據(jù)庫表結(jié)構(gòu)示例paimaishangpinCREATETABLEpaimaishangpin(idbigint(20)NOTNULLAUTO_INCREMENTCOMMENT主鍵,addtimetimestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT創(chuàng)建時間,shangpinmingchengvarchar(200)NOTNULLCOMMENT商品名稱,shangpinleixingvarchar(200)NOTNULLCOMMENT商品類型,tupianvarchar(200)DEFAULTNULLCOMMENT圖片,jiageint(11)NOTNULLCOMMENT價格,shangpinxiangqinglongtextCOMMENT商品詳情,huodongshijianvarchar(200)DEFAULTNULLCOMMENT活動時間,huodongzhuangtaivarchar(200)DEFAULTNULLCOMMENT活動狀態(tài),PRIMARYKEY(id))ENGINEInnoDBDEFAULTCHARSETutf8COMMENT拍賣商品;5.2 后端 Controller 示例競拍訂單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)首頁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. 項目總結(jié)本項目是一個功能較為完整的在線拍賣系統(tǒng)涵蓋用戶端和管理端。后端采用 Spring Boot MyBatis-Plus 實現(xiàn) RESTful API數(shù)據(jù)庫設(shè)計合理包含商品、競拍、訂單、用戶等核心表。權(quán)限控制通過 Token Session 結(jié)合 Shiro 實現(xiàn)前端分為 layui 用戶門戶和 Vue Element 管理后臺滿足不同角色的操作需求。主要亮點競拍流程完整用戶出價 → 管理員審核 → 生成訂單 → 支付。支持輪播圖動態(tài)配置和公告發(fā)布。前后端分離接口統(tǒng)一返回R對象。整體而言該項目可作為學習 Spring Boot MyBatis-Plus Vue 整合開發(fā)的參考案例也可在此基礎(chǔ)上擴展更復雜的拍賣規(guī)則和支付功能。