最近在做有个简单的电商平台,想做一个功能就是在搜索商品的时候通过数据库查找,最后把数据直接显示在前台页面上。我自己在完成功能的时候通过了俩种方式实现(基于SSM框架)完成,在此将我们的想法和代码分享出来,供自己和他人参考。
电影的数据库数据:
ps:imagepath 存放的图片的地址
一、通过EL表达式和简单点SSM框架知识
1、首先,先从数据库中获取数据,并把数据返回给前台页面
控制器代码
@RequestMapping("/selmovie")
public String selAllMovie(HttpServletRequest req){
//获取所有的电影信息
List<Movie> lm = moiveServiceImpl.selAllMovie();
if(lm!=null){
for (Movie movie : lm) {
System.out.println(movie);
}
}
req.setAttribute("movie", lm);
return "movie.jsp";
}
2、在前台中显示(通过EL表达式和JSTL标准标签库)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'movie.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<style>
*{margin: 0;padding: 0}
#movie{width: 690px; margin: 40px auto}
#movie ul li{list-style-type: none;float: left;width: 150px; height: 270px;margin: 10px 10px; position: relative}
#movie ul li a div{list-style-type: none;float: left;width: 120px;}
#movie ul li a p{position: absolute;top:200px;width: 150px;height: 70px;padding: 5px;box-sizing: border-box;font-size: 15px;}
#movie ul li a p .grade{ color: #ffba5a ;font-weight: bold}
</style>
<body>
<div id="movie">
<ul>
<!--jstl标准标签库的循环-->
<!--El表达式可以获取到四大作用域中的信息-->
<c:forEach items="${movie }" var="mm">
<li>
<a>
<div>
<img src="${mm.imagepath }" width="150px" height="200px">
</div>
<p>
<span>${mm.name }</span>
<span class="grade"> ${mm.average }</span>
</p>
</a>
</li>
</c:forEach>
</ul>
</div>
</body>
</html>
3、添加一个触发点;
因为我的页面必须先访问控制器才能返回数据到movie.jsp页面。所有需要一个网页先去访问控制器
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'movie2.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<!-- 触发点 -->
<a href="selmovie">获取所有电源</a>
</body>
</html>
返回结果:
二、通过ajax异步请求获取后台数据
1、在前端异步请求控制器并获取到电源数据
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'movieajax.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<style>
*{margin: 0;padding: 0}
#movie{width: 690px; margin: 40px auto}
#movie ul li{list-style-type: none;float: left;width: 150px; height: 270px;margin: 10px 10px; position: relative}
#movie ul li a div{list-style-type: none;float: left;width: 120px;}
#movie ul li a p{position: absolute;top:200px;width: 150px;height: 70px;padding: 5px;box-sizing: border-box;font-size: 15px;}
#movie ul li a p .grade{ color: #ffba5a ;font-weight: bold}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
//代码自动执行
$(function(){
var movies;
var movie ="";
/* 异步请求数据 */
$.ajax({
type : "get",
dataType : "json",
url : "selmovie1",
error : function(){
alert("请求失败");
},
success : function(movies) {
//movie为json数据
//通过$.each遍历json数据
$.each(movies,function(key,obj){
//拼接字符串
movie +="<li><a><div><img src='"+obj.imagepath+"' width='150px' height='200px'><p><span>'"+obj.name+"'</span> <span class='grade'>'"+obj.average+"'</span></p></div></a></li>";
});
}
});
//这块我本是想等到上面函数执行完在执行下面的代码,但是上面获取数据以及拼接字符串太耗费时间,总是优先执行下面的代码
//所以暂时想出此方法来完成功能,往后在进行修改
setTimeout(function() {
//将拼接好的字符串加入到html代码中去
$("#movie ul").html(movie);
},1000);
})
</script>
<body>
<div id="movie">
<ul>
</ul>
</div>
</body>
</html>
2、在控制器中返回json格式的数据
@RequestMapping(value="/selmovie1",produces="application/json;charset=utf-8")
@ResponseBody
public List<Movie> selAllMovie1(HttpServletRequest req){
List<Movie> lm = moiveServiceImpl.selAllMovie();
return lm;
}
返回结果
三、启发
今天听到班里大牛在群里分析的类似的功能
感觉也是可以从过滤器进行获取数据。