掃碼點餐！線上點餐（外賣與自取）小程式！

Java陈序员發表於2024-11-11

大家好，我是 Java陳序員。

隨著移動支付的興起，線上掃碼點餐可謂是十分火熱！對於使用者來說，掃碼點餐方便快捷、提升體驗；對於商家來說，提升管理效率、最佳化服務流程。

今天，給大家介紹一款開源的線上掃碼點餐小程式系統！

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

yshop-drink —— 一款線上掃碼點餐（外賣與自取）小程式系統，支援多門店模式，支援 Saas 多租戶模式。

系統功能包含外賣與自取、商品管理（多規格Sku）、店鋪管理、雲小票列印、圖片素材庫、訂單管理、積分兌換（積分+金額）、充值、優惠券、充值、多門店、微信公眾號、商家中心、提前預約、桌面掃碼點餐（單人或者多人協同）、收銀臺、會員卡等功能，更適合企業或個人二次開發。

系統使用當前流行技術組合的前後端分離開發實現，具體技術棧如下：

  • JDK17
  • SpringBoot3
  • Spring Security Oauth2
  • MyBatisPlus
  • Redis
  • Vue3，
  • Element UI
  • Uniapp(Vue3)

系統截圖

後臺管理介面

小程式介面

快速上手

開發環境和開發工具

開發環境：

  • JDK：17+
  • Maven：3.8+
  • Redis：6.x+
  • MySQL: 8.x+
  • Node：16.x+

開發工具：

  • IntelliJ IDEA
  • Visual Studio Code
  • HBuilderX
  • 微信開發者工具（微信小程式）

原始碼下載

  • 克隆專案程式碼
git clone https://github.com/guchengwuyue/yshop-drink.git
  • 專案目錄結構
yshop-drink
├── yshop-drink-boot3                   # 後臺服務端 SpringBoot3
├── yshop-drink-uniapp-vue3             # 小程式端 Uniapp
└── yshop-drink-vue3                    # 後臺管理端 Vue3

服務端

1、在 IDEA 中以 Maven 工程的形式匯入 yshop-drink-boot3

2、建立資料庫 yixiang-drink-open

CREATE DATABASE `yixiang-drink-open` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;

3、執行工程目錄下 sql/yixiang-drink-open.sql 檔案初始化資料庫資料

yixiang-drink-open.sql 指令碼中有大量無效的日誌資料，可不用匯入！

4、修改 yshop-server/src/main/resources 目錄下配置檔案 application-local.yaml 中的 MySQL、Redis 連線資訊配置

預設是載入 local 環境配置，不是載入 dev 環境配置！

5、執行主啟動類 co.yixiang.yshop.server.YshopServerApplication 啟動專案

6、啟動成功後，瀏覽器訪問如下地址，檢視介面文件

http://localhost:48081/doc.html

後臺管理

1、用 VS Code 開啟 yshop-drink-vue3 目錄

2、安裝依賴

npm install

# or
pnpm install

3、修改 .env.dev 配置檔案中 VITE_BASE_URL 配置為 VITE_BASE_URL='http://localhost:48081'

4、啟動專案

npm run dev-server

# or
pnpm run dev-server

5、瀏覽器訪問

http://localhost

小程式

1、在 HBuilderX 匯入 yshop-drink-uniapp-vue3 目錄

2、配置 config/index.js 中的 VUE_APP_API_URL 為 export const VUE_APP_API_URL = 'http://localhost:48081/app-api'

3、開啟 manifest.json 找到 appid 引數，並修改為自己小程式的 appid

...
/* 小程式特有相關 */
"mp-weixin" : {
    "appid" : "wx001e2dc50bf532df",
    "setting" : {
        "urlCheck" : false
    },
    "usingComponents" : true,
    "permission" : {
        "scope.userLocation" : {
            "desc" : "定位最近的門店"
        }
    },
    "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
},
···

4、在 HBuilderX 中點選執行>執行到小程式模擬器>微信開發者工具

yshop-drink 實現了一套線上掃碼點餐的完整功能，很適合個人或企業進行二次開發，同時也是一個值得學習的 Java 開源專案！快去試試吧~

專案地址：https://github.com/guchengwuyue/yshop-drink

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章