測試圖片的博客

在線預覽：www.youlai.tech

H5商城在線預覽：mall.youlai.tech

開源地址： Github | Gitee | GitCode

博客主頁： https://www.cnblogs.com/haoxianrui

開發者文檔：http://youlaitech.gitee.io/youlai-mall

🈶 項目介紹

🗁 項目簡介

youlai-mall 是基於Spring Boot 2.6、Spring Cloud 2021 & Alibaba 2021、Vue3、Element-Plus、uni-app等主流技術棧構建的一整套全棧開源商城項目， 涉及 後端微服務、 前端管理 、 微信小程序和 APP應用 等多端的開發。

🗁 項目特色

• 項目使用皆是當前主流的技術棧，無過度自定義封裝，易理解學習和二次擴展；
• SpringBoot 2.6、SpringCloud 2021 & Alibaba 2021 一站式微服務開箱即用的解決方案；
• Spring Security OAuth2 、 Spring Cloud Gateway 、 JWT 統一認證鑑權和常用 OAuth2 授權模式擴展；
• 移動端採用終極跨平臺解決方案 uni-app， 一套代碼編譯iOS、Android、H5和小程序等多個平臺；
• Jenkins、K8s、Docker實現微服務持續集成與交付(CI/CD)。

🗁 在線預覽

	地址
管理前端 Vue3	www.youlai.tech
管理前端 Vue2	www.youlai.tech:9527
H5 移動端	www.youlai.tech:81

🗁 項目預覽

「App」Spring Security OAuth2 手機短信驗證碼模式	「小程序」Spring Security OAuth2 微信授權模式
「管理前端」Spring Security OAuth2 密碼模式	「管理前端」Spring Security OAuth2 驗證碼模式

🍸 源碼地址

	Gitee	Github	GitCode
開源組織	有來開源組織	有來開源組織	有來開源組織
技術團隊	有來技術團隊	有來技術團隊	-
商城後端	youlai-mall	youlai-mall	youlai-mall
商城管理前端(Vue3)	mall-admin-web	mall-admin-web	mall-admin-web
商城管理前端(Vue2)	mall-admin-web	mall-admin-web	-
小程序/H5/移動端	mall-app	mall-app	mall-app
vue3-element-admin	vue3-element-admin	vue3-element-admin	-

🚤 項目啓動

🗁 後端啓動

極速啓動 是方便快速啓動查看效果的啓動方式，其中的數據庫和Redis等中間件使用的是有來提供的雲環境，切勿修改數據，有時間條件建議本地啓動。

1️⃣ 極速啓動

1. 啓動 Nacos

   • IDEA 打開命令行終端 Terminal，輸入 cd middleware/nacos/bin 切換到 Nacos 的 bin 目錄，執行 startup -m standalone 啓動 Nacos 服務。

2. 服務啓動

   • youlai-gateway 模塊的啓動類 GatewayApplication 啓動網關；

   • youlai-auth 模塊的啓動類 AuthApplication 啓動認證中心；

   • youlai-admin → admin-boot 模塊的啓動類 AdminApplication 啓動系統服務；

   • 至此完成基礎服務的啓動，商城服務按需啓動，啓動方式和 youlai-admin 一致；

   • 訪問接口文檔地址測試: http://localhost:9999/doc.html

2️⃣ 本地啓動

1. 中間件安裝(🔴必裝 ⚪可選)

   爲了避免數據和線上環境衝突，MySQL 和 Redis 必裝，不安裝可默認使用有來線上環境

   • 🔴MySQL 安裝
   • 🔴Redis 安裝
   • ⚪RabbitMQ
   • ⚪Seata 安裝
   • ⚪Sentinel 安裝

2. 數據庫創建和數據初始化

   • 系統數據庫

     進入 docs/sql 目錄 ， 根據 MySQL 版本選擇對應的腳本；

     先執行 database.sql 完成數據庫的創建；

     再執行 youlai.sql 、mall_*.sql 完成數據表的創建和數據初始化。

   • Nacos 數據庫

     創建名爲 nacos 的數據庫，執行 middleware/nacos/conf/nacos-mysql.sql 腳本完成 Nacos 數據庫初始化。

