快递e栈项目编写过程

项目编写过程

项目的代码已经上传到了我的gitee仓库:https://gitee.com/zhonghaoqiang/ControllerDemo

后台

在这里插入图片描述
在这里插入图片描述

微信端

在这里插入图片描述

项目涉及技术点

html、css、js、Jquery、bootstrap、layui、layer、ajax、mysql、tomcat、servlet、filter、listener、jsp、公有云服务器。

手写MVC框架(基于SpringMVC)

servlet -> 映射器 -> 调用方法 -> 将结果返回

配置web.xml、servlet类、ResponseBody注解、ResponseView注解、记录方法返回值枚举类ResponseType、映射器、配置文件(记录请求处理类)

使用Map集合建立请求和请求处理方法的键值对

框架前的前端补充

二维码生成

步骤:
    1.  引入Jquery.js文件
    2.  引入jquery.qrcode.js文件
    3.  引入支持中文的编码js文件 (utf.js)
    4.  在网页中编写一个div 用于显示二维码
            <div id="div1"></div>
    5.  准备二维码的规格对象(JSON)
        var config  = {
            width:数字,//值是number类型, 表示的单位是px  必须传递
            height:数字,//值是number类型, 表示的单位是px  必须传递 
            text:"内容",//text就表示二维码中存储的数据  必须传递
            correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数
            background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数
            foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数
            render:"绘制模式"//取值:table/canvas , 默认table 可选参数
        };
    6.  通过选择器, 查找到上述的div ,得到Jquery对象, 通过jquery对象的qrcode函数生成二维码
            $("#div1").qrcode(config);

阿里云短信

  1. 在阿里云的sms控制台 签名
  2. 在阿里云的sms控制台创建短信模版code值
  3. 在阿里云的RAM访问控制中心新建一个用户accessKeyId
  4. 在阿里云的RAM访问控制中心新建一个用户AccessKeySecret

后台管理(分五块)

前台后台交互过程
在这里插入图片描述

一、管理员(登录注册)

二、快递管理(增删改查快递表)

快递的列表
  • 分页查询的列表
新增快递
  • 用户输入内容,后台接受参数,向数据库存储
删除快递
  • 用户输入快递单号查询带快递信息
  • 浏览快递信息的最后,可以点击删除按钮,删除快递
修改快递
  • 用户输入快递单号查询到快递信息
  • 浏览(可修改)快递信息的最后,可以点击确认按钮,确认修改快递
编写的流程

创建数据库表格(Express)

在这里插入图片描述

编写DAO

编写Service

编写Controller

前后端交互

前端发起ajax->DispatcherServlet->Controller->Service->DAO->数据库操作

标准流程

  • 前端发起ajax

    //登录,用户存在,用户不存在
            $(".login-button").click(function () {
                var username = $("#username").val();
                var password = $("#password").val();
                //1.    先使用layer,弹出load(提示加载中...)
                var windowId = layer.load();
                //2.    ajax与服务器交互
                //请求,数据,回调函数,回复数据类型
                //不加/是相对路径,加/是绝对路径
                $.post("/login.do",{username:username,password:password},function(data){
                    //接收结果
                    //3.    关闭load窗口
                    layer.close(windowId);
                    //4.    将服务器回复的结果进行显示
                    layer.msg(data.result);
                    if (data.status == 0) {
                        //登录成功跳进主界面
                        location.assign("index.html");
                    }
                },"JSON")
            })
    
  • 编写Controller,用于处理ajax的请求

    • 在Controller中调用service处理
    • 处理完毕,根据service返回的结果,给ajax返回

api文档(前后端数据交互的数据格式)

给前端提供接口的文档,接口的地址,和参数

console部分:

1.用于获取控制台所需的快递数据
请求地址:express/console.do
参数列表:无
返回的格式示例:
	{
		status:0,
		result:“获取成功”,
		data:[
			data1:{//全部的快递信息
				size:1000,//快递总数
				day:100//今日新增
			},
			data2:{
				size:500,//代取件数
				day:100//进入新增
			}
		]
	}
2.快件列表(分页)
请求地址:express/findAll.do
参数列表:
	1.	limit:
			值:0,表示开启分页(默认)
			值:1,表示查询所有
	2.  offset:
			值:数字,表示SQL语句起使索引
	3.pageNumber:
			值:数字,表示获取的快递数量
返回的格式示例:
3.根据单号查询快递信息
请求地址:express/finByNumber.do
参数列表:
	1.	number:快递单号

