项目概述

基本业务概述

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

管理系统功能

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

开发模式

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

技术选型

前端技术栈

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
字体图标

登录退出设置背景色

在里面写入全局样式表

/* 全局样式表 */
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’

绘制中间部分头像

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

绘制登录表单区域

<!-- 登录表单区域 --><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)

实现主页布局

整体布局

先上下划分，再左右划分

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

vue后台管理系统实践方案总结(一)相关推荐

基于nuxt和iview搭建OM后台管理系统实践(2)-quill富文本组件的封装
目录结构这是<基于nuxt和iview搭建OM后台管理系统实践>这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境自行开发的公共组件(富文本.地图.上传)介绍 ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...
VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...
12款vue后台管理系统（可下载）
vue官方的后台管理仪表盘框架是:vue-admin,除此之外还有很多其他优秀的后台管理集成框架,正所谓前人栽树,后人乘凉.特此记录一下,方面以后要用. 参考下载地址:12款优秀的vue后台管理系统模 ...
哔哩哔哩Allen前端vue后台管理系统笔记
哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入全局引入按需引入嵌套路由左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...
vue后台管理系统搭建
vue后台管理系统搭建前提安装node.js 控制台安装yarn:npm install -g yarn 查看yarn版本:yarn --version 注:-g表示的是全局安装淘宝镜像安装:n ...
一套通用的VUE后台管理系统方案（vite+Vue3+ts）
通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可配置性也非常高,几乎能够满足前端工程化的所有要求 ...
Vue后台管理系统模板介绍
介绍:Vue.js 是一个目前比较流行的前端框架,今天给大家推荐几款基于 Vue 的后端管理的框架.目前比较流行和 Vue 搭配的 UI组件有Element-UI.iview.Bootstrap-V ...
Vue后台管理系统简单实现
后台管理系统的布局一直中规中矩,对于一个后端工程师,对前端知识也需要有一定的了解.下面介绍一下自己用vue做的一个后台模板,主要是方便自己以后的使用. 先对页面的结果做一下分析,首先可以看到上边是公司 ...

vue后台管理系统实践方案总结(一)