标签：异步 layer pageno IDEA content paramMap Integer page 众筹
1.弹层组件 — layer
-
常用方法
①提示:
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); -
小图标
-
使用
-
放置位置：/WEB-INF/jsp/login.jsp
引入：
<script src="${APP_PATH}/jquery/layer/layer.js"></script>
-
-
代码参考：
2.用户分步查询 — 同步请求方式
- 时序图
- 实现
-
连接：
<a href="${APP_PATH}/user/index.htm"><i class="glyphicon glyphicon-user"></i> 用户维护</a> -
handler：
-
列表页面：迭代标签:与for循环是一个道理
-
3.Page类 — 封装分页信息
定义Page类
4.显示分页导航条
- 分页条：
- 事件处理（跳转页面）
- 效果：
5. html和js可以嵌入后台代码
-
html可以嵌入后台代码
-
JS可以嵌入后台代码
6. 用户分步查询 - 分析— 异步请求方式
-
同步查询：
如果数据量大的场合，用户等待的时间会变长，所以用户体验效果会非常的差 -
异步查询：
用户希望先看到页面，然后将查询数据的加载效果提示出来 -
异步请求的时序图
- 发起同步连接请求,跳转列表页面(无数据展示,只是静态页面展示)
- 发起异步ajax请求,加载数据,局部刷新页面
-
分页方式
- 物理分页
- 根据pageno和pagesize,每次都通过数据进行加载数据.
- 相当于延迟加载操作
- 逻辑分页
- 表示将数据库所有数据查询出来存放到内存中,然后,根据分页信息从内存中获取每一页数据
- 相当于立即加载操作
- 物理分页
7. 用户分步查询 - 实现— 异步请求方式
-
定义控制器
@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; } -
定义业务层
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); } } -
定义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(); } -
定义Mybatis配置文件
-
定义页面
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. 模糊查询 - 注意事项
-
动态查询语句
-
SQL中占位符不能在单引号中，否则，会以?进行查询数据
‘%#{param}%’
‘%?%’ -
SQL中不能使用加号进行字符串拼接，加号是用来做运算的
‘%’+‘D’+’%’
-
MyBatis进行拼串,拼串会出现 SQL 注入情况 ,例如：“or 1=1”
‘%${param}%’
-
使用内置方法进行拼串
concat(’%’,#{param},’%’)
-
查询条件值本身为%,查询出所有的数据
concat(’%’,#{param},’%’) => ‘%%%’
‘%%%’ 使用转译字符再进行查询。 -
#和\是一个意思，表示转译。使用#代替\
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 ‘@’ -
常见的SQL文,在Oracle中，使用两个竖线用来表示字符串拼接，MySQL中没有这样的语法。
select * from t_user where username like ‘%’|| #{param} ||’%’
- SQL参数问题
- SQL注入问题
- SQL拼接问题
- SQL参数问题
9. JS中局部变量和全局变量的区别
10. java中replaceAll方法替换字符串中的反斜杠
11. jQuery常用函数
标签：异步,layer,pageno,IDEA,content,paramMap,Integer,page,众筹 来源： https://blog.csdn.net/qq_41884677/article/details/98883887
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。