返回的格式示例:
4.根据取件码查询快递的信息
请求地址:express/finByCode.do
参数列表:
	1.	code:取件码

返回的格式示例:
5.根据用户的手机号码,查询快递信息
请求地址:express/finByPhoneNumber.do
参数列表:
	1.	userPhone:手机号码
	2.	status:状态码
			值:0表示待取件的快递(默认)
			值:1表示查询已取件的快递
			值:2查询用户的所用快递
返回的格式示例:
6.根据录入人的手机号码,查询快递信息(快递员或者柜子的历史记录)
请求地址:express/finBySysPhone.do
参数列表:
	1.	sysPhone:手机号码

返回的格式示例:
8.快件录入
请求地址:express/insert.do
参数列表:
	1.	number:快递单号
	2.	company:快递公司
	3.	username:收件人姓名
	4.	userPhone:收件人手机号码
录入成功返回的格式示例:

录入失败返回的格式示例:

录入时有两个可以遇见到的异常,一个就是快递单号重复(数据库里设置了unique),另一个是取件码重复,这两个异常要去特殊处理一下,一个提示用户,另一个重新生成取件码

9.修改快递信息
请求地址:express/update.do
参数列表:
	1.	id:要修改的快递id
	2.	number:新的快递单号
	3.	company:新的快递公司
	4.	username:新的收货人姓名
	5.	userPhone:新的收件人的手机号码(手机号码更新,重新生成取件码,并发送短信)
	6.	status:新的快递的状态
	
返回的格式示例:

10.根据id删除快递信息
请求地址:express/delete.do
参数列表:
	1.	id: 要删除的快递的id
返回的格式示例
11.确认取件
请求地址:express/updateStatus.do
参数列表:
	1.	code: 要更改状态为已取件的快递取件码
返回的格式示例

三、用户管理(增删改查用户表)

用户列表
用户的增加
用户的修改
用户的删除
编写的流程

建立用户表

在这里插入图片描述

编写DAO

Service

Controller

前后端交互

api文档

1.用于获取控制台的用户人数
请求地址:user/console.do
参数列表:无
返回的格式示例:
	{
		status:0,
		result:“获取成功”,
		data:{//全部的用户
				size:1000,//用户总数
				day:100//今日新增注册用户
			}
	}
2.用户列表(分页)
请求地址:user/findAll.do
参数列表:
	1.	limit:
			值:0,表示开启分页(默认)
			值:1,表示查询所有
	2.  offset:
			值:数字,表示SQL语句起使索引
	3.pageNumber:
			值:数字,表示获取的用户数量
返回的格式示例:
3.用户添加
请求地址:user/insert.do
参数列表:
	1.	username:用户姓名
	2.	userphone:用户手机号码
	3.	usernumber:用户身份证
	4.  password:密码
返回数据格式:

4.根据用户手机号码,修改用户
请求地址:user/update.do
参数列表:
	1.	userphone要修改的用户手机号码
	1.	username:新的用户姓名
	2.	userphone:新的用户手机号码(手机号码更新,并发送短信确认)
	3.	usernumber:新的用户身份证
	4.  password:新的密码
返回数据格式:
5.根据用户手机号码,删除用户
请求地址:user/delete.do
参数列表:
	1.	userphone要删除的用户手机号码	
返回的格式示例
6.根据用户手机号码,展示用户信息(微信端的个人中心)
请求地址:user/findByPhoneNumber.do
参数列表:
	1.	userphone要查询的用户的手机号码	
返回的格式示例
7.进行快递数量的排序查询(用户表)
请求地址:user/lazyboard.do
参数列表:
	1.	type:
		值:0,表示查询总排名
		值:1,表示查询年排名
		值:2,表示查询月排名
返回的格式示例
8.用户登录
请求地址:user/login.do

四、快递员管理(增删改查快递员表)

快递员列表
快递员录入
快递员修改
快递员删除
编写过程

建立快递员表

在这里插入图片描述

编写DAO

Service

Controller

前后端交互

api文档

1.用于获取控制台的快递员人数
请求地址:courier/console.do
参数列表:无
返回的格式示例:
	{
		status:0,
		result:“获取成功”,
		data:{//全部的快递员
				size:1000,//快递员总数
				day:100//今日新增注册快递员
			}
	}
2.快递员列表(分页)
请求地址:courier/findAll.do
参数列表:
	1.	limit:
			值:0,表示开启分页(默认)
			值:1,表示查询所有
	2.  offset:
			值:数字,表示SQL语句起使索引
	3.  pageNumber:
			值:数字,表示获取的快递员数量
