GitHub：https://github.com/lyj8330328

目錄

一，項(xiàng)目介紹

二，系統(tǒng)架構(gòu)

2.1架構(gòu)圖

2.2架構(gòu)圖介紹

三，項(xiàng)目搭建

3.1技術(shù)選型

3.2域名

3.3后臺(tái)管理系統(tǒng)搭建

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

3.3.2安裝依賴

3.3.3運(yùn)行測(cè)試

3.3.4項(xiàng)目結(jié)構(gòu)

3.4前臺(tái)門戶搭建（暫略）

3.5服務(wù)搭建

---

一，項(xiàng)目介紹

• 樂優(yōu)商城是一個(gè)全品類的電商購(gòu)物網(wǎng)站（B2C）。
• 用戶可以在線購(gòu)買商品，加入購(gòu)物車，下單，秒殺商品
• 可以品論已購(gòu)買商品
• 管理員可以在后臺(tái)管理商品的上下架，促銷活動(dòng)
• 管理員可以監(jiān)控商品銷售狀況
• 客服可以在后臺(tái)處理退款操作

二，系統(tǒng)架構(gòu)

2.1架構(gòu)圖

2.2架構(gòu)圖介紹

整個(gè)樂優(yōu)商城可以分為兩部分：后臺(tái)管理系統(tǒng)，前臺(tái)門戶系統(tǒng)。

• 后臺(tái)管理：

  • 后臺(tái)系統(tǒng)主要包含以下功能：

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

    • 銷售管理，包括訂單統(tǒng)計(jì)，訂單退款處理，促銷活動(dòng)生成等

    • 用戶管理，包括用戶控制，凍結(jié)，解鎖等

    • 權(quán)限管理，整個(gè)網(wǎng)站的權(quán)限控制，采用智威湯遜鑒權(quán)方案，對(duì)用戶及API進(jìn)行權(quán)限控制

    • 統(tǒng)計(jì)，各種數(shù)據(jù)的統(tǒng)計(jì)分析展示

  • 后臺(tái)系統(tǒng)會(huì)采用前后端分離開發(fā)，而且整個(gè)后臺(tái)管理系統(tǒng)會(huì)使用Vue.js框架搭建出單頁應(yīng)用（SPA）。

  • 預(yù)覽圖：

• 前臺(tái)門戶

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

    • 搜索商品

    • 加入購(gòu)物車

    • 下單

    • 評(píng)價(jià)商品等等

  • 前臺(tái)系統(tǒng)我們會(huì)使用Thymeleaf模板引擎技術(shù)來完成頁面開發(fā)。出于SEO優(yōu)化的考慮，我們將不采用單頁應(yīng)用。

無論是前臺(tái)還是后臺(tái)系統(tǒng)，都共 享相同的微服務(wù)集群，包括：

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

• 搜索微服務(wù)：實(shí)現(xiàn)搜索功能

• 訂單微服務(wù)：實(shí)現(xiàn)訂單相關(guān)

• 購(gòu)物車微服務(wù)：實(shí)現(xiàn)購(gòu)物車相關(guān)功能

• 用戶中心：用戶的登錄注冊(cè)等功能

• 尤里卡注冊(cè)中心

• Zuul網(wǎng)關(guān)服務(wù)

• Spring Cloud Config配置中心

• ?

三，項(xiàng)目搭建

3.1技術(shù)選型

---

前端技術(shù)：

• 基礎(chǔ)的HTML，CSS，JavaScript的（基于ES6標(biāo)準(zhǔn)）

• JQuery的

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

• 前端構(gòu)建工具：的WebPack

• 前端安裝包工具：NPM

• Vue的腳手架：Vue的-CLI

• Vue的路由：VUE路由器

• AJAX框架：愛可信

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

后端技術(shù)：

• 基礎(chǔ)的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 域名

---

一級(jí)域名：www.leyou.com

二級(jí)域名：manage.leyou.com , api.leyou.com

---

3.3 后臺(tái)管理系統(tǒng)搭建

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

? ?點(diǎn)擊下載

3.3.2 安裝依賴

npm install

3.3.3 運(yùn)行測(cè)試

輸入命令：

npm run start

訪問：http://localhost:9001

3.3.4 項(xiàng)目結(jié)構(gòu)

3.3.4.1目錄結(jié)構(gòu)圖

3.3.4.2調(diào)用關(guān)系

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

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

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

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

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

3.3.4.3頁面布局

Layout組件是整個(gè)頁面的布局組件：

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

左側(cè)導(dǎo)航

v-navigation-drawer ：導(dǎo)航抽屜，主要用于容納應(yīng)用程序中的頁面的導(dǎo)航鏈接。

頂部工具條

v-toolbar：工具欄通常是網(wǎng)站導(dǎo)航的主要途徑可以與導(dǎo)航抽屜一起很好地工作，動(dòng)態(tài)選擇是否打開導(dǎo)航抽屜，實(shí)現(xiàn)可伸縮的側(cè)邊欄。

中間內(nèi)容

v-content：并不是一個(gè)組件，而是標(biāo)記頁面布局的元素可以根據(jù)您指定的應(yīng)用程序組件的結(jié)構(gòu)動(dòng)態(tài)調(diào)整大小，使得您可以創(chuàng)建高度可定制的組件。

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

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

• 因此當(dāng)路由到子組件時(shí)，會(huì)在布局中定義的錨點(diǎn)中顯示。

• 并且布局中的其它部分不會(huì)變化，這就實(shí)現(xiàn)了布局的共享。

3.4前臺(tái)門戶搭建（暫略）

3.5服務(wù)搭建

---

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。