項目背景：

對于一家企業(yè)來說，擁有一個完整網(wǎng)站是很重要的事情，網(wǎng)站包括前端設(shè)計和后端的信息管理。簡單來說，前端就是我們當我們打開一個網(wǎng)站的時候，肉眼所能看到的一切，而后臺則是我們所看不到的一個信息管理系統(tǒng)。網(wǎng)站后臺管理系統(tǒng)主要是用于對網(wǎng)站前臺的信息管理，如文字、圖片、影音、和其他日常使用文件的發(fā)布、更新、刪除等操作，同時也包括會員信息、訂單信息、訪客信息的統(tǒng)計和管理。簡單來說就是對網(wǎng)站數(shù)據(jù)庫和文件的快速操作和管理系統(tǒng)，以使得前臺內(nèi)容能夠得到及時更新和調(diào)整?，F(xiàn)在企業(yè)對于網(wǎng)站建設(shè)的要求越來越高，很多不想自己浪費人力、財力的公司開始找第三方公司來達到自己網(wǎng)站建設(shè)的目的，這樣不公司不僅可以完全滿足甲方爸爸的需求，同時也可以為甲方公司省下不少的人力、財力。功能比較復(fù)雜的后臺管理系統(tǒng)維護不太方便，而且有些功能完全用不上；而功能比較簡單的后臺管理系統(tǒng)對于后期維護和升級方面就比較方便。其實無論什么樣的網(wǎng)站后臺管理系統(tǒng)只要做到在靈活性，維護性，方便操作的解決方案才能引起客戶的滿意，只有客戶滿意的網(wǎng)站后臺管理系統(tǒng)才是最優(yōu)秀的系統(tǒng)。

實現(xiàn)功能：

1.登錄系統(tǒng)：通過調(diào)用登錄接口保存token，成功則跳轉(zhuǎn)到歡迎頁，并給出成功的提示，失敗給出錯誤提示，讓用戶重新登錄

2.系統(tǒng)管理：管理員管理，也稱權(quán)限管理?？梢孕略龉芾韱T及修改管理員密碼；數(shù)據(jù)庫備份，為保證您的數(shù)據(jù)安全本系統(tǒng)采用了數(shù)據(jù)庫備份功能；上傳文件管理，管理你增加產(chǎn)品是上傳的圖片及其它文件

3.企業(yè)信息：展示企業(yè)信息?？赏ㄟ^修改來改變企業(yè)的各類信息及介紹。

4.產(chǎn)品管理：產(chǎn)品類別新增修改管理，產(chǎn)品添加修改以及產(chǎn)品的審核

5.訂單管理：查看訂單的詳細信息及訂單處理。

6.會員管理：查看修改會員資料，

7.留言管理：管理信息反饋及注冊會員的留言，廣泛接受會員反饋，更好的完善項目的性能

8.榮譽管理：充分展示公司的各項榮譽，可通過添加，刪除，修改來完善

9.人才管理：發(fā)布修改招聘信息，人才策略欄目管理，應(yīng)聘管理

10.權(quán)限管理：給會員分配權(quán)限，通過搜索實現(xiàn)準確查找

11.商品管理：將庫中貨物排列出來，添加、刪除、修改、查找，方便對數(shù)據(jù)的操控。

12.中英文切換：實現(xiàn)中英文切換，方便會員使用

13.數(shù)據(jù)庫連接：在線表編輯，添加數(shù)據(jù)表，編輯數(shù)據(jù)庫，刪除無用數(shù)據(jù)庫，搜索數(shù)據(jù)庫

14.退出功能：清楚本地存儲中的token，成功則條轉(zhuǎn)到登錄頁，并給出退出成功的提示

項目模塊及項目分解：

? ? ? ? ? ? ? ?第一模塊：登錄

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.公司Logo,公司名稱

? ? ? ? ? ? ? ? ? ? ? ? ? ?? 2.用戶名輸入框，密碼輸入框，進行正則校驗，輸入錯誤給予提示

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.登錄按鈕，點擊獲取toktn值

? ? ? ? ? ? ? ? ? ? ? ? ? ???4.清空輸入框按鈕，對表單內(nèi)容進行數(shù)據(jù)清空

? ? ? ? ? ? ? ?第二模塊：首頁

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.歡迎頁

