vue后台管理系统实践方案总结——简易电商后管

作者: chang_遇见缘 | 来源:发表于2020-03-25 10:18 被阅读0次

项目概述

基本业务概述

根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式

管理系统功能

电商后台管理系统用于管理账号、商品分类、商品信息、订单、数据统计等业务功能

开发模式

电商后台管理系统整体采用前后端分离的开发模式，其中前后端项目基于Vue技术栈的SPA项目

技术选型

前端技术栈

vue
vue-router
Element-UI
Axios
Echarts

后端技术栈

Node.js
Express
Jwt
Mysql
Sequelize

项目部分效果

这个是实现的一个登录页面...

image.png

这个是实现的首页的内容...

image.png

这个实现的商品分类页面的内容...

image.png

项目初始化

前端项目初始化

安装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;
            }

在mian.js引入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)

效果如下图：

image.png

实现主页布局

整体布局

先上下划分，再左右划分

<el-container>
    <!--头部区域-->
    <el-header></el-header>
    <el-container>
        <!--侧边栏区域-->
        <el-aside></el-aside>
        <!--右侧主体区域-->
        <el-main></el-main>
    </el-container>
</el-container>

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
    }

效果如下：

image.png

左侧菜单布局

菜单分成二级，并且可以折叠

<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>

在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
})

image.png

获取左侧菜单数据

image.png

通过双层for循环渲染左侧菜单

通过两层for循环把左侧的结构渲染出来

image.png

实现商品列表分页功能

<!-- 分页区域 -->
        <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>

image.png
实现效果如下

image.png

绘制用户列表组件的基础布局

在需要用到的组件添加element.js，为了使用UI组件方便，开始以引入全局

在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;  
}

表示的效果如下

image.png
在Users.vue里面添加

image.png
获取用户列表数据(制作不易困了)

image.png
显示的效果

image.png

使用el-table组件渲染基本的用户列表

stripe属性可以创建带斑马纹的表格 table 组件是不具有竖直方向的边框的

image.png

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

实现的效果

image.png

然后在css/global.css里面写入样式

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

实现的效果(盒子到顶部的距离和字体的大小)

image.png

为表格添加索引列

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

image.png

实现的效果

image.png

自定义状态列的显示效果

使用switch开关

image.png

实现的效果

image.png

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

需要使用element-ui里面的组件

这个:enterable="false",表示鼠标是否可以、进入tooltip中，false是布尔值，所以要进行数据绑定

image.png

最后实现的效果

image.png

总结
通过本次从零一行一行代码实现一个完整的常见的后台管理系统，其实绝大部分就是对Element UI的使用。说是简单、实则坑很多，期间遇到了不少的bug，大多都是因为细节不注意，也让我更加体会好记性不如烂笔头这句话，实践才是真理啊，多动手，多探索。

网友评论

本文标题：vue后台管理系统实践方案总结——简易电商后管

本文链接：https://www.haomeiwen.com/subject/mjftuhtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

vue后台管理系统实践方案总结——简易电商后管

项目概述

基本业务概述

管理系统功能

开发模式

技术选型

前端技术栈

后端技术栈

项目部分效果

项目初始化

前端项目初始化

后端环境安装

实现登录

登录页面布局

登录退出设置背景色

绘制中间部分头像

绘制登录表单区域

实现主页布局

整体布局

左侧菜单布局

菜单分成二级，并且可以折叠

通过axios拦截器添加token验证

获取左侧菜单数据

通过双层for循环渲染左侧菜单

通过两层for循环把左侧的结构渲染出来

实现商品列表分页功能

绘制用户列表组件的基础布局

在需要用到的组件添加element.js，为了使用UI组件方便，开始以引入全局

使用el-table组件渲染基本的用户列表

为表格添加索引列

自定义状态列的显示效果

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

思科DevNet

前端Vue专辑

vue学习

Vue-PC端

vue

Vue