3. Nacos 配置和啓動

   1. Nacos 配置持久化至 MySQL

      進入項目的 middleware/nacos/conf/application.properties 文件修改 Nacos 配置的數據連接，需要修改配置如下：

      spring.datasource.platform=mysql
      db.num=1
      db.url.0=jdbc:mysql://localhost:3306/nacos?characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnicode=true&useSSL=false&serverTimezone=UTC
      db.user.0=root
      db.password.0=123456
      

   2. 啓動Nacos

      IDEA 打開命令行終端 Terminal，輸入 cd middleware/nacos/bin 切換到 Nacos 的 bin 目錄，執行 startup -m standalone 啓動 Nacos 服務。

   3. 導入Nacos配置

      打開瀏覽器，地址欄輸入 Nacos 控制檯的地址 http://localhost:8848/nacos ；

      輸入用戶名/密碼：nacos/nacos ；

      進入控制檯，點擊左側菜單 配置管理 → 配置列表 進入列表頁面，點擊 導入配置 選擇項目中的 docs/nacos/DEFAULT_GROUP.zip 文件。

   4. 修改Nacos配置

      在 Nacos 控制檯配置列表選擇共享配置 youlai-common.yaml 進行編輯，修改 MySQL、Redis、RabbitMQ等中間件信息爲您自己本地環境，默認「有來」線上環境。

   5. 修改Nacos配置中心地址

      批量替換應用的 bootstrap-dev.yml 文件的配置中心地址 http://c.youlai.tech/8848 → http://localhost/8848 ，默認「有來」線上的配置中心地址。

4. 服務啓動

   • 進入 youlai-gateway 模塊的啓動類 GatewayApplication 啓動網關；

   • 進入 youlai-auth 模塊的啓動類 AuthApplication 啓動認證授權中心；

   • 進入 youlai-admin → admin-boot 模塊的啓動類 AdminApplication 啓動系統服務；

   • 至此完成基礎服務的啓動，商城服務按需啓動，啓動方式和 youlai-admin 一致;

   • 訪問接口文檔地址測試: http://localhost:9999/doc.html

🗁 管理前端啓動

1. 本機安裝 Node 環境
2. npm install
3. npm run dev
4. 訪問 http://localhost:9527

🗁 微信小程序啓動

1. 下載 HBuilder X 和 微信開發者工具 ;
2. 導入 mall-app 源碼至 HBuilder X ;
3. 微信公衆平臺申請小程序，獲得小程序的AppID ;
4. 微信開發者工具 微信掃碼登錄，開啓服務端口，點擊工具欄 設置 -> 安全設置 -> 安全 -> 服務端口選擇打開 ;
5. Hbuilder X 替換項目AppID成自己的，點擊 manifest.json 文件->微信小程序配置 ;
6. Nacos控制檯替換 youlai-auth 配置中的微信小程序 AppID 和 AppSecret 爲自己申請的小程序 ;
7. Hbuilder X 工具欄點擊 運行 -> 運行到小程序模擬器 -> 微信開發者工具。

🗁 H5/移動端啓動

1. 下載 HBuilder X ;
2. 導入 mall-app 源碼至 HBuilder X;
3. Hbuilder X 工具欄點擊 運行 -> 運行到內置瀏覽器 。

✅ Git 貢獻提交規範

IDEA 安裝 Git Commit Template 插件

• feat 增加新功能
• fix 修復BUG
• docs 文檔/註釋
• style 代碼風格改變但不影響運行結果(代碼格式化、空格和空行調整等)
• refactor 代碼重構
• test 測試
• chore 依賴更新
• ci 持續集成

💹 趨勢統計

• Gitee

• Github

💬 聯繫信息

歡迎添加開發者微信，備註「有來」進羣

全棧	全棧	DevOps