登录功能: 要点:
登录界面已优化
文章图片
输入账号密码后
this.$http.post('login', this.loginForm)
发送表单给后台,后台根据这个方法去数据库查询
getUserByMassage(user.getUsername(), user.getPassword());
文章图片
数据库查询时还要加上state=1,即状态为激活才可以登录成功
登录成功后直接跳转home页面,将用户信息储存sessionStorage,后期路由导航要用到
文章图片
文章图片
如此朴素的home页面,后期可以稍作修改。
退出功能: 一个简单朴素的按钮
文章图片
文章图片
把sessionStorage清除然后跳转login页面
路由: 目前采用先import后使用,后期可以切换路由懒加载~
home作为主要路由嵌套各个页面的路径及页面。
文章图片
路由导航
文章图片
不能没登录就访问改系统其他功能模块,所以前期登录加个sessionStorage来存储用户信息,全局的导航守卫保证用户已登录,不过这种方法可以升级为jwt。
home页面 主要分为3个部分
文章图片
头部信息区。左侧导航区,右侧主体内容区,有待优化!
文章图片
左侧的导航内容从数据库读取,采用一对多映射。嵌套数据分一级菜单和二级菜单
文章图片
后台xml文件
SELECT mm.*,sm.id as sid ,sm.title as stitle,sm.path as spath FROM mainmenu mm ,submenu sm WHERE mm.id = sm.mid;
查询语句,有个缺点,就是二级菜单没有的时候不会显示一级菜单,而我后面有个分类嵌套商品也是模仿这个做的导致了很多问题,后面细说。
图标存储在前端动态获取
文章图片
关于F5或刷新页面后,重定向的问题,将当前页面存入sessionStorage,在加载页面时候在取出完美解决这个问题
文章图片
用户管理功能: 这个模块到时候要做权限控制,只允许超级管理员控制!!看要不要做角色列表,新增页面做角色分配,根据角色分配权限,考虑做吧。!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
文章图片
文章图片
包括
- 新增用户功能(用户名不可修改)
- 搜索用户功能(采用分页xml见上图2)
- 修改用户功能(做得比较简单,还有要不要涉及权限的问题)
- 删除用户功能
- 编辑用户功能
- 分配角色功能
- 修改用户状态功能(state为0不可登录)
商品功能: 简述:大体分为两部分功能1商品列表2商品分类
文章图片
1商品列表
用来展示商品信息,包括(新增,修改,删除,搜索)
其中修改和新增中的分类从数据库分类里获取,保证每个商品都对应一个分类
新增的商品中商品的名称从供应商能供应的货物(做数据剔除:已经存在的商品要剔除)中选择,新增商品其实就是一个进货的过程,由管理员输入数据。
新增商品中优化用户体验,可直接在此页面新增分类!
删除之前先判断订单中是否包含该商品,订单含有该商品不予删除
2分类
文章图片
用来展示分类列表(包括新增,编辑,查询)和属于他的商品
新增注意新增id不可重复,作为分类id
文章图片
编辑时,编辑一个分类时,如果这个分类下面有商品,那么这些商品的所属分类也要跟着改变。根据要修改的分类id获取原先的名称(作为查询条件),先去更改product表中商品的分类信息,再去修改分类表中的信息。
文章图片
删除时,若一个分类下有商品,那么不予删除,先要求删除子分类
文章图片
前面提到那个语句不能搜索出不包含商品的分类,那么要提供多一个接口,获取所有分类名字,给前端做对比,把没有的分类加进去展示(后端没有处理好,应该可以更简单一点)
供应商页面 和product页面几乎完全一样。地址选择换了级联选择器。
并且稍加处理提升用户体验。
供应商页面:供应商id,名称,地址,电话,可供应的商品(一种)。每一个销售单应该由一个供应商提供
供应商的商品可以随便填吧,相当于找供应商,那是可以随便的,但是商品管理中,你要添加商品,那必须先有供应商,不然哪里来的商品呢?商品页面的添加商品,相当于就是在进货的过程,从供应商获取的商品列表应该先做剔除,只允许添加还未添加的商品,存在两个一模一样的商品不合适。
【vue|仓管系统设计】首先要进货才能销售,待销售单的数量如果大于商品数量,那不可以销售成功,销售单由待销售单转化而成。
删除供应商时,如果商品库还存在该供应商提供的商品,那么会导致商品点击查找供应商失败,还会导致完成订单时,无法插入供应商信息。
客户管理页面 customer_id
customer_name
customer_phone
customer_gender(下拉列表,男或女)
customer_email
customer_vip(客户vip等级)会员:白银vip,黄金vip,钻石vip,黑金vip。根据会员积分决定,刚注册时,默认为普通vip。
积分制度(消费一元可以获得1积分,每一笔订单额外+100)
会员等级 | 所需积分 | 会员特权 |
---|---|---|
普通vip | 0 | 9.8折 |
白银vip | 888 | 9.5折 |
黄金vip | 2888 | 9折 |
钻石vip | 5888 | 8.8折 |
黑金vip | 8888 | 8折 |
和product页面几乎完全一样。
销售单管理,待销售订单管理 本系统由用户驱动~用户先下单(产生待销售单),这时候如果商品库中的商品满足客户需求(商品存在库存数量大于用户需求数量),这时候可以直接发货,等待订单完成即可。不满足,去进货(添加商品),商品不存在?就去找供应商!
销售单管理:
应该和商品列表差不多,可以查询各个销售单的记录字段包括:销售订单id,操办人(在销售订单点击销售完成后记录session里取),销售时间(管理员填入),和待销售订单应该有关联,待销售订单点击销售完成后,待销售订单变为销售订单,点击完成时要记录销售人是谁。
待销售订单管理:
注意:销售单里的商品数量不能超过product表里的number,订单中的商品应该只有一种,因为是仓库又不是购物!所以一个
字段:
字段 | 类型 | 说明 |
---|---|---|
order_id | string | 订单编号,自动生成(主键),由时间+订单编号组成唯一订单编号 |
order_provider | string | (销售单)供应商名称,选择商品后自动带出(外键)不可编辑,根据商品自动去数据库搜索供应商并插入 |
order_admin1 | string | 经办人(管理员)名字,新增订单时从sessionStorage里取user名字(外键)(定死) |
order_admin2 | string | 经办人(管理员)名字,完成订单时从sessionStorage里取user名字(外键)(销售单)(定死) |
order_product | string | 订单商品,随便输入 |
order_number | int | 这里的产品不一定存在数据库中,所以可能导致无法自动计算出价格,那就由管理员手动输入订单金额(预估),后面,销售单里的产品肯定存在数据库,可以计算下成本价格,对比这里输入的金额来评估这份订单的盈利情况 |
order_price | double | 下单时由管理员输入,可供计算盈亏 |
order_time1 | date | 取下单时系统时间(定死) |
order_time2 | date | 取完成订单系统时间(定死)(销售单) |
order_remark | string | 订单备注。管理员输入 |
order_is_pay | 1/0 | 标签形式展示,操作栏提供按钮给管理员操作, |
order_is_sale | 1/0 | 不展示给用户,用来区分是销售单还是待销售单 |
order_customer | string | 下单的客户,要多做一个客户表单,从customer表获取 |
2.确认收货。改变order_is_sale为1,然后就变成销售单了
总结 上面两个功能共用一张表order,根据order_is_sale字段判断他是销售单还是待销售单。两个表格要的数据好像差不多相同,只是各自展示不同字段
销售报表统计 销售报表统计:这个放到最后做。准备用echarts做。到时候看看数据怎么导合适
文章图片
新增锁屏功能 新加一个vuex的使用。存储锁屏状态和锁屏密码,锁屏后不可以访问其他页面(登录除外),要么输入密码返回锁屏前的界面,要么退出返回登录界面,全局路由拦截,只有密码正确,再去更改vuex的lock字段为false。
点击锁屏触发
用户有输入密码则更新vuex里锁屏状态,然后进行锁屏。
文章图片
文章图片
vuex文件
文章图片
锁屏页
用户退出要更新vuex和session的内容,解锁代码如下
文章图片
最后加上路由导航
文章图片
关联图
文章图片
之前做的关联图,到时候可以根据具体情况修改
流程图
文章图片
推荐阅读
- vue|程序员接私活必备后台框架,不用重复造轮子,网友(太好用了!)
- #yyds干货盘点#JavaScript - 字符串的转义
- 原生JavaScript灵魂拷问,你能答上多少#yyds干货盘点#
- 如何在WordPress主题中包含jQuery()
- 毕业设计|SpringMVC+Vue项目运动品交易商城
- 课程设计|SpringMVC+Vue项目旅游资源网站
- 前端框架|Vuejs011---vuejs 对象的生命周期
- vue.js|vue.js 生命周期函数(五)
- vue|npm方法安装vue