vue后台管理系统实践部分总结

smiry
5,472 阅读5分钟

这个是一个电商管理系统的前端项目的笔记，这个项目主要包括登录/退出功能、主页布局、用户管理模块、权限管理模块、分类管理模块、参数管理模块、商品管理模块、 订单管理模块等功能，我把里面部分的功能进行了整理，希望对大家有所帮助！

项目概述

技术选型

前端技术栈

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

后端技术栈

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

项目初始化

前端项目初始化

  • 安装Vue脚手架
  • 通过Vue脚手架创建项目
  • 配置Vue路由
  • 配置Element-UI组件库
  • 配置axios库
  • 初始化git远程仓库
  • 将本地项目托管到github或码云中

后端环境安装

  • 安装MySQL数据库
  • 安装Node.js环境
  • 配置项目相关信息
  • 启动项目
  • 使用Postman测试后台项目接口是否正常

实现登录

登录页面布局

通过Element-UI组件实现布局

  • el-form
  • el-form-item
  • el-input
  • el-button
  • 字体图标

实现主页布局

整体布局

先上下划分，再左右划分

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

左侧菜单布局

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

<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，大多都是因为细节不注意，也让我更加体会 好记性不如烂笔头 这句话，实践才是真理啊，多动手，多探索。

参考

http://www.itheima.com/

avatar
文章
阅读
粉丝