使用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. 小图标 使用IDEA的众筹项目(四)同步和异步实现分页查询

  3. 使用

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

      引入:

        <script src="${APP_PATH}/jquery/layer/layer.js"></script>
      
  4. 代码参考:

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

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

  1. 时序图
    使用IDEA的众筹项目(四)同步和异步实现分页查询
  2. 实现
    • 连接:

       <a href="${APP_PATH}/user/index.htm"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
      
    • handler: 使用IDEA的众筹项目(四)同步和异步实现分页查询

    • 列表页面:迭代标签:与for循环是一个道理
      使用IDEA的众筹项目(四)同步和异步实现分页查询

3.Page类 — 封装分页信息

定义Page类

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

4.显示分页导航条

  1. 分页条:
    使用IDEA的众筹项目(四)同步和异步实现分页查询
  2. 事件处理(跳转页面)
    使用IDEA的众筹项目(四)同步和异步实现分页查询
  3. 效果:
    使用IDEA的众筹项目(四)同步和异步实现分页查询

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

  1. html可以嵌入后台代码
    使用IDEA的众筹项目(四)同步和异步实现分页查询

  2. JS可以嵌入后台代码
    使用IDEA的众筹项目(四)同步和异步实现分页查询

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

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

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

  3. 异步请求的时序图
    - 发起同步连接请求,跳转列表页面(无数据展示,只是静态页面展示)
    - 发起异步ajax请求,加载数据,局部刷新页面
    使用IDEA的众筹项目(四)同步和异步实现分页查询

  4. 分页方式

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

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

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

  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配置文件

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

  5. 定义页面
    使用IDEA的众筹项目(四)同步和异步实现分页查询

       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参数问题
      使用IDEA的众筹项目(四)同步和异步实现分页查询
    • SQL注入问题
      使用IDEA的众筹项目(四)同步和异步实现分页查询
    • SQL拼接问题
      使用IDEA的众筹项目(四)同步和异步实现分页查询
      使用IDEA的众筹项目(四)同步和异步实现分页查询

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

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

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

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

11. jQuery常用函数

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

上一篇:权限之分页


下一篇:iframe页面无法跳转问题