vue後臺管理系統實踐方案

這個是一個電商管理系統的前端項目的筆記，這個項目主要包括登錄/退出功能、主頁佈局、用戶管理模塊、權限管理模塊、分類管理模塊、參數管理模塊、商品管理模塊、 訂單管理模塊等功能，我把裏面部分的功能進行了整理，希望對大家有所幫助！

項目概述

基本業務概述

根據不同的應用場景，電商系統一般都提供了PC端、移動APP、移動Web、微信小程序等多種終端訪問方式

管理系統功能

電商後臺管理系統用於管理賬號、商品分類、商品信息、訂單、數據統計等業務功能

開發模式

電商後臺管理系統整體採用前後端分離的開發模式，其中前後端項目基於Vue技術棧的SPA項目

技術選型

前端技術棧

• vue
• vue-router
• Element-UI
• Axios
• Echarts

後端技術棧

• Node.js
• Express
• Jwt
• Mysql
• Sequelize

項目部分效果

這個是實現的一個登錄頁面…

這個是實現的商品列表的內容…

這個實現的商品分類頁面的內容…

這個是實現的物流進度…

這個是實現的分配權限頁面…

這個是通過三層for循環實現的是三級權限…

這個是實現的步驟條和富文本編輯器…

這個是實現的修改地址和省市區縣聯動效果…

項目初始化

前端項目初始化

• 安裝Vue腳手架
• 通過Vue腳手架創建項目
• 配置Vue路由
• 配置Element-UI組件庫
• 配置axios庫
• 初始化git遠程倉庫
• 將本地項目託管到github或碼雲中

後端環境安裝

• 安裝MySQL數據庫
• 安裝Node.js環境
• 配置項目相關信息
• 啓動項目
• 使用Postman測試後臺項目接口是否正常

實現登錄

登錄頁面佈局

通過Element-UI組件實現佈局

• el-form
• el-form-item
• el-input
• el-button
• 字體圖標

登錄退出設置背景色

在裏面寫入全局樣式表

/* 全局樣式表 */
html,
body,
#app{
    height: 100%;
    margin: 0;
    padding: 0;
}

Login.vue頁面

<template>
    <div class="login_container"></div>
</template>
<script>
    export default {}
</script>

<style lang="less" scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }
</style>

在main.js裏面導入global.css文件

import './assets/css/global.css'

繪製中間部分頭像

Login.vue

<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="../assets/logo.png"/>
            </div>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

<style lang="less" scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);     
    }
    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
</style>

繪製登錄表單區域

Login.vue

 <!-- 登錄表單區域 -->
            <el-form label-width="0px" class="login_form">
                <!-- 用戶名 -->
                <el-form-item>
                    <el-input prefix-icon="el-icon-search"></el-input>
                </el-form-item>
                <!-- 密碼 -->
                <el-form-item>
                    <el-input  prefix-icon="el-icon-search"></el-input>
                </el-form-item>
                <!-- 按鈕區域 -->
                <el-form-item class="btns">
                    <el-button type="primary">登錄</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>
            </el-form>
  			
  			.login_form{
                position: absolute;
                bottom: 0;
                width: 100%;
                padding: 0 20px;
                box-sizing: border-box;
            }
            .btns{
                display: flex;
                justify-content: flex-end;
            }

element.js

import Vue from 'vue'
import { Button } from 'element-ui'
import { Form,FormItem} from 'element-ui'
import { Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

效果

實現主頁佈局

整體佈局

先上下劃分，再左右劃分

<el-container>
	<!--頭部區域-->
	<el-header></el-header>
	<el-container>
		<!--側邊欄區域-->
		<el-aside></el-aside>
		<!--右側主體區域-->
		<el-main></el-main>
	</el-container>
</el-container>

在plugins/element.js引入

import { Container,Header,Aside,Main } from 'element-ui'

Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

components/Home.vue

    <el-container class="home-container">
        <!-- 頭部區域 -->
        <el-header>Header<el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 頁面主體區域 -->
        <el-container>
            <!-- 側邊欄 -->
            <el-aside width="200px">Aside</el-aside>
            <!-- 右側內容主體 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>

美化主頁的header區域

<el-header>
    <div>
        <img src="../assets/heima.png" alt="">
        <span>電商後臺管理系統</span>
    </div>
    <el-button type="info" @click="logout">退出</el-button>
</el-header>

 .home-container{
        height: 100%;
    }
    .el-header{
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #fff;
        font-size: 20px;
        > div {
            display: flex;
            align-items: center;
            span{
                margin-left:15px;
            }
        }
    }
    .el-aside{
        background: #333744;
    }
    .el-main{
        background-color: #eaedf1
    }

效果如下：

左側菜單佈局

菜單分成二級，並且可以摺疊

<el-menu>
	<el-submenu>
        <!--這個template是一級菜單的內容模板-->
        <i class="el-icon-menu"></i>
        <span>一級菜單</span>
        <!--在一級菜單中，可以嵌套二級菜單-->
        <el-menu-item>
            <i class="el-icon-menu"></i>
            <span slot="title">二級菜單</span>
        </el-menu-item>
	<el-submenu>
</el-menu>

在plugins/element.js裏面導入

//這個導入的都是根據下邊標籤名
import {Menu,Submenu,MenuItem} from 'element-ui'

Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)