? ? ? ? ? ? ? ?第三模塊：系統(tǒng)界面

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.系統(tǒng)管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索框，搜索按鈕，實現(xiàn)搜索功能

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）添加用戶按鈕，實現(xiàn)添加管理員功能

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）提交數(shù)據(jù)按鈕，將頁面數(shù)據(jù)上傳到數(shù)據(jù)庫，防止數(shù)據(jù)丟失

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（4）批量編輯功能，實現(xiàn)批量刪除功能，方便管理員對數(shù)據(jù)的管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（5）form表單渲染數(shù)據(jù)，實現(xiàn)數(shù)據(jù)可視化。方便瀏覽

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（6）實現(xiàn)表單數(shù)據(jù)的修改與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.企業(yè)管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）修改按鈕，對企業(yè)信息進行修改并渲染

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.產(chǎn)品管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索框，搜索按鈕，實現(xiàn)對產(chǎn)品的搜索功能

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）添加產(chǎn)品按鈕，實現(xiàn)添加產(chǎn)品的功能

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）提交數(shù)據(jù)按鈕，對修改后的數(shù)據(jù)重新上傳到數(shù)據(jù)庫

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（4）批量編輯功能，實現(xiàn)批量刪除功能，方便管理員對數(shù)據(jù)的管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（5）form表單渲數(shù)據(jù)，實現(xiàn)數(shù)據(jù)可視化，方便瀏覽

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（6）實現(xiàn)表單數(shù)據(jù)的修改與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.訂單管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索按鈕，實現(xiàn)輸入訂單號對訂單查詢

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）form表單進行數(shù)據(jù)渲染，點擊可進入訂單詳情頁查看訂單內(nèi)容

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 5.會員管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索按鈕，實現(xiàn)輸入訂單號對訂單進行查詢

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）form表單進行數(shù)據(jù)渲染，點擊可進入訂單詳情查看訂單內(nèi)容

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 6.留言管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）寫入一個留言板，對留言數(shù)據(jù)就行存儲

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）提交按鈕，提交留言

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）可對以提交的留言就行修改與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 7.榮譽管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）渲染榮譽的表單

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）添加按鈕，對員工獲得的榮譽進行添加

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）點擊單個員工榮譽可進行編輯與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 8.人才管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）對招聘信息進行渲染

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）添加按鈕，用于添加新的招聘信息

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）可以對數(shù)據(jù)進行修改與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 9.權(quán)限管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）表單渲染，渲染出公司的層級關(guān)系，方便管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）可以對單個數(shù)據(jù)經(jīng)行權(quán)限修改

? ? ? ? ? ? ? ? ? ? ? ? ? ? 10.商品管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）對全部商品進行渲染，充分利用懶加載，盡可能較少同一時間獲取多個數(shù)據(jù)，造成頁面卡頓

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）搜索框，更快速的查找商品

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）添加按鈕，添加新的商品

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（4）將修改或者添加的商品上傳到數(shù)據(jù)庫，并刷新頁面

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（5）刪除，可對單個商品信息進行山刪除

項目總結(jié)：

