一、项目概述
本项目旨在开发一个功能全面的物流仓库管理系统,以数字化手段优化仓库作业流程,提高管理效率。系统集成了前端用户交互界面与后端数据处理逻辑,涵盖了从用户注册登录、订单管理、货单跟踪到用户信息维护等多个核心业务模块。通过数据库技术实现数据的增删改查、条件查询及分页显示,为用户提供一个直观、便捷的操作平台。该系统专注于提升仓库管理效率和快递处理速度,主要服务对象为仓库管理员和操作员等后台用户。
二、数据库设计
参考我的另一篇文章:MySQL基础-CSDN博客
数据库设计是项目开发的关键环节之一,它直接影响到系统的性能和可扩展性。以下是针对本项目的数据库设计,使用Navicat连接MySQL数据库:

1.用户表(users)
ID、编号、姓名、用户名、密码、角色、电话、注册时间、头像

2.物流订单表(logisticsorders)
ID、订单号、尺寸、公司、状态、发件人姓名、发件人电话、收件人姓名、收件人电话、收件地址、订单类型

3.站点表(station)
ID、站点编号、站点名、站点地址

4.配送货单表(delivery)
ID、配送货单号、站点编号、配送时间、车牌号、司机、手机号、状态

5.配送明细表(deliverydetail)
ID、配送货单号、订单号

6.接收货单表(receipt)
ID、接收货单号、站点编号、接收时间、车牌号、司机、手机号、状态

7.接收明细表(receiptdetail)
ID、接收货单号、订单号

三、Spring Boot 后端项目搭建
具体步骤参考我的另一篇文章:Spring框架和Maven项目搭建-CSDN博客
1.配置Maven
IDEA创建Maven项目并配置Maven相关路径

2.依赖项导入
在pom.xml导入Spring Boot起步依赖项及MyBatis依赖库并创建项目启动类

3.数据源配置
具体步骤参考我的另一篇文章:MyBatis搭建-CSDN博客
在application.yml配置MyBatis数据源和mapper的xml文件位置

4.项目包结构
后端项目分三层架构创建访问层控制类Controller、服务层Service、数据访问层Dao
创建实体对象类bean、配置类config、工具类util等

四、Vue3 前端项目搭建
具体步骤参考我的另一篇文章:Vue3项目创建及相关配置-CSDN博客
1.初始化项目并安装依赖
使用npm初始化一个Vue项目并用VS Code打开
打开终端安装依赖包、安装vue-router路由组件、安装axios、安装element-plu等...

2.创建基本页并定义路由
创建项目所需的Vue页面,定义相关路由并配置api
前端项目包含页面:基本布局页、登录页、首页、订单管理页、配送货单页、接收货单页、站点详情页、用户管理页

3.引入Element Plus组件
引入Element Plus组件:用布局容器确定系统的基本布局

涉及组件:布局容器、菜单、按钮、表格、表单、对话框、输入框、下拉框、复选框、日期时间选择器、通知、确认消息、头像、图片、走马灯、抽屉、上传以及多种图标样式
五、项目功能模块
项目大致分为五个功能模块,包含以下功能:
1.登录注册模块
页面样式参考:详解5款高级的前端登录页面-CSDN博客
验证码生成参考:vue3 实现登录验证码-CSDN博客

输入用户名、密码并正确输入字符验证码后点击登录发送登录请求,系统后端验证用户信息的正确性,包括用户名是否存在、密码是否匹配,并比对验证码。这里的密码使用md5加密存入数据库,验证成功后服务器将生成携带账户信息的token返回到前端,并在登录后使用拦截器验证token是否有效。

注册页使用表单检验实现密码二次确认,如果后端比对数据库发现用户已经存在,系统将提示注册失败,注册成功则自动切换到登录页。

这里密码使用MD5加密存入数据库,登录前在vue中使用路由的前置守卫组织访问内部页面,token不存在或失效时会自动跳转到登录页。登录可以选中记住密码,将当前账号密码保存在浏览器,以便在下次进入登录页时自动填入账号密码,并在token有效时自动登录。
2.个人中心模块
登录成功后进入首页,浏览器同时发送请求到后端将当前登录的token解码,获取到当前登录的账户信息同步到个人中心。这里可以上传或更换头像以及编辑个人信息。

点击修改密码并输入原密码和新密码,若原密码和数据库比对成功,则提示密码修改成功,同时,清空token,退出当前登录状态到登录页要求重新登录。

3.订单管理模块
这里获取数据库订单表的数据并在前台展示,支持新增、编辑、删除和批量删除,这里的删除为软删除,即只是变更删除字段isdel为已删除状态1,允许通过数据库恢复,新增和编辑信息实现了通过正则表达式进行的表单规则验证,用下拉框选项规范用户输入,支持条件查询指定数据。

另外,根据订单表的尺寸和订单状态的统计数据,这里使用ECharts生成了统计尺寸数量的柱状图和反映订单状态比例的饼状图,图中内容会根据表中数据动态更新。

4.货单管理模块

货单管理模块在满足了对配送和接收货单表进行增删改查的基础上,还加入了分页查询,根据查询数据总数进行分页展示,通过多表联查从站点表获取站点编号对应的站点名。点击货单明细会展示当前货单对应的所有订单编号,同样允许对明细增删操作,并设置了表单验证规范输入格式。

5.用户管理模块

用户管理模块从后台获取除密码之外的用户数据进行展示,同样实现了基本的增删改查,可以同时进行条件查询和分页查询,可以新增和修改用户信息以及头像的上传和更换,支持通过下拉框选择用户角色,并在录入新用户后会自动添加当前时间为注册时间。

另外,用户管理页还实现了上传Excel文件批量导入用户信息,通过后台阿里的EasyExcel解析数据为User对象并传到前台供系统使用者选择性批量导入。