快递e栈小结

1 项目内容

快递e栈后台端的增删改查；
 微信端扫码取件，修改信息等。

项目地址：https://gitee.com/chen_yibin/express-e-stack

2 涉及知识点

后端
 tomcat、mysql、jdbc、druid连接池、反射与注解、inputStream、map和list集合、servlet、filter。
前端
 html、css、js、jquery、ajax、layer

手写MVC框架

/**
 * 执行过程
 * web.xml->DispatcherServlet(前端处理器，请求分发){
 *     init()加载配置文件application.properties->HandlerMapping（处理器映射器）.load(is)（将所有uri路径放到了Map<String, MVCMapping> data中）
 * }->service(){
 *     HandlerMapping.get(uri);取到了对应uri的MVCMapping->method.invoke(obj, req, resp)取到方法执行的结果->进入switch，进行相应操作
 * }
 */

标准流程

前端发起ajax

		$("按钮选择器").click(function(){
            //1.    先使用layer，弹出load（提示加载中...）
            var windowId = layer.load();
            //2.    ajax与服务器交互
            $.post("服务器地址",参数JSON,function(data){
                //3.    关闭load窗口
                layer.close(windowId);
                //4.    将服务器回复的结果进行显示
                layer.msg(data.result);
            },"JSON");
        });

编写Controller,用于处理ajax的请求

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

二维码生成

步骤:
1. 引入Jquery.js文件
2. 引入jquery.qrcode.js文件
3. 引入支持中文的编码js文件 (utf.js)
4. 在网页中编写一个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);

layui

layer - msg函数

用于弹出信息提示框 

格式1.
    layer.msg("文本");

格式2. 抖动显示
    layer.msg("文本",function(){
        //弹窗结束后会执行
    });

layer - load函数

格式:
    弹出loading:
        var index = layer.load(数字0-2); 
        // 参数表示 loading的图表
        //loading窗口在弹出时, 不允许进行操作.
    关闭loading:
        layer.close(index);

格式2.
    超时自动关闭的loading

        var index = layer.load(数字0-2,{time:毫秒数字})
        //在指定的毫秒后 ,如果没有使用layer.close关闭, 则自动关闭

layer - msg函数(load效果)

格式:
    弹出的格式:
        var index = layer.msg("文本",{icon:16,shade:0.01})
        //因为是msg函数, 所以此窗口会自动消失.
    关闭的格式:
        layer.close(index);

layer - alert函数 信息提示窗

格式:

    layer.alert("文本内容",{icon:图片编号});

    //图片编号: 0-16之间 

layer - tips函数 提示层

格式:
    layer.tips("文本内容","选择器",{tipsMore:true,tips:数字});

    参数:
        1.  参数: tipsMore    :   是否允许同时存在多个弹出的tips
        2.  参数: tips        :   取值为数字1-4 , 分别表示弹出在元素的 上/右/下/左 . 默认弹出在右边