vue后台管理系统实践

.login_container{背景颜色：#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；}.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee；边界-半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}本篇是电商管理系统前端项目的笔记。本项目主要包括登录/注销功能、首页布局、用户管理模块、权限管理模块、分类管理模块、参数管理模块、商品管理模块、订单管理模块等功能，我整理了里面的部分功能，希望对大家有所帮助！项目概况BasicBusinessOverview根据不同的应用场景，电商系统一般提供PC、手机APP、手机Web、微信小程序等多种终端接入方式。管理系统功能电商后台管理系统用于管理账户和商品分类、商品信息、订单、数据统计等业务功能开发模式电商后台管理系统采用前后端分离的整体开发模式，前后端分离项目基于Vue技术栈SPA项目技术选择前端技术栈vuevue-routerElement-UIAxiosEcharts后端技术栈部分效果Node.jsExpressJwtMysqlSequelize项目这是实现的登录页面...这是实现的产品列表内容...这个实现的产品分类页面的内容...这是实现的物流进度...这个是分配权限页面实现的...这是通过三层for循环实现的三级权限...这是实现的步骤栏和富文本编辑器...这是修改地址与省市实现区县联动效果...项目初始化前端项目初始化安装Vue脚手架通过Vue脚手架创建项目配置Vue路由配置Element-UI组件库配置axios库初始化git远程仓库将本地项目托管到github或码云后台环境安装安装MySQL数据库，安装Node.js环境，配置项目相关信息，启动项目，使用Postman测试后台项目界面是否正常，实现登录及登录页面布局通过Element-UI组件实现布局el-formel-form-itemel-inputel-button将背景色写入全局stylesheet/*全局样式表*/html,body,#app{height:100%;保证金：0；padding:0;}Login.vue页面<stylelang="less"scoped>.login_container{背景颜色：#2b4b6b;高度：100%；}在main.js里导入global.css文件import'./assets/css/global.css'绘制中间部分头部像Login.vue.login_container{背景颜色：#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；}.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee；边界-半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}绘制登录表单区域Login.vue登录</el-button>重置.login_form{position:absolute;底部：0；宽度：100%；填充：020px；框大小：边框框；}.btns{显示：弹性；证明内容：flex-end；}element.jsimportVuefrom'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)effect实现首页布局的整体布局，先上下分，再左右分plugins/element.js中引入import{Container,Header,Aside,Main}from'element-ui'Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)组件/Home.vue表头退出AsideMain美化表头区域首页