使用IDEA的众筹项目（四）同步和异步实现分页查询

1.弹层组件 — layer

1. 常用方法
   ①提示:
   layer.msg(提示信息, {time:1000, icon:5, shift:6}, 回调方法); //弹出时间，图标，特效
   layer.alert(提示信息, function(index){
   // 回调方法
   layer.close(index);
   });

   ②询问：
   layer.confirm(“询问信息”, {icon: 3, title:‘提示’}, function(cindex){
   layer.close(cindex);
   }, function(cindex){
   layer.close(cindex);
   });

   ③加载
   var loadingIndex = layer.msg(‘处理中’, {icon: 16});
   …
   layer.close(loadingIndex);
   var index = layer.load(2, {time: 10*1000});
   layer.close(index);

2. 小图标

3. 使用

   1. 放置位置：/WEB-INF/jsp/login.jsp

      引入：

        <script src="${APP_PATH}/jquery/layer/layer.js"></script>
      

4. 代码参考：

2.用户分步查询 — 同步请求方式

1. 时序图
   
2. 实现

   • 连接：

      <a href="${APP_PATH}/user/index.htm"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
     

   • handler：

   • 列表页面：迭代标签:与for循环是一个道理
     

3.Page类 — 封装分页信息

定义Page类

4.显示分页导航条

1. 分页条：
   
2. 事件处理（跳转页面）
   
3. 效果：
   

5. html和js可以嵌入后台代码

1. html可以嵌入后台代码
   

2. JS可以嵌入后台代码
   

6. 用户分步查询 - 分析— 异步请求方式

1. 同步查询：
   如果数据量大的场合，用户等待的时间会变长，所以用户体验效果会非常的差

2. 异步查询：
   用户希望先看到页面，然后将查询数据的加载效果提示出来

3. 异步请求的时序图
   - 发起同步连接请求,跳转列表页面(无数据展示,只是静态页面展示)
   - 发起异步ajax请求,加载数据,局部刷新页面
   

4. 分页方式

   • 物理分页
     • 根据pageno和pagesize,每次都通过数据进行加载数据.
     • 相当于延迟加载操作
   • 逻辑分页
     • 表示将数据库所有数据查询出来存放到内存中,然后,根据分页信息从内存中获取每一页数据
     • 相当于立即加载操作

7. 用户分步查询 - 实现— 异步请求方式

