乐优商城(一)项目介绍
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 install3.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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: javascript --- 使用ru
- 下一篇: 乐优商城介绍