天是劉小愛自學Java第140天。

感謝你的觀看，謝謝你。

學習計劃安排如下：

• 了解傳統項目與互聯網項目的不同之處。
• 電商項目的特點與任務。
• 項目分為后臺管理系統和前臺門戶系統，每個系統都是前后端分離，分為前端頁面和后臺微服務，我們先學后臺管理系統。
• 今天是后臺管理系統的前端頁面搭建，明天是后臺管理系統的微服務搭建。

一、劉小愛商城

Java項目基本都是web項目，其中具體又被分為傳統項目和互聯網項目。

1傳統項目

像OA辦公系統就是典型的傳統項目：

其典型的特點就是：企業內部員工才能用，并不對外開放。

正是因為如此，所以更看重的是業務本身，至于網站性能什么的不是太看重。

畢竟一共也就那么些人用，也不會出現高并發的情況，對技術本身要求不高。

2互聯網項目

像門戶網站，電商網站就是互聯網項目。

其最大的特點就是對外開放，比如說淘寶，所有人都可以使用，都可以注冊。

正是因為如此，所以對網站的性能要求是比較高的，要知道現在淘寶用戶可是有幾億，一旦性能不好，用戶體驗是很差的。

并且涉及用戶太多，會有高并發的問題。

雙十一為何這么的牛？

那天凌晨0點可能1秒鐘之內就有幾百萬上千萬用戶使用淘寶下訂單。

就算是機器，它也會吃不消的，服務器會崩潰，而阿里巴巴能頂住這個壓力或多或少技術還是很厲害了。

也正是得益于電商行業的高強度并發壓力，促使了阿里巴巴這些行業巨頭們的技術進步。

3劉小愛商城

我們要做的項目就叫它劉小愛商城。

整個劉小愛商城從用戶角度來看，可以分為兩部分：后臺管理系統、前臺門戶系統。

前臺門戶系統就是像淘寶這樣的網站，用戶可以直接注冊使用的，我們先不學。

我們先學后臺管理系統，它是網站的管理者用來管理網站的，前端頁面如下圖：

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

• 商品管理，包括商品分類、品牌、商品規格等信息的管理。
• 銷售管理，包括訂單統計、訂單退款處理、促銷活動生成等。
• 用戶管理，包括用戶控制、凍結、解鎖等。
• 權限管理，整個網站的權限控制，采用JWT鑒權方案，對用戶及API進行權限控制。
• 統計，各種數據的統計分析展示。
• ……等等

其又分為前端頁面和后臺微服務。

二、管理系統前端頁面

整個管理系統會使用Vue.js框架搭建出單頁應用（SPA），也就是剛學的組件化開發。

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

運行命令：npm run dev

輸入該命令就能得到一個訪問地址，當然也可以自行在對應代碼中設置。

點擊該路徑就能直接跳轉到劉小愛商城后臺管理界面了。

如果要我們自己來寫估計也要個幾天時間，花這個時間不值得，直接用項目中提供的資源。

但是我們也要看得懂，不然的話連測試都沒法測試，畢竟后臺響應的數據需要我們自己渲染到對應的頁面中。

關于前端頁面的代碼，做一個簡單的了解：

emm，這個涉及到的知識點就有點多，并且還有一些文件的作用我沒有說明。

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

三、Vuetify框架

Vuetify是一個基于Vue的UI框架，可以利用預定義的頁面組件快速構建頁面。

就有點類似于學過的BootStrap框架。

為什么要用這個框架呢？

我們剛學的Vue框架，它雖然會幫我們進行視圖的渲染，但是樣式是由我們自己來完成。

這顯然不是我們的強項，因此后端開發人員一般都喜歡使用一些現成的UI組件，拿來即用。

那怎么用呢？

具體就是我們需要一個什么類型的組件，就可以去這里面找到對應的，再將其提供的代碼模板復制到對應的地方即可。