1. 定义控制器

   @Controller
   @RequestMapping("/user")
   public class UserController {
   
       @Autowired
       public UserService userService;
   
   
       @RequestMapping("/toIndex")
       public String toIndex(){
   
   
           return "user/index";
       }
   
       @ResponseBody
       @RequestMapping("/index")
       public Object index(@RequestParam(value = "pageno",required = false,defaultValue = "1") Integer pageno ,
                           @RequestParam(value = "pagesize",required = false,defaultValue = "10")Integer  pagesize,
                           String queryText){
   
           AjaxResult result = new AjaxResult();
   
           try {
               Map paramMap = new HashMap();
               paramMap.put("pageno",pageno);
               paramMap.put("pagesize",pagesize);
   
               if(StringUtil.isNotEmpty(queryText)){
   
                   if(queryText.contains("%")){
   
                      queryText = queryText.replaceAll("%","\\%");
                   }
                   paramMap.put("queryText",queryText);
               }
   
               Page page = userService.queryPage(paramMap);
               result.setSuccess(true);
               result.setPage(page);
   
           }catch (Exception e){
               result.setSuccess(false);
               e.printStackTrace();
               result.setMessage("查询数据失败");
           }
   
           //将对象序列化为JSON字符串，以流的方式返回
           return result;
       }
   

2. 定义业务层
   service接口：

   public interface UserService {
       User queryUserlogin(Map<String, Object> map);
   
   
   //    Page queryPage(Integer pageno, Integer pagesize);
   
           Page queryPage(Map<String,Object> paramMap);
   
        int saveUser(User user);
   }
   

   service实现：

   @Service
   public class UserServiveImpl implements UserService{
   
           @Autowired
           private UserMapper userMapper;
   
           public User queryUserlogin(Map<String, Object> map) {
   
                   User user = userMapper.queryUserlogin(map);
   
   
                  if(user == null){
   
                       throw new LoginFailExeception("用户账号或密码不存在！");
                  }
   
                   return user;
           }
   
       public Page queryPage(Map<String,Object> paramMap) {
   
               Page page = new Page((Integer)paramMap.get("pageno"),(Integer)paramMap.get("pagesize") );
   
               Integer startIndex = page.getStartIndex();
   
               paramMap.put("startIndex",startIndex);
   
               List<User> datas = userMapper.queryList(paramMap);
   
               page.setDatas(datas);
   
               Integer totalsize = userMapper.queryCount(paramMap);
   
               page.setTotalsize(totalsize);
   
               return  page;
       }
   
   
   
   
       public int saveUser(User user) {
   
           return   userMapper.insert(user);
       }
   }
   

3. 定义dao

   public interface UserMapper {
       int deleteByPrimaryKey(Integer id);
   
       int insert(User record);
   
       User selectByPrimaryKey(Integer id);
   
       List<User> selectAll();
   
       int updateByPrimaryKey(User record);
   
   	User queryUserlogin(Map<String, Object> paramMap);
   
       List<User> queryList(Map<String, Object> paramMap);
   
       Integer queryCount(Map<String, Object> paramMap);
   //
   //    List<User> queryList(@Param("startIndex") Integer startIndex,
   //                         @Param("pagesize") Integer pagesize);
   //
   //    Integer queryCount();
   }
   

4. 定义Mybatis配置文件

   

5. 定义页面
   

      function  pageChange(pageno) {
            <%--window.location.href="${APP_PATH}/user/index.do?pageno="+pageno ;--%>
    
            queryPageUser(pageno);
        }
    
        var jsonObj = {
    
            "pageno" : 1,
            "pagesize": 10,
        }
    
        var loadingIndex = -1;
        function queryPageUser(pageno) {
            jsonObj.pageno = pageno;
            $.ajax({
                type : "POST",
                data : jsonObj,
                url:"${APP_PATH}/user/index.do",
                beforeSend:function () {
                    loadingIndex = layer.load(2,{time:10*1000});
                    return true;
                },
                success: function (result) {
                    layer.close(loadingIndex);
                    if(result.success){
                        var page = result.page;
                        var data = page.datas;
    
                        var content = '';
    
                        $.each(data,function(i,n){
                            content+='<tr>';
                            content+='  <td>'+(i+1)+'</td>';
                            content+='  <td><input type="checkbox"></td>';
                            content+='  <td>'+n.loginacct+'</td>';
                            content+='  <td>'+n.username+'</td>';
                            content+='  <td>'+n.email+'</td>';
                            content+='  <td>';
                            content+='	  <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>';
                            content+='	  <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>';
                            content+='	  <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
                            content+='  </td>';
                            content+='</tr>';
                        });
    
    
                        $("tbody").html(content);
    
                        var contentBar = '';
    
                        if(page.pageno==1 ){
                            contentBar+='<li class="disabled"><a href="#">上一页</a></li>';
                        }else{
                            contentBar+='<li><a href="#" onclick="pageChange('+(page.pageno-1)+')">上一页</a></li>';
                        }
    
                        for(var i = 1 ; i<= page.totalno ; i++ ){
                            contentBar+='<li';
                            if(page.pageno==i){
                                contentBar+=' class="active"';
                            }
                            contentBar+='><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>';
                        }
    
                        if(page.pageno==page.totalno ){
                            contentBar+='<li class="disabled"><a href="#">下一页</a></li>';
                        }else{
                            contentBar+='<li><a href="#" onclick="pageChange('+(page.pageno+1)+')">下一页</a></li>';
                        }
    
                        $(".pagination").html(contentBar);
    
    
                    }else{
                        layer.msg(result.message,{time:1000,icon :5,shift:6});
                    }
                },
                error:function () {
                    layer.msg("加载数据失败",{time:1000,icon :5,shift: 6});
                }
    
            })
    
        }
            $("#queryBtn").click(function () {
    
                var  queryText = $("#queryText").val();
                jsonObj.queryText = queryText;
                queryPageUser(1);
            })
   

8. 模糊查询 - 注意事项

1. 动态查询语句

2. SQL中占位符不能在单引号中，否则，会以?进行查询数据

   ‘%#{param}%’
   ‘%?%’

3. SQL中不能使用加号进行字符串拼接，加号是用来做运算的

   ‘%’+‘D’+’%’

4. MyBatis进行拼串,拼串会出现 SQL 注入情况 ,例如：“or 1=1”

   ‘%${param}%’

5. 使用内置方法进行拼串

   concat(’%’,#{param},’%’)

6. 查询条件值本身为%,查询出所有的数据

   concat(’%’,#{param},’%’) => ‘%%%’
   ‘%%%’ 使用转译字符再进行查询。

7. #和\是一个意思，表示转译。使用#代替\

   select * from t_user where username like ‘%#%%’ escape ‘#’
   select * from t_user where loginacct like ‘%@%%’ escape ‘@’
   SELECT * FROM t_user WHERE loginacct LIKE concat(’%’,’@%’,’%’) ESCAPE ‘@’

8. 常见的SQL文,在Oracle中，使用两个竖线用来表示字符串拼接，MySQL中没有这样的语法。

   select * from t_user where username like ‘%’|| #{param} ||’%’

   • SQL参数问题
     
   • SQL注入问题
     
   • SQL拼接问题
     
     

9. JS中局部变量和全局变量的区别

10. java中replaceAll方法替换字符串中的反斜杠

11. jQuery常用函数