項目背景：

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

實現功能：

1.登錄系統：通過調用登錄接口保存token，成功則跳轉到歡迎頁，并給出成功的提示，失敗給出錯誤提示，讓用戶重新登錄

2.系統管理：管理員管理，也稱權限管理。可以新增管理員及修改管理員密碼；數據庫備份，為保證您的數據安全本系統采用了數據庫備份功能；上傳文件管理，管理你增加產品是上傳的圖片及其它文件

3.企業信息：展示企業信息。可通過修改來改變企業的各類信息及介紹。

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

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

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

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

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

9.人才管理：發布修改招聘信息，人才策略欄目管理，應聘管理

10.權限管理：給會員分配權限，通過搜索實現準確查找

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

12.中英文切換：實現中英文切換，方便會員使用

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

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

項目模塊及項目分解：

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

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ???4.清空輸入框按鈕，對表單內容進行數據清空

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

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

? ? ? ? ? ? ? ?第三模塊：系統界面

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.系統管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索框，搜索按鈕，實現搜索功能

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）添加用戶按鈕，實現添加管理員功能

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（4）批量編輯功能，實現批量刪除功能，方便管理員對數據的管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（5）form表單渲染數據，實現數據可視化。方便瀏覽

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（6）實現表單數據的修改與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.企業管理

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.產品管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索框，搜索按鈕，實現對產品的搜索功能

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）添加產品按鈕，實現添加產品的功能

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（4）批量編輯功能，實現批量刪除功能，方便管理員對數據的管理

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（5）form表單渲數據，實現數據可視化，方便瀏覽

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（6）實現表單數據的修改與刪除

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）搜索按鈕，實現輸入訂單號對訂單查詢

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）form表單進行數據渲染，點擊可進入訂單詳情頁查看訂單內容

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）form表單進行數據渲染，點擊可進入訂單詳情查看訂單內容

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）寫入一個留言板，對留言數據就行存儲

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

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

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

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

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

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

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）可以對數據進行修改與刪除

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 9.權限管理

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）可以對單個數據經行權限修改

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

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

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

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

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

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

項目總結：

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。