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

最新推荐文章于 2024-05-28 17:33:08 发布

以南_ttrg

最新推荐文章于 2024-05-28 17:33:08 发布

阅读量2.8w

点赞数 14

分类专栏： Java高级框架

本文链接：https://blog.csdn.net/qq_41965731/article/details/89856750

版权

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;
	}

返回结果

三、启发

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

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

以南_ttrg

关注

14
点赞
踩
159

收藏

觉得还不错? 一键收藏
15
评论
如何从数据库数据获取到前台页面

最近在做有个简单的电商平台，想做一个功能就是在搜索商品的时候通过数据库查找，最后把数据直接显示在前台页面上。我自己在完成功能的时候通过了俩种方式实现（基于SSM框架）完成，在此将我们的想法和代码分享出来，供自己和他人参考。电影的数据库数据：ps:imagepath 存放的图片的地址一、通过EL表达式和简单点SSM框架知识1、首先，先从数据库中获取数据，并把数据返回给前台页...
复制链接

扫一扫

专栏目录