後臺管理 + H5 + 微信小程式！又一個開源輕量的小商城！

Java陈序员發表於2024-10-14
H5微信小程式

大家好，我是 Java陳序員。

之前，給大家推薦過幾款開源的商城系統。

一個 5.2k+ Star 的微服務商城系統

一個基於Vue+Vuex+iView的電子商城網站

今天，再給大家介紹一款開源輕量的小商城系統，包含後臺管理、H5 和微信小程式！

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

專案介紹

litemall —— 一個小商場系統，基於 SpringBoot + Vue + 微信小程式實現，包含管理員端、H5 端和微信小程式端！

專案架構：

功能特色：

  • 小商城功能
    • 首頁
    • 專題列表、專題詳情
    • 分類列表、分類詳情
    • 品牌列表、品牌詳情
    • 新品首發、人氣推薦
    • 優惠券列表、優惠券選擇
    • 團購
    • 搜尋
    • 商品詳情、商品評價、商品分享
    • 購物車
    • 下單
    • 訂單列表、訂單詳情、訂單售後
    • 地址、收藏、足跡、意見反饋
    • 客服
  • 管理平臺功能
    • 會員管理
    • 商城管理
    • 商品管理
    • 推廣管理
    • 系統管理
    • 配置管理
    • 統計報表

技術棧：

  • Spring Boot
  • Vue
  • 微信小程式

功能截圖

商城後臺管理

商城前端（H5）

商城前端（微信小程式）

快速啟動

環境準備

開發環境配置：

  • MySQL
  • JDK1.8或以上
  • Maven
  • Nodejs
  • 微信開發者工具

1、克隆程式碼

git clone https://github.com/linlinjava/litemall.git

2、專案結構

litemall
├── deploy --------------- 部署指令碼
├── doc ------------------ 文件
├── docker --------------- Docker 部署指令碼
├── litemall-admin ------- 商城後臺管理前端
├── litemall-admin-api --- 商城後臺管理API
├── litemall-all --------- 商城後臺服務
├── litemall-all-war ----- 商城後臺服務(war 包)
├── litemall-core -------- 商城後臺服務核心包
├── litemall-db ---------- 商城後臺服務持久化包
├── litemall-vue --------- 商城前端（H5）
├── litemall-wx ---------- 商城前端（微信小程式）
├── litemall-wx-api ------ 商城前端（微信小程式）API
└── renard-wx ------------ 商城前端（微信小程式）

3、依次匯入 litemall-db/sql 下的 SQL 檔案初始化資料庫資料

  • litemall_schema.sql —— 建立空資料庫、建立使用者、設定訪問許可權

    開發者開發測試階段可以使用，但是部署生產階段一定要注意修改這裡的預設使用者名稱和密碼。

  • litemall_table.sql —— 建立資料庫表，但是沒有建立任何資料

    可以在部署生產階段直接使用。

  • litemall_data.sql —— 建立測試資料

    開發者開發測試階段可以使用，但是部署開發階段應該使用自己的資料。

商城後臺服務

1、將整個專案以 Maven 專案的形式匯入到 IDEA

2、修改 litemall-db 目錄下配置檔案 application-db.yml 中的資料庫連線資訊

如果資料庫服務在本地，且執行過 litemall_schema.sql 檔案，無需修改配置！

3、執行 litemall-all 下的 org.linlinjava.litemall.Application 主啟動類，啟動專案

商城後臺管理前端

# 進入管理管理前端專案
cd litemall/litemall-admin

# 安裝依賴
npm install

# 啟動服務
npm run dev

# 瀏覽器訪問
http://localhost:9527/

啟動服務時，如因 Node 版本過高導致啟動報錯 Error: Cannot find module '@vue/babel-preset-app', 手動安裝 npm install @vue/babel-preset-app --save-dev 完後再啟動服務。

商城前端（H5）

# 進入輕商城前端專案
cd litemall/litemall-vue

# 安裝依賴
npm install

# 啟動服務
npm run dev

# 瀏覽器訪問
http://localhost:6255/

商城前端（微信小程式）

litemall 提供了兩套小商場前端 litemall-wx 和 renard-wx，可以分別匯入和測試。

1、微信開發工具匯入 litemall-wx 專案

2、專案配置，啟用不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書

3、點選編譯，即可在微信開發工具預覽效果

4、也可以點選預覽，然後手機掃描登入（但是手機需開啟除錯功能）

litemall 可以說是一款輕量的小商城系統，上手十分簡單，支援快速搭建！如需要搭建商城系統，這是一個不錯的參考借鑑專案~

專案地址：https://github.com/linlinjava/litemall

最後

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

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

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

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

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

相關文章