javaWeb-百斯特電子商城-在jsp頁面中側邊欄點擊，右邊進行變化（java實作）（持續完善）-有解無憂

（javaWeb-百斯特電子商城-在jsp頁面中側邊欄點擊，右邊進行變化（java實作）（持續完善）

- 1.問題描述：
- 2.開發環境：+解決思想+建議+注意
- 3.問題解決
- - 3.1專案結構
  - 3.2jsp
  - - index.jsp
    - content.jsp
    - footer.jsp
    - header.jsp
    - leftmenu.jsp
    - topmenu.jsp
  - 3.3 servlet
  - 3.4 pojo
- 4.說明
- 5.效果展示
- 6.資源下載（不要錢，）

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專案結構

專案結構

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版 \r\n" + 
				"  	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版 \r\n" + 
						"  	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

index

登陸失敗

在這里插入圖片描述
登陸成功：

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

6.資源下載（不要錢，）

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204894.html

標籤：其他

上一篇：js常用全域方法

下一篇：連接真機開發安卓(Android)移動app MUI框架——混合式開發（一）（敲詳細）