劉小愛商城：后臺管理系統(tǒng)之前端頁面搭建

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

感謝你的觀看，謝謝你。

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

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

一、劉小愛商城

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

1傳統(tǒng)項目

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

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

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

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

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

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

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

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

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

雙十一為何這么的牛？

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

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

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

3劉小愛商城

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

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

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

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

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

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

其又分為前端頁面和后臺微服務(wù)。

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

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

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

運行命令：npm run dev

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

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

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

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

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

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

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

三、Vuetify框架

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

就有點類似于學(xué)過的BootStrap框架。

為什么要用這個框架呢？

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

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

那怎么用呢？

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

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

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

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

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

最后

謝謝你的觀看。

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

要從零開始開發(fā)一個開源項目，這個項目的目的很簡單：新人可以練手，一步一步搭建項目，把時下流行的技術(shù)整合進來，在用這些技術(shù)的特性來實現(xiàn)具體業(yè)務(wù)功能，而對于有經(jīng)驗的老鳥可以把自學(xué)的技術(shù)在項目中得以實踐。

在這里插入圖片描述

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

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

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

源碼獲取方式：關(guān)注轉(zhuǎn)發(fā)之后私信回復(fù)【源碼】來免費獲取到這10個后臺模板源碼

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

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

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

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

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

一、左側(cè)菜單默認布局、整體暗色風(fēng)格

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

css框架管理系統(tǒng)后臺模板

二、左側(cè)小菜單、水平菜單寬窄屏

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

左側(cè)小菜單、水平菜單寬窄屏

三、剩余的4種風(fēng)格

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

剩余的4種風(fēng)格

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

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

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

往期精選文章：

白嫖，免費送！4套布局物聯(lián)網(wǎng)管理后臺模板框架，基于Webstrot

在線咨詢

上一篇：百度首頁-HTML代碼
下一篇：前端代碼是怎樣智能生成的？看看大佬怎么說

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商