javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

1.问题描述:

更新时间::2020.11.6

javaWeb作业做一个电子商城(功能持续完善中),现要求
1.用户登陆后,还在本界面只显示登陆成功与否,登陆成功后,登陆表单消失。
2.点击左侧菜单栏,右侧进行变化还是当前界面。(详细说明)
(因为前端没有学习ajax所以对要求2用java实现。)

2.开发环境:+解决思想+建议+注意

开发环境:
1.eclipse ()
2.jdk8
3.tomcat9

解决思想
1.jsp界面是通过 <%@ include file="JSP/xxx.jsp" %>
拼接在一起的。
2.从 leftmenu.jsp我们可以看见:<li><a href="showProduct?category=101">手机数码</a></li>
采用的是和doGet请求类似的方式 ,请求的url是 {showProduct} (相对),带有一个参数category  
可以用这个参数来进行分情况显示。
3.右侧信息进行分类一个标题(这个不用服务器返回,),右侧商品信息一个ContentInfo的类(两个属性 img  and info )来存放右侧的信息。
//这里进行说明,为什么这个类只有两个属性,因为右侧的商品可能有100个,我们不能将其归为一个类,所有继续分,就是一个商品对应一个实例对象。
//再将所有商品加到一个 ArrayList<ContentInfo> list内部就行了。
4.写一个showProductServlet来进行分类存放信息,然后传输这个list 这个实体就行了。

建议:
1.分类存放建议放到servlet内,jsp界面只做显示就行。


注意:
1.request.getParameter(""); 返回的是String
2.request.getAttribute(""); 返回的是Object
	这里我们需要request.getAttribute("");然后强制类型转换成(ContentInfo)







3.问题解决

3.1项目结构

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

3.2jsp

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百斯特电子商城</title>
<link href="css/style.css" rel="stylesheet" type ="text/css"/>
</head>

<body>
	<div id= "container">
		<div><br></div>
		<div id="header"><%@ include file="JSP/header.jsp" %></div>
		<div><br><br><br></div>
		<div id="topmenu">
			<%@ include file="JSP/topmenu.jsp" %>
		</div>
		<div><br><br></div>
		<div id="mainContent" class= "clearfix">
			<div id="leftmenu">
				<%@ include file="JSP/leftmenu.jsp" %>
			</div>
			<div id="content">
				<%@ include file="JSP/content.jsp" %>
			</div>
		</div>
		<div id = "footer">
			<%@ include file="JSP/footer.jsp" %>
		</div>
	
	</div>

</body>
</html>

content.jsp

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.wang.pojo.ContentInfo" %>
<%@ page import="java.util.ArrayList" %>

<% 
	ArrayList<ContentInfo> list =null; 
	list = (ArrayList)request.getAttribute("list");
	ContentInfo contentInfo = new ContentInfo();
	
	if(list==null){
		//这是因为刚开始进入index的时候,就是null如果不这样设置就会空指针异常了。
		list= new ArrayList<ContentInfo>();
		list.add(new ContentInfo("./images/phone.jpg","苹果(APPLE)iphone 6 A1589 16G版 rn" + 
				"  	4G 手机(金色)TD-LTE/TD-SCDMA/GSM特价:5288元"));//将信息加到list中
		
		list.add(new ContentInfo("./images/comp.jpg","涛涛牌电脑一个"
				+ "顶俩"
				+ "卖了了!"));
	}

%>

