如何从数据库数据获取到前台页面

Java高级框架 专栏收录该内容
7 篇文章 0 订阅

最近在做有个简单的电商平台,想做一个功能就是在搜索商品的时候通过数据库查找,最后把数据直接显示在前台页面上。我自己在完成功能的时候通过了俩种方式实现(基于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>&nbsp;&nbsp;
	                        <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>&nbsp;&nbsp;<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;
	}

 

返回结果

 

 

三、启发

今天听到班里大牛在群里分析的类似的功能

感觉也是可以从过滤器进行获取数据。

 

 

 

  • 9
    点赞
  • 12
    评论
  • 93
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值