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.問題描述：

javaWeb作業做一個電子商城（功能持續完善中），現要求
1.用戶登陸后，還在本界面只顯示登陸成功與否(簡單不解釋)
2.點擊左側選單欄，右側進行變化還是當前界面，（詳細說明）
（因為前端沒有學習ajax所以對要求2用java實作，）

2.開發環境：+解決思想+建議+注意

開發環境：
1.eclipse ()
2.jdk8

解決思想
1.jsp界面是通過 <%@ include file="JSP/xxx.jsp" %>
拼接在一起的，
2.從 leftmenu.jsp我們可以看見：<li><a href="showProduct?category=101">手機數碼</a></li>
采用的是和doGet請求類似的方式 ，請求的url是 {showProduct} （相對），帶有一個引數category  
可以用這個引數來進行分情況顯示，
3.寫一個ContentInfo的類（因為還沒有學pojo）來存放右側的資訊，右側資訊大體可以分為5部分，分別為 標題、圖片1、圖片2、正文1、正文2.
然后在寫一個showProductServlet來進行分類存放資訊，然后傳輸這個ContentInfo這個物體就行了，

建議：
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" %>

<% 
	ContentInfo contentInfo = new ContentInfo(); 
	
	if((ContentInfo)request.getAttribute("contentInfo")==null){
		contentInfo.setHeader("第一次沒有");
		contentInfo.setImg1("./images/phone.jpg");
		contentInfo.setImg2("./images/comp.jpg");
		contentInfo.setInfo1("蘋果(APPLE)iphone 6 A1589 16G版 \r\n" + 
				"  	4G 手機（金色）TD-LTE/TD-SCDMA/GSM特價：5288元");
		contentInfo.setInfo2("聯想(Lenovo)G460AL-ITH15.0英寸\r\n" + 
				"  	筆記本電腦（i3-370m 2G 500G 512獨顯DVD刻錄 攝像頭 Win7）特價：3199元");
	}else{
		contentInfo= (ContentInfo)request.getAttribute("contentInfo");
		System.out.println("----這里表示有請求了--，");
	}
	
%>

<!--這是手機數碼的-->
<table border='0'>
  <tr>
    <td colspan="2">
    	<b><i>${sessionScpe.message}</i></b></td>
  </tr>
  <tr>
  <td colspan="4">
    	<%=contentInfo.getHeader() %> 
    	</td> 
  </tr>
  <tr>
  	<td width = 20 %><img src = <%=contentInfo.getImg1() %>></td>
  	<td><p style="text-indent:2em"><%=contentInfo.getInfo1() %></p>
  	</td>
  	
  	<td width=20 %><img src=<%=contentInfo.getImg2() %>></td>
  	<td><p style ="text-indent:2em"><%=contentInfo.getInfo2() %></p>


  	</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>
	<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 }
	
		<br>
	
	<br>


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

/**
 * 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");
		
		if("admin".equals(username)&& "admin".equals(password)) {
			request.setAttribute("userLoginInfo", "登陸成功歡迎來到百斯特網上商店！");
			RequestDispatcher rd = request.getRequestDispatcher("/index.jsp");
			rd.forward(request, response);		
		}else {
			request.setAttribute("userLoginInfo", "賬號或密碼不正確，請重新登陸!");
			RequestDispatcher rd = request.getRequestDispatcher("/index.jsp");
			rd.forward(request, response);		
			
		}
	}

}

ShowProduct.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 com.wang.pojo.ContentInfo;

/**
 * Servlet implementation class ShowProduct
 */
@WebServlet("/showProduct")
public class ShowProduct 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();
		if(category!=null) {
			switch(category)
			{
			case "101" : 
				contentInfo.setHeader("手機數碼");
				contentInfo.setImg1("./images/phone.jpg");
				contentInfo.setImg2("./images/comp.jpg");
				contentInfo.setInfo1("蘋果(APPLE)iphone 6 A1589 16G版 \r\n" + 
						"  	4G 手機（金色）TD-LTE/TD-SCDMA/GSM特價：5288元");
				contentInfo.setInfo2("聯想(Lenovo)G460AL-ITH15.0英寸\r\n" + 
						"  	筆記本電腦（i3-370m 2G 500G 512獨顯DVD刻錄 攝像頭 Win7）特價：3199元");
				System.out.println("----這里Header設定成了 手機數碼，--");
				break;
			case "102" : 
				contentInfo.setHeader("家用電器，");
				contentInfo.setImg1("./images/tv.png");
				contentInfo.setImg2("./images/tv.png");
				contentInfo.setInfo1("濤濤tv不要錢，");
				contentInfo.setInfo2("朱朱tv要！");
				
				break;
			case "103" :  
				contentInfo.setHeader("汽車用品，");
				contentInfo.setImg1("./images/car.png");
				contentInfo.setImg2("./images/car.png");
				contentInfo.setInfo1("濤濤賣捷豹，買一送一");
				contentInfo.setInfo2("朱朱賣捷豹，買一送二");
				
				break;
			case "104" : 
				contentInfo.setHeader("服飾鞋帽，");
				contentInfo.setImg1("./images/nike.png");
				contentInfo.setImg2("./images/nike.png");
				contentInfo.setInfo1("nike就是好，");
				contentInfo.setInfo2("nike還行吧，");
				
				break;
			case "105" :  
				contentInfo.setHeader("運動健康，");
				contentInfo.setImg1("./images/basketball.jpg");
				contentInfo.setImg2("./images/basketball.jpg");
				contentInfo.setInfo1("NBA專用");
				contentInfo.setInfo2("濤濤賣籃球，");
				
				break;
			default: 

			}
				
		}
		request.setAttribute("contentInfo", contentInfo);
		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;

public class ContentInfo {
	private String Header;  //這是content最上面描述，例如：買手機
	private String img1;   //圖片1
	private String img2;   //圖片2
	private String info1;  //圖片1描述
	private String info2;  //圖片2描述
    public String getHeader() {
        return Header;
    }

    public void setHeader(String header) {
        Header = header;
    }

    public String getImg1() {
        return img1;
    }

    public void setImg1(String img1) {
        this.img1 = img1;
    }

    public String getImg2() {
        return img2;
    }

    public void setImg2(String img2) {
        this.img2 = img2;
    }

    public String getInfo1() {
        return info1;
    }

    public void setInfo1(String info1) {
        this.info1 = info1;
    }

    public String getInfo2() {
        return info2;
    }

    public void setInfo2(String info2) {
        this.info2 = info2;
    }

    @Override
    public String toString() {
        return "Content{" +
                "Header='" + Header + '\'' +
                ", img1='" + img1 + '\'' +
                ", img2='" + img2 + '\'' +
                ", info1='" + info1 + '\'' +
                ", info2='" + info2 + '\'' +
                '}';
    }
	
	

}

4.說明

網頁資訊虛構，如有冒犯立馬修改，
該文持續更新，

5.效果展示

index.jsp
http://localhost:8080/chapter05/index.jsp
在這里插入圖片描述

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

在這里插入圖片描述

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/houduan/204375.html

標籤：python

上一篇：js常用全域方法

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