基于前后端分離的多商戶 SaaS 版掃碼點(diǎn)餐系統(tǒng)，支持后臺(tái)點(diǎn)餐、多人同時(shí)在線點(diǎn)餐、購(gòu)物車共享、餐桌狀態(tài)實(shí)時(shí)監(jiān)控，菜品管理、餐桌管理等眾多功能。

功能特色

1. 手機(jī)掃碼點(diǎn)餐功能：用戶可以通過掃描二維碼或者搜索菜品名稱，選擇菜品并下單。
2. 多人在線同時(shí)點(diǎn)餐：當(dāng)多人同時(shí)點(diǎn)餐時(shí)可以實(shí)時(shí)同步共享以點(diǎn)菜單，共享購(gòu)物車。
3. 商戶前臺(tái)點(diǎn)餐功能：商戶管理端也有點(diǎn)餐功能，商戶可以幫助顧客點(diǎn)餐，而并不是只能顧客掃碼點(diǎn)餐。
4. 餐桌狀態(tài)實(shí)時(shí)監(jiān)控：餐桌的使用情況可以實(shí)時(shí)的展示出來，無需手動(dòng)刷新，同時(shí)也方便顧客查看餐桌的使用情況，快速尋找可用餐桌。
5. 菜品管理：商戶可以在管理端對(duì)店鋪中的菜品進(jìn)行管理，例如可以對(duì)菜品進(jìn)行增加、修改和刪除等功能。
6. 菜品分類管理：設(shè)置菜品包含的分類，商戶點(diǎn)餐端可以根據(jù)分類快速查找商品，同時(shí)顧客點(diǎn)餐端也會(huì)根據(jù)菜品分類展示菜品。
7. 桌號(hào)管理：商戶可以對(duì)店鋪中的就餐桌進(jìn)行編號(hào)，并錄入到系統(tǒng)中，就可以通過系統(tǒng)對(duì)餐桌進(jìn)行管理。
8. 區(qū)域管理：對(duì)餐桌的分布位置進(jìn)行管理，使商戶更加方便的進(jìn)行管理。
9. 生成餐桌二維碼：商戶可以針對(duì)某一桌號(hào)生成當(dāng)前餐桌的二維碼，用戶掃描后就可以針對(duì)當(dāng)前餐桌進(jìn)行點(diǎn)餐。
10. 店鋪數(shù)據(jù)統(tǒng)計(jì)：餐廳可以通過掃碼點(diǎn)餐系統(tǒng)統(tǒng)計(jì)訂單數(shù)據(jù)，包括銷售額、菜品銷量等。
11. 店鋪設(shè)置：商戶可以設(shè)置店鋪的一些展示信息，例如店名、介紹、公告等信息。這些信息同時(shí)會(huì)展示在顧客點(diǎn)餐端。
12. 小票打印機(jī)管理：商戶可以綁定小票打印機(jī)，當(dāng)有訂單時(shí)就會(huì)自動(dòng)打印當(dāng)前訂單的一些信息。

技術(shù)實(shí)現(xiàn)

前端：

1. 商戶管理端使用 VUE3 版本，顧客點(diǎn)餐端使用 VUE2 版本。
2. Vue Router：是 Vue 框架的路由模塊。
3. ElementUI Plus：一款基于 vue3 的組件庫(kù)，開箱即用。搭配 VUE 來實(shí)現(xiàn)商戶管理端的頁(yè)面設(shè)計(jì)。
4. Pinia：全局狀態(tài)管理器，它允許您跨組件或者頁(yè)面共享狀態(tài)。
5. Tailwind CSS：一款響應(yīng)式設(shè)計(jì)的前端 css 框架。
6. cube-ui：基于 Vue 框架實(shí)現(xiàn)的移動(dòng)端組件庫(kù)。使用起來簡(jiǎn)單、便捷，主要用來實(shí)現(xiàn)顧客點(diǎn)餐端的界面。
7. ECharts：數(shù)據(jù)圖表組件庫(kù)，開箱即用，方便快捷。用在商戶管理端通過圖表查看店鋪數(shù)據(jù)。
8. TypeScript：在 JavaScript 的基礎(chǔ)上做出了升級(jí)，新增了面向?qū)ο笳Z(yǔ)法。
9. Axios：基于 Promise 的網(wǎng)絡(luò)請(qǐng)求庫(kù)，異步請(qǐng)求結(jié)合 vue 實(shí)現(xiàn)頁(yè)面局部刷新。
10. image-compressor：對(duì)體積偏大的圖片進(jìn)行壓縮并上傳 OSS。

后端：

1. Spring Boot：當(dāng)前非常流行的后端開源框架，在 spring 核心之上只對(duì)配置做了升級(jí)，不改變核心，開發(fā)者開箱即用。
2. MyBatis：數(shù)據(jù)持久化框架，對(duì)數(shù)據(jù)庫(kù)連接、配置等操作進(jìn)行了自動(dòng)化裝配，只需要進(jìn)行簡(jiǎn)單的配置就可以實(shí)現(xiàn)自動(dòng)注冊(cè)驅(qū)動(dòng)、建立連接、釋放連接等操作。
3. MyBatis-Plus：MyBatis 的增強(qiáng)工具，只做增強(qiáng)不做改變，只為簡(jiǎn)化開發(fā)、提高效率 [9]。
4. MyBatis-Plus-Join：MyBatis-Plus 的增強(qiáng)工具，支持了多表聯(lián)查。
5. Sa-Token：輕量級(jí) Java 權(quán)限認(rèn)證框架，解決登錄認(rèn)證、權(quán)限認(rèn)證、單點(diǎn)登錄等一系列權(quán)限相關(guān)問題。
6. Redis：基于內(nèi)存的 Key-Value 型數(shù)據(jù)庫(kù)，性能強(qiáng)悍。

項(xiàng)目地址

后端：https://gitee.com/ah-f/Afly-OrderMeals-backend
前端：https://gitee.com/ah-f/Afly-OrderMeals-front
H5 端：https://gitee.com/ah-f/Afly-OrderMeals-h5