GitHub：https://github.com/lyj8330328

目錄

一，項目介紹

二，系統架構

2.1架構圖

2.2架構圖介紹

三，項目搭建

3.1技術選型

3.2域名

3.3后臺管理系統搭建

3.3.1代碼? ? ? ? ? ? ? ? ? ? ?

3.3.2安裝依賴

3.3.3運行測試

3.3.4項目結構

3.4前臺門戶搭建（暫略）

3.5服務搭建

---

一，項目介紹

• 樂優商城是一個全品類的電商購物網站（B2C）。
• 用戶可以在線購買商品，加入購物車，下單，秒殺商品
• 可以品論已購買商品
• 管理員可以在后臺管理商品的上下架，促銷活動
• 管理員可以監控商品銷售狀況
• 客服可以在后臺處理退款操作

二，系統架構

2.1架構圖

2.2架構圖介紹

整個樂優商城可以分為兩部分：后臺管理系統，前臺門戶系統。

• 后臺管理：

  • 后臺系統主要包含以下功能：

    • 商品管理，包括商品分類，品牌，商品規格等信息的管理

    • 銷售管理，包括訂單統計，訂單退款處理，促銷活動生成等

    • 用戶管理，包括用戶控制，凍結，解鎖等

    • 權限管理，整個網站的權限控制，采用智威湯遜鑒權方案，對用戶及API進行權限控制

    • 統計，各種數據的統計分析展示

  • 后臺系統會采用前后端分離開發，而且整個后臺管理系統會使用Vue.js框架搭建出單頁應用（SPA）。

  • 預覽圖：

• 前臺門戶

  • 前臺門戶面向的是客戶，包含與客戶交互的一切功能例如：

    • 搜索商品

    • 加入購物車

    • 下單

    • 評價商品等等

  • 前臺系統我們會使用Thymeleaf模板引擎技術來完成頁面開發。出于SEO優化的考慮，我們將不采用單頁應用。

無論是前臺還是后臺系統，都共 享相同的微服務集群，包括：

• 商品微服務：商品及商品分類，品牌，庫存等的服務

• 搜索微服務：實現搜索功能

• 訂單微服務：實現訂單相關

• 購物車微服務：實現購物車相關功能

• 用戶中心：用戶的登錄注冊等功能

• 尤里卡注冊中心

• Zuul網關服務

• Spring Cloud Config配置中心

• ?

三，項目搭建

3.1技術選型

---

前端技術：

• 基礎的HTML，CSS，JavaScript的（基于ES6標準）

• JQuery的

• Vue.js 2.0以及基于Vue的框架：Vuetify

• 前端構建工具：的WebPack

• 前端安裝包工具：NPM

• Vue的腳手架：Vue的-CLI

• Vue的路由：VUE路由器

• AJAX框架：愛可信

• 基于Vue的富文本框架：quill-editor

后端技術：

• 基礎的SpringMVC、Spring 5.0和MyBatis3

• Spring Boot 2.0.1版本

• Spring Cloud 最新版 Finchley.RC1

• Redis-4.0

• RabbitMQ-3.4

• Elasticsearch-5.6.8

• nginx-1.10.2：

• FastDFS - 5.0.8

• MyCat

• Thymeleaf

---

3.2 域名

---

一級域名：www.leyou.com

二級域名：manage.leyou.com , api.leyou.com

---

3.3 后臺管理系統搭建

3.3.1 代碼? ? ? ? ? ? ? ? ? ? ?

? ?點擊下載

3.3.2 安裝依賴

npm install

3.3.3 運行測試

輸入命令：

npm run start

訪問：http://localhost:9001

3.3.4 項目結構

3.3.4.1目錄結構圖

3.3.4.2調用關系

• index.html中定義了空的div，其id為app。

• main.js中定義了Vue對象，并且綁定通過id選擇器，綁定到index.html的div中，因此main.js的內容都將在index.html的div中顯示。

• 而main.js中只有一行內容：<App/>,這是使用了App組件，即App.vue，也就是說index.html中最終展現的是App.vue中的內容。

• App.vue中也沒有內容，而是定義了vue-router的錨點：<router-view>,我們之前講過，vue-router路由后的組件將會在錨點展示。

• 最終的結論是：一切路由后的內容都將通過App.vue在index.html中顯示。

3.3.4.3頁面布局

Layout組件是整個頁面的布局組件：

一個典型的三塊布局。包含左，上，中三部分：

左側導航

v-navigation-drawer ：導航抽屜，主要用于容納應用程序中的頁面的導航鏈接。

頂部工具條

v-toolbar：工具欄通常是網站導航的主要途徑可以與導航抽屜一起很好地工作，動態選擇是否打開導航抽屜，實現可伸縮的側邊欄。

中間內容

v-content：并不是一個組件，而是標記頁面布局的元素可以根據您指定的應用程序組件的結構動態調整大小，使得您可以創建高度可定制的組件。

• 布局映射的路徑是/,且是異步加載的,沒有直接寫組件名字，而是一個函數。

• 除了登錄以為的所有組件，都是定義在布局的兒童屬性，路徑并且都是/的下面

• 因此當路由到子組件時，會在布局中定義的錨點中顯示。

• 并且布局中的其它部分不會變化，這就實現了布局的共享。

3.4前臺門戶搭建（暫略）

3.5服務搭建

---

總結

以上是生活随笔為你收集整理的乐优商城（一）项目介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。