Categories
程式開發

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用


背景介紹

首先介紹下在本文出現的幾個比較重要的概念:

函數計算(Function Compute): 函數計算是一個事件驅動的服務,通過函數計算,用戶無需管理服務器等運行情況,只需編寫代碼並上傳。函數計算準備計算資源,並以彈性伸縮的方式運行用戶代碼,而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息 參考
Fun: Fun 是一個用於支持 Serverless 應用部署的工具,能幫助您便捷地管理函數計算、API 網關、日誌服務等資源。它通過一個資源配置文件(template.yml),協助您進行開發、構建、部署操作。 Fun 的更多文檔 參考
litemall 是一個基於 Spring Boot、Vue、微信小程序等技術開發的商場系統。它包括 Spring Boot 後端 + Vue 管理員前端 + 微信小程序用戶前端 + Vue 商城移動端。更多參考

本文演示如何將該商城應用的 Spring Boot 後端、Vue 管理員前端、Vue 商城移動端三個組件遷移到函數計算

下面是一個已經將到函數計算應用示例效果演示。

效果演示

管理後台效果演示

打開 http://litemall.mofangdegisn.cn 顯示登陸頁面:

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 1

使用默認的賬戶即可登陸。完成後,會進入到後台管理頁面:

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 2

可以在後台管理頁面添加商品類目、上架商品、用戶管理、系統管理等等。

移動端輕商城效果演示

使用手機打開網址 http://litemall.mofangdegisn.cn/vue/index.html ,可以打開輕商城:

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 3

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 4

可以在輕商城中瀏覽商品,並將喜歡的商品添加到購物車中(暫不支持支付):

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 5

架構圖

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 6

項目部署

準備工作

  1. 從 aliyun 獲取基礎信息: accountId 可以從安全設置頁面獲取、ak 信息可以從安全信息管理頁面獲取。
  2. 下載 Fun 工具: 我們會使用 Fun 工具完成項目的部署工作。這裡建議直接下載二進制可執行程序。
  3. 配置 Fun 工具: 下載完成後,執行 fun config 配置 aliyun accountId、ak 以及 region 等信息。如果域名沒有備案,這裡 region 只能選擇海外集群。如果域名已經備案,則沒有限制。
  4. 域名: 比如本文使用的 litemall.mofangdegisn.cn 域名。在域名所在的控制台添加一個CNAME 域名解析,將記錄值填寫為1911504709953557.cn-hangzhou.fc.aliyuncs.com,然後將這裡的1911504709953557 替換成自己的accountid,cn-hangzhou 替換為自己在上一步配置的region。
  5. Mysql: 可以是自己搭建的 MYSQL 數據庫,也可以使用 aliyun RDS 數據庫,準備好 MYSQL 的用戶名以及密碼。如果僅僅是 demo 示例,可以將 rds 白名單設置為 0.0.0.0/0,併申請外網地址,如果是非示例場景,需要為函數計算配置 VPC 訪問,可以參考這裡的教程配置 VPC 訪問 RDS。本文的示例為 demo 性質,因此使用的是 0.0.0.0/0 的方式。

克隆項目

執行下面的命令克隆項目:

git clone [email protected]:tanhe123/litemall.git

如果沒有安裝 Git,也可以直接在頁面點擊 Downlaoad Zip 直接下載代碼並解壓:

輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 7

為域名創建 CNAME

為我們準備好的域名,添加 CNAME 記錄

導入數據庫

在 MYSQL 數據庫上創建一個名為 litemall 的 database,然後將 litemall-db/sql 中的 litemall_table.sql 以及 litemall_data.sql 兩個文件導入到該數據庫中。

如果使用的是 aliyun RDS,可以直接通過下面的方法導入:

修改 template.yml 中的配置

修改 template.yml 中的 SPRING_DATASOURCE_DRUID_URL 為數據庫地址,修改 SPRING_DATASOURCE_DRUID_USERNAME 為數據庫用戶名,修改 SPRING_DATASOURCE_DRUID_PASSWORD 為用戶名密碼。

最後將 template.yml 中的域名 litemall.mofangdegisn.cn 替換為自己域名。

安裝商城 Vue 管理員後端 + Vue 商城移動端的 npm 依賴

對於 linux 或者 mac,可以直接執行項目內的 ./install.sh,該命令會分別進入到 litemall-admin 以及 litemall-vue 執行 cnpm install。

編譯 Java 項目並部署

假如我們要使用的域名是 http://litemall.mofangdegisn.cn ,執行以下命令:

DOMAIN=http://litemall.mofangdegisn.cn ./deploy.sh

需要將上面的域名替換為用戶自己的域名,執行完畢後,完成部署。

打開配置的域名即可看到效果。

總結

通過本文介紹的技巧,我們實現了快速部署商城應用到函數計算

本文轉載自云棲社區。

原文鏈接

https://yq.aliyun.com/articles/741206?spm=a2c4e.11153959.teamhomeleft.1.31592eb1RkBs0Q