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参数问题