（javaWeb-百斯特电子商城-在jsp页面中侧边栏点击，右边进行变化（java实现）（持续完善）
1.问题描述：
更新时间：：2020.12.19
javaWeb作业做一个电子商城（功能持续完善中），现要求
1.用户登陆后，还在本界面只显示登陆成功与否,登陆成功后，登陆表单消失。
2.点击左侧菜单栏，右侧进行变化还是当前界面。（详细说明）
（因为前端没有学习ajax所以对要求2用java实现。）
3.购物车功能
3.查询商品详情
4.添加购物车，删除某件商品。
5.商品存放数据库
2.开发环境：+解决思想+建议+注意
开发环境：
1.idea
2.jdk1.8
3.tomcat9
4.maven
5.mysql5.1.7
解决思想
2020.12.19思想：
1.Product商品实体类与数据库的product表对应。id设置为 自增模式
2.商品都是根据type类型（int--1，2，3，4，5）进行查询区分，这样查询的时间会很少。
3.设置的设计一个上下文监听器只保存第一次的查询默认查询的type=1；
4.查询到的商品信息我直接保存到Session中，因为商品的详细信息哪里会再次使用，购物车servlet会再次使用。所有放到session中。
刚开始的思想：
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 这个实体就行了。
购物车部分
5.设计一个上下文监听器只保存第一次的请求
数据库部分：
1.设计数据库 --
1.Product表 ，
private int id;
private String pname;
private double price;
private int stock; //库存
private String type; //类型。
private String img; //url
private String info; // 描述。
未来功能：
1.用户数据库连接，后台管理员可以进行查看（分页功能）
2.界面美化
3.csv
建议：
1.分类存放建议放到servlet内，jsp界面只做显示就行。
2.采用DAO模式，再添加就是Service层
注意：
1.request.getParameter(""); 返回的是String
2.request.getAttribute(""); 返回的是Object
这里我们需要request.getAttribute("");然后强制类型转换成（ContentInfo）
3.Dao
==在
while (rst.next()){
//这个product如果定义在外边就是不行。
Product product = new Product();
product.setId(rst.getInt("id"));
product.setImg(rst.getString("img"));
product.setPname(rst.getString("pname"));
product.setPrice(rst.getDouble("price"));
product.setStock(rst.getInt("stock"));
product.setType(rst.getInt("type"));
product.setInfo(rst.getString("info"));
productArrayList.add(product);
}==
这里进行注意，这个product定义在外部可能出现覆盖问题。
3.问题解决
3.1项目结构
说明：：因为更改内容挺多的，所以下面的jsp,servlet我就不一一列举了。提供给大家一个下载地址，自己下载下载即用。记得star
3.资源下载（不要钱。）
https://gitee.com/nalan-taotao/baisite2
1.数据库的sql文件也已经上传，下载导入即可。欢迎star（）。
3.1下载
4.说明
网页信息虚构，如有冒犯立马修改。
该文持续更新。
5.效果展示
index.jsp
http://localhost:8080/baisite/
登陆失败
登陆成功：
http://localhost:8080/baisite/showProduct?category=102
http://localhost:8080/chapter05/showProduct?category=103
购物车部分：
http://localhost:8080/baisite/jsp/showProduct.jsp
添加几件商品到购物车
说明：（再次提醒）：因为更改内容挺多的，所以下面的jsp,servlet我就不一一列举了。提供给大家一个下载地址，自己下载下载即用。记得star
6 jsp
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 ©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>
6.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);
}
}
6.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 + '\'' +
'}';
}
}
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