<!--这是手机数码的-->
<table border='0'>
  <tr>
    <td colspan="2">
    	<b><i>${sessionScpe.message}</i></b></td>
  </tr>
  <tr>
  <td colspan="4">
    	<%  
    	//这里进行标题判断
    	String category = request.getParameter("category");
    	if(category==null){
    		out.println("<h2>手机数码栏</h2>");
    	}else{
    		switch(category){
    		case "101":
    			out.println("<h2>手机数码栏</h2>");
    			break;
    		case "102":
    			out.println("<h2>家用电器栏</h2>");
    			break;
			case "103":
				out.println("<h2>汽车用品栏</h2>");
    			break;
    		case "104":
    			out.println("<h2>服饰鞋帽栏</h2>");
    			break;
    		case "105":
    			out.println("<h2>运动健康栏</h2>");
    			break;
    			
    		default:

    		}

    	}%> 
    	</td> 
  </tr>
  <tr>
  <%
  //这里进行商品遍历。
  for(int i=0;i<list.size();i++){
	 contentInfo = list.get(i); 
	%>
	   	<td ><img src = <%=contentInfo.getImg() %> width="100" height="100"></td>
  		<td><p style="text-indent:2em"><%=contentInfo.getInfo() %></p>
  		</td>

  <% }%>


  	</td>
  </tr>
</table>





footer.jsp

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<hr/>
<p align ="center">关于我们!联系我们!人才招聘|友情链接</p>
<p align ="center">Copyright &copy;2018 百斯特电子商城公司,8899123</p>   

header.jsp

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script language ="JavaScript" type= "text/javascript">
	function register(){
		open("/helloweb/register.jsp","register")
		
	}
</script>
<p><img src ="./images/head.jpg" alt='test'/></p>

leftmenu.jsp

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<p><b>商品分类</b></p>
<ul>
	<li><a href="showProduct?category=101">手机数码</a></li>
	<li><a href="showProduct?category=102">家用电器</a></li>
	<li><a href="showProduct?category=103">汽车用品</a></li>
	<li><a href="showProduct?category=104">服饰鞋帽</a></li>
	<li><a href="showProduct?category=105">运动健康</a></li>

</ul>




topmenu.jsp

这里对登陆成功的用户进行隐藏登陆界面。

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<table border='0'>
	<tr>
	
		<td><a href="index.jsp">首页</a></td>
		<td><a href="showProduct?category=101">手机数码</a></td>
		<td><a href="showProduct?category=102">家用电器</a></td>
		<td><a href="showProduct?category=103">汽车用品</a></td>
		<td><a href="showProduct?category=104">服饰鞋帽</a></td>
		<td><a href="showProduct?category=105">运动健康</a></td>
		<td><a href="showOrder">我的订单</a></td>
		<td><a href="showCart">查看购物车</a></td>
	</tr>
	<% 
	String LoginFlag = (String)session.getAttribute("LoginFlag");
	System.out.println("------LoginFlag--"+LoginFlag);
	if(LoginFlag==null || LoginFlag!="yes")
	{ 
	%>
	<form action="login.do" method="post" name="login">
		用户名<input type="text" name="username" size="13"/>
		密 码<input type="password" name="password" size="13"/>
		<input type ="submit" value="sumbit">
		<input type ="button" value="注册" onclick= "register();">
	
	</form>
		<br>
	<% } %>
		${userLoginInfo }


</table>


3.3 servlet

LoginServlet.java

package user;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doPost(request,response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		
		HttpSession session = request.getSession();
		
		if("admin".equals(username)&& "admin".equals(password)) {
			request.setAttribute("userLoginInfo", "登陆成功欢迎来到百斯特网上商店!");
			session.setAttribute("LoginFlag", "yes");
			RequestDispatcher rd = request.getRequestDispatcher("/index.jsp");
			rd.forward(request, response);		
		}else {
			request.setAttribute("userLoginInfo", "账号或密码不正确,请重新登陆!");
			RequestDispatcher rd = request.getRequestDispatcher("/index.jsp");
			rd.forward(request, response);		
			
		}
	}

}

ShowProductServlet.java

弟弟:
我不太明白这个ArrayList<ContentInfo> list, 用那个add()就会出现覆盖现象,然后我那个就设置了有参构造(ContentInfo哪里)。
这里用的时候就直接
list.add(new ContentInfo("./images/tv.jpg","涛涛tv点个关注。"))
package user;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.wang.pojo.ContentInfo;