返回的格式示例:
3.快递员录入
请求地址:courier/insert.do
参数列表:
	1.	username:快递员姓名
	2.	userphone:快递员手机号码
	3.	usernumber:快递员身份证
	4.  password:密码
返回数据格式:

4.根据快递员手机号码,修改快递员信息
请求地址:courier/update.do
参数列表:
	1.	userphone:要修改的快递员手机号码
	2.	username:新的快递员姓名
	3.	userphone:新的快递员手机号码
	4.	password:新的密码
返回的格式示例:

5.根据快递员手机号码,删除快递员信息
请求地址:courier/delete.do
参数列表:
	1.	userphone:要删除的快递员手机号码
返回的格式示例:

五、控制台显示

使用filter过滤器去进行登录限制,防止非法登录

微信端(zhqprogram.zaixianke.cn)

ngrok:内网穿透

使用内网穿透技术消除局域网限制,使其他人能够登录站点

原理:端口映射,大致过程相当于Socket,我们的端口主动连接ngrok的服务器去接受外网的连接请求

我使用的是http://ngrok.cc/的服务器(因为免费,测试时服务器稳不稳定全看脸)

前置需求

 mp.weixin.qq.com 申请自己的微信公众号

1. 务必修改

 	1.	com.kaikeba.wx.util.SignatureUtil类 88 行的appid  否则无法调用api
 	2.	com.kaikeba.wx.util.TokenUtil类的34行的appid
 	3.	com.kaikeba.wx.util.TokenUtil类的35行的secret

appid和密钥来自于: 
	mp.weixin.qq.com --> 开发者设置

2. 添加JS安全域名:

自己再ngrok官网定义的别名地址

3. 添加白名单ip:

1.	映射服务器地址: (可以通过发送请求查找微信指定的配置文件,找到请求发送到的地址)
2.	本机ip地址: 百度或360搜索 ip:

六、改进

整个系统最大的缺点:由于阿里云平台限制没办法合理处理固定时间内发送多条短信提醒

后期引入非关系型数据库redis和rabbitmq信息推送

页面后端

改进的地方:(1)修改手机号码的时候要发手机验证,前端页面没有写

​ (2)实现查询柜子的历史记录

​ (3)前端页面输入信息的时候,要异步验证是否存在,像用户名要保证唯一,因为数据库没有确立唯一字段,像身份证,快递单号这些唯一字段,都可能会出现重复异常,要提示用户(是选用提前,还是提交之后再提醒),不用捕捉异常

​ (4)改用户手机号码时,用户之前手机号码还没取件的快递怎么办

​ (5) 改快递员手机号码时,快递员之前录入还未取件的快递怎么办(本来想创建单独修改手机号码和取件码的dao方法,由于status的字段为int,很难进行判断,暂时放弃,选择破坏快递表和用户表的外键关系)选择在前端建一个新的参数,如果修改的快递状态赋值

​ (6) 用缓存或者数据结构显示的更快(各种分页查询)

​ (7)快递单号没有验证

​ (8)密码没有验证

微信端的改进

​ (1)在退出销毁session之后,如果不刷新,能通过后退返回到主页

:由于阿里云平台限制没办法合理处理固定时间内发送多条短信提醒

后期引入非关系型数据库redis和rabbitmq信息推送

页面后端

改进的地方:(1)修改手机号码的时候要发手机验证,前端页面没有写

​ (2)实现查询柜子的历史记录

​ (3)前端页面输入信息的时候,要异步验证是否存在,像用户名要保证唯一,因为数据库没有确立唯一字段,像身份证,快递单号这些唯一字段,都可能会出现重复异常,要提示用户(是选用提前,还是提交之后再提醒),不用捕捉异常

​ (4)改用户手机号码时,用户之前手机号码还没取件的快递怎么办

​ (5) 改快递员手机号码时,快递员之前录入还未取件的快递怎么办(本来想创建单独修改手机号码和取件码的dao方法,由于status的字段为int,很难进行判断,暂时放弃,选择破坏快递表和用户表的外键关系)选择在前端建一个新的参数,如果修改的快递状态赋值

​ (6) 用缓存或者数据结构显示的更快(各种分页查询)

​ (7)快递单号没有验证

​ (8)密码没有验证

微信端的改进

​ (1)在退出销毁session之后,如果不刷新,能通过后退返回到主页

​ (2)用户取件完成后,用户查看的快递不会刷新

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值