项目编写过程
项目的代码已经上传到了我的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);
阿里云短信
- 在阿里云的sms控制台 签名
- 在阿里云的sms控制台创建短信模版code值
- 在阿里云的RAM访问控制中心新建一个用户accessKeyId
- 在阿里云的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)用户取件完成后,用户查看的快递不会刷新