在components/Home.vue裏面寫入

<el-container>
            <!-- 側邊欄 -->
            <el-aside width="200px">
                <!-- 側邊欄菜單區域 -->
                <el-menu
                    background-color="#333744"  text-color="#fff"
                    active-text-color="#ffd04b">
                    <!-- 一級菜單 -->
                    <el-submenu index="1">
                        <!-- 一級菜單的模板區域 -->
                        <template slot="title">
                            <!-- 圖標 -->
                            <i class="el-icon-location"></i>
                            <!-- 文本 -->
                             <span>導航一</span>
                        </template>
                        <!-- 二級菜單 -->
                        <el-menu-item index="1-4-1">
                            <template slot="title">
                            <!-- 圖標 -->
                            <i class="el-icon-location"></i>
                            <!-- 文本 -->
                             <span>選項1</span>
                        </template></el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 右側內容主體 -->
            <el-main>Main</el-main>
        </el-container>

效果如下

通過axios攔截器添加token驗證

通過axios請求攔截器添加token,包裝擁有獲取數據的權限

//axios請求攔截器
axios.interceptors.request.use(config => {
	//爲請求頭對象，添加Token驗證的Authorization字段
	config.headers.Authorization = window.sessionStorage.getItem('token')
	return config
})

獲取左側菜單數據

通過雙層for循環渲染左側菜單

通過兩層for循環把左側的結構渲染出來

實現商品列表分頁功能

    <!-- 分頁區域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" background>
        </el-pagination>

實現的效果

繪製用戶列表組件的基礎佈局

在需要用到的組件添加element.js

import { Breadcrumb,BreadcrumbItem,Card,Row,Col} from 'element-ui'

Vue.use(Breadcrumb)//麪包屑，顯示當前頁面的路徑，快速返回之前的任意頁面
Vue.use(BreadcrumbItem)//麪包屑，顯示當前頁面的路徑，快速返回之前的任意頁面
Vue.use(Card)//卡片形式
Vue.use(Row)//行
Vue.use(Col)//列

在css/global.css裏面寫入樣式

.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
}
/* 想要自己的樣式覆蓋它的樣式就要在後邊加一個!important */
.el-card{
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;  
}

表示的效果如下

在Users.vue裏面添加

獲取用戶列表數據

顯示的效果

使用el-table組件渲染基本的用戶列表

stripe屬性可以創建帶斑馬紋的表格
table 組件是不具有豎直方向的邊框的

再把需要用到的組件在plugins/element.js裏面引入

實現的效果

然後在css/global.css裏面寫入樣式

.el-table{
    margin-top: 15px;
    font-size: 12px;
}

實現的效果(盒子到頂部的距離和字體的大小)

爲表格添加索引列

只需要加入type="index"就可以了

實現的效果

自定義狀態列的顯示效果

使用switch開關

實現的效果

通過作用域插槽渲染操作列

需要使用element-ui裏面的組件

這個:enterable=“false”,表示鼠標是否可以、進入tooltip中，false是布爾值，所以要進行數據綁定

在plugins裏element.js裏面導入

import {Tooltip} from 'element-ui'

Vue.use(Tooltip)

最後實現的效果

總結

通過本次從零一行一行代碼實現一個完整的常見的後臺管理系統，其實絕大部分就是對Element UI的使用。說是簡單、實則坑很多，期間遇到了不少的bug，大多都是因爲細節不注意，也讓我更加體會 好記性不如爛筆頭 這句話，實踐纔是真理啊，多動手，多探索。

最後

希望看到這篇文章的小夥伴都能有所收穫~

歡迎大家加入，一起學習前端，共同進步！