以上就是對vuetify框架的初步介紹，以后用到什么組件，就來查詢即可。

照理說前端頁面是由專門的前端人員來完成的，我們后臺只搭建后臺微服務就好了，畢竟現在基本都是前后端分離。

但是現在不可能說專門去找一個前端人員來陪我學習，所以還是要靠自己來搭建前端頁面。

這也是為什么前面一直要學前端基礎的原因。

最后

謝謝你的觀看。

如果可以的話，麻煩幫忙點個贊，謝謝你。

要從零開始開發一個開源項目，這個項目的目的很簡單：新人可以練手，一步一步搭建項目，把時下流行的技術整合進來，在用這些技術的特性來實現具體業務功能，而對于有經驗的老鳥可以把自學的技術在項目中得以實踐。

在這里插入圖片描述

琢磨了挺長時間，前段時間工作比較忙、家中事情也比較多，導致最近才著手弄。

感興趣的同學可以關注一波，項目進度可能會緩慢，但腳步絕不會停止

作為一個后端程序員，雖然平時也會做一些管理后臺的頁面，可那都是本著能用就行的原則，美觀都是次要的。但項目要對外開源這可是門面，不美美噠多沒面子，所以選一個酷炫的頁面模板成了首要任務，選了10個模板出來，大伙給參謀下。

源碼獲取方式：關注轉發之后私信回復【源碼】來免費獲取到這10個后臺模板源碼

天分享的這一款，是一款強大的管理系統模板，基于materialize css框架的管理后臺模板。強大和易于定制的HTML管理系統模板。它有4個儀表板,無限的配色方案，9種獨特的演示，您可以輕松地定制這個模板，根據幫助文檔。

提示：下載鏈接在文章的尾部，需要的可直接為文章底部提取！

9種風格分別有：左側菜單默認布局、左側小菜單、水平菜單寬窄屏、水平菜單全屏、整體暗色風格、整體亮色風格、圖標菜單樣式、窄屏樣式。9個模板都是支持PC端、平板電腦、手機端。響應式布局。后臺的組件非常豐富、有郵箱、文章、日歷、表單、用戶組、購物車等。可用于做企業網站管理后臺、社交網站管理后臺、商城電商類管理后臺。

網站的組件都是非常豐富的，至于用于怎樣的行業，就看您自己了！下面我們例舉幾個特點：

主要特色：
1、materialize框架
2、6配色方案
3、1000+頁面模板
4、300+UI組件
5、很多小部件
6、畫廊的選項
7、2000+字體圖標
8、很多表的例子
9、容易定制
10、大量的圖表選項
11、多個文件上傳
12、驗證表單
13、電子商務網頁
14、大日歷設計

一、左側菜單默認布局、整體暗色風格

這2款管理系統后臺模板左側布局是一樣的，前一款采用的是白色風格、后一款是暗色系風格，比較護眼，一般后臺都是具備切換風格的功能，也就是色系、開發的時候，可以試著將2款結合在一起用。

二、左側小菜單、水平菜單寬窄屏

前一個采用的是左側小菜布局，鼠標移動上去顯示全部的文字及圖表，后面一個采用水平的布局方式，同理，鼠標移動上去顯示。我個人還是比較喜歡這種風格的，簡約、配色好看！

三、剩余的4種風格

水平菜單全屏、整體亮色風格、圖標菜單樣式、窄屏樣式，這里就不做過多的介紹了，需要的可自行下載后，觀看哦！

過幾天，會分享一個賊好看的博客源碼，基于bootstrap4.3開發的，風格采用2020年最流行的扁平化、卡片式風格。

分享時間是七天，抓緊下載哦！

鏈接: https://pan.baidu.com/s/1gOZ0_1qItcRo-ouOrc4DHw 提取碼: 6qfe

往期精選文章：

白嫖，免費送！4套布局物聯網管理后臺模板框架，基于Webstrot