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

电商项目

基于Vue初始化项目

一、项目架构、概述

Vue.js

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

二、项目所用技术栈

前端项目技术栈

• Vue
• Vue-router
• Element-UI
• Axios
• Echarts

三、项目功能模块

3.1 功能结构

3.2 功能模块

登录模块

• 登录：当文本框失去焦点后，会进行验证处理，提示用户格式输错获取文本框没有输入内容，并且在登录之前，会对用户输入的账号密码先进行预处理，如果不通过则登录失败
• 重置：会对账号及密码文本框清空
• 退出：退出当前用户并且清除token数据

用户管理

• 添加用户：弹出添加用户对话框，需要填写用户名、密码、邮箱、手机号来添加用户，并且跟登录一样，也会进行验证处理以及预处理
• 编辑用户：用户可以重新修改邮箱及手机号，同时含有验证处理以及预处理功能
• 删除用户：确认后将永久删除该用户
• 搜索用户：输入想查询用户的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能
• 分配角色：弹出要分配角色的用户的分配角色对话框，可在三级选择器选择想分配的新角色
• 更改用户状态：可更改用户是否可登录状态

权限管理

• 添加角色：弹出添加角色对话框，需要填写角色名称、角色描述来添加角色，同时含有验证处理以及预处理功能
• 编辑角色：用户可以重新修改角色名称、角色描述，同时含有验证处理以及预处理功能
• 删除角色：确认后将永久删除该角色
• 删除角色权限：确认后将永久删除该角色下拥有的权限
• 分配权限：可以给角色添加新权限或者消除已有权限

商品管理

• 添加商品：点击添加商品，将编程式跳转至添加商品页面需要完成商品基本信息、商品参数、商品属性、商品图片、商品内容的填写方可成功添加商品
• 编辑商品：用户可以重新修改商品名称、商品价格及数量，同时含有验证处理以及预处理功能
• 删除商品：确认后将永久删除该商品
• 搜索商品：输入想查询商品的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能
• 选择商品分类：可在三级选择器选择想查看的商品
• 添加参数：弹出添加参数对话框，需要填写动态参数来添加参数，同时含有验证处理以及预处理功能
• 编辑参数：用户可以重新修改动态参数，同时含有验证处理以及预处理功能
• 删除参数：确认后将永久删除该参数
• 添加属性：弹出添加属性对话框，需要填写静态属性来添加属性，同时含有验证处理以及预处理功能
• 编辑属性：用户可以重新修改静态属性，同时含有验证处理以及预处理功能
• 删除属性：确认后将永久删除该属性
• 添加分类：弹出添加分类对话框，需要填写分类名称以及通过三级选择器选泽父级分类来添加分类，同时含有验证处理以及预处理功能
• 编辑分类：用户可以重新修改分类名称
• 删除分类：确认后将永久删除该分类

订单管理

• 搜索订单：输入想查询订单的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能
• 编辑订单：可以重新修改订单的地址
• 查看物流：弹出信息对话框，查看物流的具体进度信息

数据统计

• 数据报表：通过折线图显示每一天的用户来源