1. 用到的組件：axios ? ? ?-------連接后臺的數(shù)據(jù)
? ? ? ? ?Element-ui ? -------連接網(wǎng)頁中的element-ui
? ? ? ? ?Moment ? ?-------連接數(shù)據(jù)把時間戳轉(zhuǎn)換為具體時間
? ? ? ? ?Echart ? ? -------連接大屏展示圖，創(chuàng)造數(shù)據(jù)展示
2. 左側(cè)側(cè)面欄用到的組件
? ? ? ?左側(cè)側(cè)邊欄----get---menus獲取內(nèi)容渲染
? ? ?只允許一個子組件下拉 屬性 綁定 unique-opened 屬性值為true，綁定屬性為父級綁定
? ? ? ? ?跳轉(zhuǎn)路由需要在main.js期中配置二級路由，加一個children的對象，里面存放我們要跳轉(zhuǎn)的二級路由 ? ? ? ?
還需要注意的是，我們需要在我們顯示內(nèi)容的地方放一個<router-view>作為我們的一個掛載的地方
3.Users頁面用到的組件傳值的方式
? ? ? ? ?登錄---get---login---本地存儲token值
? ? ? ? ?退出------返回登錄頁面，刪除本地存儲的token值
? ? ? ? ?Show----get---渲染頁面----增刪改查等每次使用每次調(diào)用
? ? ? ? ?添加用戶----post---users---show---展示頁面
? ? ? ? ?刪除用戶---delete---users.id---調(diào)用展示頁面
? ? ? ? ?修改反顯用戶---get---users.id----存入我們當前使用的id?
? ? ? ? ?確認修改用戶信息---put---users.id--- 修改頁面全部修改
4.roles頁面用到的組件傳值的方式
? ? ? ? Show----get---渲染頁面----增刪改查等每次使用每次調(diào)用
? ? ? ? ?添加用戶名稱----post----roles.---show---展示頁面
? ? ? ? ?刪除用戶---delete---roles.id---調(diào)用展示頁面
? ? ? ? ?修改反顯用戶---get---roles..id----存入我們當前使用的id?
? ? ? ? ?確認修改用戶信息---put---roles.id--- 修改頁面全部修改
? ? ? ? ? ? ?分配權(quán)限方面我們使用首先有element里面的樹形控件來存放我們的數(shù)據(jù)
? ? ?通過get方式獲取到后臺的數(shù)據(jù)，通過id獲取到后臺的數(shù)據(jù)展示在模態(tài)框中
循壞的是在prop中的數(shù)據(jù)，通過三個循環(huán)來貨渠道我們想要獲取到的數(shù)據(jù)，三層，第一層在prop里面的children循環(huán)，名字為item，
? ?第二層在item的children里面循環(huán) ?名字為item1
? ?第三層在item1的children里面循環(huán) 名字為item2
5.我們在進行數(shù)據(jù)視圖的規(guī)劃時，
數(shù)據(jù)報表和數(shù)據(jù)大圖呈現(xiàn)時，我們只需呀在echarts把我們需要的類型找到然后復(fù)制進我們的代碼塊，修改我們想要修改的東西，然后在我們的代碼里面安裝好我們需要的echarts插件，最后就可以實現(xiàn)我們的數(shù)據(jù)大圖呈現(xiàn)的效果了。
當我們進入到echarts的官網(wǎng)以后我們只需要點擊選擇我們相似的一個大圖展現(xiàn)我們就可以把里面的邏輯業(yè)務(wù)選擇復(fù)制過來就可以了。
import echarts from 'echarts'
6. 在訂單管理，
我們首先需要獲取數(shù)據(jù)，在我們進行一級二級的分類時，我們需要對照接口文檔查看我們的不同的等級值所代表的數(shù)字，最后對數(shù)字進行判斷哪個為一級二級三級，最后生成我們的標簽，然后渲染到頁面上。
7. 在商品管理的時候，
首先在商品列表要注意對細節(jié)的判斷，比如， 動態(tài)參數(shù)，和靜態(tài)屬性的一個顯示使用的相同的接口但進行判斷的時候是不一樣的，還有里面的內(nèi)容的增刪改，需要判斷不同的值，來進行添加動態(tài)和靜態(tài)的不同數(shù)據(jù)。
8. 在商品數(shù)據(jù)欄
中我們進行添加的時候都要注意的是我們的三級列表我們要添加到的內(nèi)容，我們可以獲取到三級 列表中每一級別的id然后得到id后進行添加添加到我們想要添加到的列表底下（通過id進行判斷獲取）（接口文檔中內(nèi)涵）
9.在進行添加的時候我們的富文本
是通過下載組件vue-quill-editor
當我們下載了這個組件以后我們將官網(wǎng)里面的內(nèi)容復(fù)制過來，在data中進行一一賦值我們就可以在頁面上進行呈現(xiàn)，我們得實現(xiàn)效果也能實現(xiàn)了
接口給的明了，我們需要花時間去對接口文檔進行研究，在我們獲取數(shù)據(jù)的時候一定要注意的是，我們引用數(shù)據(jù)進行傳的值，我們在一個相同的接口通過不同的參數(shù)得到不同的數(shù)據(jù)，
比如同一個商品列表參數(shù)categories我們就可以通過id，name，還有我們的sel進行判斷類型
還有我們要注意的是我們的獲取時的接口，get，post，delete，都是不同的功能，我們進行傳參也在不同的地方，這就是我們要注意的問題。

?

總結(jié)

以上是生活随笔為你收集整理的Vue后台管理系统项目总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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