Vue + Element-ui實現後臺管理系統(1) --- 總述

總述

1、項目效果 

總體效果

登錄頁

後臺首頁

用戶管理頁

說明 這裏全部的數據都不是直接經過後端獲取的, 而是經過Mock這個工具來模擬後端返回的接口數據。

附上github地址： mall-manage-system

2、項目介紹

一、技術架構

項目整體技術選型

vue-cli 3.0 + element-ui + vue-router + axios +  Vuex + Mock + echarts

二、測試帳號地址

訪問地址: 47.99.203.55:6066

帳號：admin 密碼：admin

帳號：xiaoxiao 密碼：xiaoxiao

由於菜單是根據不一樣用戶權限動態生成的，因此這裏兩個帳戶所看到的後臺菜單是不同的。

三、項目總體結構

mall-manage-system # 電商後臺管理系統
|
---src
      |
      ---api
           |# axios實例 編寫統一的請求響應攔截信息
            ---annotation
      ---assets # 存放靜態資源和全局自定義樣式
           |# 存放圖片
            ---images 
           |# 存放自定義樣式
            ---scss
      --- components # 小組件 通常這裏的都是能夠複用的
           |#首頁側邊欄
            ---CommonAside.vue
           |#首頁頭部
            ---CommonHeader.vue
           |# element-ui 封裝成公共from組件
            ---CommonForm.vue
           |# element-ui 麪包屑組件
            ---CommonTab.vue
           |# element-ui 封裝成公共表格組件
            ---CommonTable.vue 
           |# echarts 封裝成公共圖表組件
            ---EChart.vue  
        --- mock #模擬後端接口 返回數據
           |
        --- router#路由配置信息  
           |
        --- store #vuex配置信息
           |
        --- view # 頁面級組件，通常複用性很低
           |# 首頁相關組件
            ---Home
           |# 登錄頁相關組件 
            ---Login
           |# 用戶管理相關組件
            ---UserManage 
           |# 商品管理相關組件
            ---MallManage
           |# 主入口
            ---Main.vue
        --- App.vue
        --- main.js
        --- vue.config.js

四、說明

接下來會分五篇博客大體講下這個項目一些核心代碼的實現

一、項目搭建+使⽤element實現⾸⻚佈局
二、頂部導航菜單及與左側導航聯動的⾯包屑實現
三、封裝一個ECharts組件的一點思路 
四、封裝一個Form表單組件和Table表格組件 
五、企業開發之權限管理思路講解

別人罵我胖，我會生氣，由於我內心認可了我胖。別人說我矮，我就會以爲可笑，由於我內心知道我不可能矮。這就是咱們爲何會對別人的攻擊生氣。
攻我盾者，乃我心裏之矛(12)