(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 + '\'' +
'}';
}
}