/**
 * 这是接收lefmenu中a标签中的超链接的servlet
 * 假设这里每个content界面都有2个商品(暂时)
 */
@WebServlet("/showProduct")
public class ShowProductServlet extends HttpServlet {
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String category = (String)request.getParameter("category");
		System.out.println("----category--"+category);
		ContentInfo contentInfo = new ContentInfo();
		ArrayList<ContentInfo> list = new ArrayList<ContentInfo>();
		if(category!=null) {
			switch(category)
			{
			case "101" : 
				//对这个ArrayList.add不熟悉(以后看。)
				list.add(new ContentInfo("./images/phone.jpg","苹果(APPLE)iphone 6 A1589 16G版 rn" + 
						"  	4G 手机(金色)TD-LTE/TD-SCDMA/GSM特价:5288元"));//将信息加到list中
				
				list.add(new ContentInfo("./images/comp.jpg","涛涛牌电脑一个"
						+ "顶俩"
						+ "卖了了!"));
				
				break;
			case "102" :

				list.add(new ContentInfo("./images/tv.jpg","涛涛tv点个关注。"));//将信息加到list中
				list.add(new ContentInfo("./images/refrigerator.jpg","涛涛冰箱-交个朋友"));

				break;
			case "103" : 
				list.add(new ContentInfo("./images/car.jpg","涛涛捷豹-写了评论。"));//将信息加到list中

				list.add(new ContentInfo("./images/car.jpg","涛涛捷豹-不写就是不写。"));

				break;
			case "104" : 

				list.add(new ContentInfo("./images/nike.jpg","涛涛nike就是好。"));//将信息加到list中

				list.add(new ContentInfo("./images/adidas.jpg","涛涛adidas-反正有nike的地方就有我,我也不知道为啥。"));

				break;
			case "105" :

			list.add(new ContentInfo("./images/basketball.jpg","NBA专用。"));//将信息加到list中

			list.add(new ContentInfo("./images/basketball.jpg","不找图了,爱咋地咋地"));

			break;
			default: 

			}
				
		}
		request.setAttribute("list", list);//这个不用放到类里面了
		request.setAttribute("category", category);
		RequestDispatcher rd = request.getRequestDispatcher("/index.jsp");
		rd.forward(request,response);
		
		
		
		
}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}


3.4 pojo

ContentInfo.java

package com.wang.pojo;
/*
 * 存放商品信息的类,
 * 如果一个界面右侧有100个商品,
 * 这个就应该将这100个商品再次进行抽象,
 * 而不能将其看做一个整体
 * 所有这里每个商品只有两个属性图片+图片描述(后续再进行添加。)
 * 符合javaBean的规范。
 */

public class ContentInfo {

	private String img;   //图片
	private String info;  //图片描述
	
	public ContentInfo() {}
	public ContentInfo(String img,String info) {
		this.img=img;
		this.info=info;
	}
	

    public String getImg() {
        return img;
    }

    public void setImg(String img) {
        this.img = img;
    }

 
    public String getInfo() {
        return info;
    }

    public void setInfo(String info) {
        this.info = info;
    }

   
    @Override
    public String toString() {
        return "Content{" +
                ", img='" + img + ''' +
                ", info='" + info + ''' +
                '}';
    }
	
	

}


4.说明

网页信息虚构,如有冒犯立马修改。
该文持续更新。

5.效果展示

index.jsp

http://localhost:8080/chapter05/index.jsp

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

登陆失败

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)
登陆成功:
javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

http://localhost:8080/chapter05/showProduct?category=102

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

http://localhost:8080/chapter05/showProduct?category=103

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

http://localhost:8080/chapter05/showProduct?category=104

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

http://localhost:8080/chapter05/showProduct?category=105

javaWeb-百斯特电子商城-在jsp页面中侧边栏点击,右边进行变化(java实现)(持续完善)

6.资源下载(不要钱。)

https://download.csdn.net/download/qq_44218805/13089158
匿名

发表评论

匿名网友