今天是劉小愛(ài)自學(xué)Java第140天。

感謝你的觀看，謝謝你。

學(xué)習(xí)計(jì)劃安排如下：

• 了解傳統(tǒng)項(xiàng)目與互聯(lián)網(wǎng)項(xiàng)目的不同之處。
• 電商項(xiàng)目的特點(diǎn)與任務(wù)。
• 項(xiàng)目分為后臺(tái)管理系統(tǒng)和前臺(tái)門戶系統(tǒng)，每個(gè)系統(tǒng)都是前后端分離，分為前端頁(yè)面和后臺(tái)微服務(wù)，我們先學(xué)后臺(tái)管理系統(tǒng)。
• 今天是后臺(tái)管理系統(tǒng)的前端頁(yè)面搭建，明天是后臺(tái)管理系統(tǒng)的微服務(wù)搭建。

一、劉小愛(ài)商城

Java項(xiàng)目基本都是web項(xiàng)目，其中具體又被分為傳統(tǒng)項(xiàng)目和互聯(lián)網(wǎng)項(xiàng)目。

1傳統(tǒng)項(xiàng)目

像OA辦公系統(tǒng)就是典型的傳統(tǒng)項(xiàng)目：

其典型的特點(diǎn)就是：企業(yè)內(nèi)部員工才能用，并不對(duì)外開(kāi)放。

正是因?yàn)槿绱?，所以更看重的是業(yè)務(wù)本身，至于網(wǎng)站性能什么的不是太看重。

畢竟一共也就那么些人用，也不會(huì)出現(xiàn)高并發(fā)的情況，對(duì)技術(shù)本身要求不高。

2互聯(lián)網(wǎng)項(xiàng)目

像門戶網(wǎng)站，電商網(wǎng)站就是互聯(lián)網(wǎng)項(xiàng)目。

其最大的特點(diǎn)就是對(duì)外開(kāi)放，比如說(shuō)淘寶，所有人都可以使用，都可以注冊(cè)。

正是因?yàn)槿绱?，所以?duì)網(wǎng)站的性能要求是比較高的，要知道現(xiàn)在淘寶用戶可是有幾億，一旦性能不好，用戶體驗(yàn)是很差的。

并且涉及用戶太多，會(huì)有高并發(fā)的問(wèn)題。

雙十一為何這么的牛？

那天凌晨0點(diǎn)可能1秒鐘之內(nèi)就有幾百萬(wàn)上千萬(wàn)用戶使用淘寶下訂單。

就算是機(jī)器，它也會(huì)吃不消的，服務(wù)器會(huì)崩潰，而阿里巴巴能頂住這個(gè)壓力或多或少技術(shù)還是很厲害了。

也正是得益于電商行業(yè)的高強(qiáng)度并發(fā)壓力，促使了阿里巴巴這些行業(yè)巨頭們的技術(shù)進(jìn)步。

3劉小愛(ài)商城

我們要做的項(xiàng)目就叫它劉小愛(ài)商城。

整個(gè)劉小愛(ài)商城從用戶角度來(lái)看，可以分為兩部分：后臺(tái)管理系統(tǒng)、前臺(tái)門戶系統(tǒng)。

前臺(tái)門戶系統(tǒng)就是像淘寶這樣的網(wǎng)站，用戶可以直接注冊(cè)使用的，我們先不學(xué)。

我們先學(xué)后臺(tái)管理系統(tǒng)，它是網(wǎng)站的管理者用來(lái)管理網(wǎng)站的，前端頁(yè)面如下圖：

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

• 商品管理，包括商品分類、品牌、商品規(guī)格等信息的管理。
• 銷售管理，包括訂單統(tǒng)計(jì)、訂單退款處理、促銷活動(dòng)生成等。
• 用戶管理，包括用戶控制、凍結(jié)、解鎖等。
• 權(quán)限管理，整個(gè)網(wǎng)站的權(quán)限控制，采用JWT鑒權(quán)方案，對(duì)用戶及API進(jìn)行權(quán)限控制。
• 統(tǒng)計(jì)，各種數(shù)據(jù)的統(tǒng)計(jì)分析展示。
• ……等等

其又分為前端頁(yè)面和后臺(tái)微服務(wù)。

二、管理系統(tǒng)前端頁(yè)面

整個(gè)管理系統(tǒng)會(huì)使用Vue.js框架搭建出單頁(yè)應(yīng)用（SPA），也就是剛學(xué)的組件化開(kāi)發(fā)。

這邊我們就不從0到1去編寫前端代碼了，直接使用項(xiàng)目提供的前端資源導(dǎo)入即可：

運(yùn)行命令：npm run dev

輸入該命令就能得到一個(gè)訪問(wèn)地址，當(dāng)然也可以自行在對(duì)應(yīng)代碼中設(shè)置。

點(diǎn)擊該路徑就能直接跳轉(zhuǎn)到劉小愛(ài)商城后臺(tái)管理界面了。

如果要我們自己來(lái)寫估計(jì)也要個(gè)幾天時(shí)間，花這個(gè)時(shí)間不值得，直接用項(xiàng)目中提供的資源。

但是我們也要看得懂，不然的話連測(cè)試都沒(méi)法測(cè)試，畢竟后臺(tái)響應(yīng)的數(shù)據(jù)需要我們自己渲染到對(duì)應(yīng)的頁(yè)面中。

關(guān)于前端頁(yè)面的代碼，做一個(gè)簡(jiǎn)單的了解：

emm，這個(gè)涉及到的知識(shí)點(diǎn)就有點(diǎn)多，并且還有一些文件的作用我沒(méi)有說(shuō)明。

其中做一個(gè)了解即可，事實(shí)上大多數(shù)我們明白它的英文意思了，也就知道它的作用了。

三、Vuetify框架

Vuetify是一個(gè)基于Vue的UI框架，可以利用預(yù)定義的頁(yè)面組件快速構(gòu)建頁(yè)面。

就有點(diǎn)類似于學(xué)過(guò)的BootStrap框架。

為什么要用這個(gè)框架呢？

我們剛學(xué)的Vue框架，它雖然會(huì)幫我們進(jìn)行視圖的渲染，但是樣式是由我們自己來(lái)完成。

這顯然不是我們的強(qiáng)項(xiàng)，因此后端開(kāi)發(fā)人員一般都喜歡使用一些現(xiàn)成的UI組件，拿來(lái)即用。

那怎么用呢？

具體就是我們需要一個(gè)什么類型的組件，就可以去這里面找到對(duì)應(yīng)的，再將其提供的代碼模板復(fù)制到對(duì)應(yīng)的地方即可。

以上就是對(duì)vuetify框架的初步介紹，以后用到什么組件，就來(lái)查詢即可。

照理說(shuō)前端頁(yè)面是由專門的前端人員來(lái)完成的，我們后臺(tái)只搭建后臺(tái)微服務(wù)就好了，畢竟現(xiàn)在基本都是前后端分離。

但是現(xiàn)在不可能說(shuō)專門去找一個(gè)前端人員來(lái)陪我學(xué)習(xí)，所以還是要靠自己來(lái)搭建前端頁(yè)面。

這也是為什么前面一直要學(xué)前端基礎(chǔ)的原因。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點(diǎn)個(gè)贊，謝謝你。