利用servlet，mysql，vue，mysql，jquery和jsp等相关技术实现淘宝相关功能。

代码小周

已于 2023-08-17 17:28:00 修改

阅读量105

点赞数 1

文章标签： servlet mysql jquery eclipse tomcat 数据结构 json

于 2023-08-17 17:27:06 首次发布

本文链接：https://blog.csdn.net/hhahahhahahhha/article/details/132343945

版权

1效果展示

1.1登录页面

1.2淘宝主页展示

1.3商品详情页

1.4付款页面

1.5订单确认页

1.6收藏页面

1.7开店页面

1.8付款页面

2mysql使用jdbc连接数据库

考虑到事物控制我们将对我在以往的文章中封装的jdbc进一步改写

由于jdbc中事物控制使用的是connection，所以我们采取这样改写：

package BaseDAO;



import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;


public class Base<e> {
    public static String class1 = "com.mysql.jdbc.Driver";
    public static String url = "jdbc:mysql://localhost:3306/xuexi?characterEncoding=utf8";
    public static String username = "root";
    public static String userpwd = "123456";
    private static Connection conn = null;
    private static Statement stmt = null;
    protected static ResultSet rs= null;
    private String  flag="1";
	//用于事务控制
	public Base(Connection conn){
		this.conn=conn;
		flag="2";
	}
	//用于非事务控制
	public Base(){
		try {
			lianjie();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		flag="3";
	}
	
    static {
        try{
            Class.forName(class1);
        } catch (ClassNotFoundException e) {
            throw new RuntimeException(e);
        }
    }
   
    public void lianjie() throws SQLException {
        conn =  DriverManager.getConnection(url,username,userpwd);
        System.out.println("====连接成功====");
    }
    public void chuangjian() throws SQLException {
        stmt = conn.createStatement();
        System.out.println("====创捷成功====");
    }



    //    更新
    public void zhexing(String sql) throws SQLException {
//        lianjie();
        chuangjian();
        System.out.println("=====sql===="+sql);
        stmt.executeUpdate(sql);
        System.out.println("=====sql===="+sql);
        qingchu();
    }


    public List<e> chaxun(String sql) throws SQLException {
//        lianjie();
        chuangjian();
        rs = stmt.executeQuery(sql);
        System.out.println("===============chaxun111=========="+sql);
        List<e> list =  new ArrayList<e>();
        System.out.println("===============chaxun222==========");
        yunxing(list);
        System.out.println(list.size());
        System.out.println("===============yunxing==========");
        qingchu();
        System.out.println("======查询我完毕=====");
        System.out.println("======listsize111111====="+list.size());
        return list;
    }


    public void qingchu (){
        if (rs!=null) {
            try {
                rs.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
            rs=null;
        }
        if (stmt!=null) {
            try {
                stmt.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
            stmt=null;
        }
        if(flag=="3") {
	        if (conn!=null){
	            try {
	                conn.close();
	            } catch (SQLException e) {
	                throw new RuntimeException(e);
	            }
	            conn=null;
	        }
        }
    }


    public void yunxing(List<e> list) throws SQLException {

    }
	
}

 private String  flag="1";
	//用于事务控制
	public Base(Connection conn){
		this.conn=conn;
		flag="2";
	}
	//用于非事务控制
	public Base(){
		try {
			lianjie();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		flag="3";
	}

这段代码主要用于事务控制和非事务控制对于最后资源释放的不同处理。

2.1mysql表的创建

CREATE TABLE `goodsinfo` (
  `goods_id` VARCHAR(50) NOT NULL,
  `goods_name` VARCHAR(100) DEFAULT NULL,
  `small_id` VARCHAR(50) DEFAULT NULL,
  `goods_retail_price` VARCHAR(50) DEFAULT NULL,
  `goods_import_price` VARCHAR(50) DEFAULT NULL,
  `goods_stock` VARCHAR(50) DEFAULT NULL,
  `goods_sale_count` VARCHAR(50) DEFAULT NULL,
  `goods_color_sort` VARCHAR(200) DEFAULT NULL,
  `goods_unit` VARCHAR(50) DEFAULT NULL,
  `goods_introduce` VARCHAR(255) DEFAULT NULL,
  `goods_barcode` VARCHAR(100) DEFAULT NULL,
  `goods_size` VARCHAR(50) DEFAULT NULL,
  `goods_date` VARCHAR(50) DEFAULT NULL,
  `goods_pic` VARCHAR(1024) DEFAULT NULL,
  `brand_id` VARCHAR(50) DEFAULT NULL,
  `quotacount` VARCHAR(5) DEFAULT '-1',
  PRIMARY KEY  (`goods_id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;


INSERT  INTO `goodsinfo`(`goods_id`,`goods_name`,`small_id`,`goods_retail_price`,`goods_import_price`,`goods_stock`,`goods_sale_count`,`goods_color_sort`,`goods_unit`,`goods_introduce`,`goods_barcode`,`goods_size`,`goods_date`,`goods_pic`,`brand_id`,`quotacount`) VALUES ('sp_001','三只松鼠-系列1','坚果类','36.74','9.36','10000','28.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s1.jpg-s2.jpg-s3.jpg-s8.jpg-s5.jpg','三只松鼠','5'),('sp_002','三只松鼠-系列2','坚果类','28.47','9.36','10000','28.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s2.jpg-s2.jpg-s3.jpg-s4.jpg-s5.jpg','三只松鼠','3'),('sp_003','三只松鼠-系列3','坚果类','29.52','9.36','10000','29.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s3.jpg-s20.jpg-s3.jpg-s10.jpg-s5.jpg','三只松鼠','-1'),('sp_004','三只松鼠-系列4','坚果类','28.47','9.36','10000','28.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s4.jpg-s19.jpg-s12.jpg-s4.jpg-s5.jpg','三只松鼠','-1'),('sp_005','三只松鼠-系列5','坚果类','30.47','9.36','10000','25.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s5.jpg-s48.jpg-s16.jpg-s4.jpg-s5.jpg','三只松鼠','-1'),('sp_006','三只松鼠-系列6','坚果类','28.47','9.36','10000','28.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s16.jpg-s2.jpg-s3.jpg-s20.jpg-s5.jpg','三只松鼠','-1'),('sp_007','三只松鼠-系列7','坚果类','56.89','9.36','10000','26.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s18.jpg-s13.jpg-s3.jpg-s6.jpg-s9.jpg','三只松鼠','-1'),('sp_008','三只松鼠-系列8','坚果类','28.47','9.36','10000','27.32','热卖坚果套餐-健康坚果套餐-甜蜜果干套餐-颜值糕点组合-红色锦礼盒组合','袋','三只松鼠好吃又不贵','78613213453','大袋-小袋-盒装-套餐','2017-9-5/2019-9-5','s11.jpg-s14.jpg-s3.jpg-s15.jpg-s5.jpg','三只松鼠','-1');


INSERT  INTO `goodsinfo`(`goods_id`,`goods_name`,`small_id`,`goods_retail_price`,`goods_import_price`,`goods_stock`,`goods_sale_count`,`goods_color_sort`,`goods_unit`,`goods_introduce`,`goods_barcode`,`goods_size`,`goods_date`,`goods_pic`,`brand_id`,`quotacount`) VALUES ('sp_009','拉萨之旅-系列一','旅行社','900.87','900.21','10000','900.12','拉萨三日游-拉萨一周游-拉萨半月游','日','拉萨美丽又好耍','12345667','三日-一周-半月','2022-2-2\2023-2-2','DSC_1870.JPG-DSC_1871.JPG-DSC_1872.JPG-zhou4gif.gif','拉萨好玩','5')

INSERT  INTO goodsinfo(`goods_id`,`goods_name`,`small_id`,`goods_retail_price`,`goods_import_price`,`goods_stock`,`goods_sale_count`,`goods_color_sort`,`goods_unit`,`goods_introduce`,`goods_barcode`,`goods_size`,`goods_date`,`goods_pic`,`brand_id`,`quotacount`) VALUES ('sp_009','拉萨之旅-系列一','旅行社','900.87','900.21','10000','900.12','拉萨三日游-拉萨一周游-拉萨半月游','日','拉萨美丽又好耍','12345667','三日-一周-半月','2022-2-2\2023-2-2','DSC_1870.JPG-DSC_1871.JPG-DSC_1872.JPG-zhou4gif.gif','拉萨好玩','5')

SELECT * FROM goodsinfo

SELECT * FROM goodsinfo 


SELECT * FROM goodsinfo WHERE goods_id=sp_001


INSERT  INTO `goodsinfo`(`goods_id`,`goods_name`,`small_id`,`goods_retail_price`,`goods_import_price`,`goods_stock`,`goods_sale_count`,`goods_color_sort`,`goods_unit`,`goods_introduce`,`goods_barcode`,`goods_size`,`goods_date`,`goods_pic`,`brand_id`,`quotacount`) VALUES ('321','123','123','123','123','123','123','2312','123','231','123','13','123','123','123','2')




CREATE TABLE useinfo (
  useid VARCHAR(50) NOT NULL,
  usename VARCHAR(100) DEFAULT NULL,
  usepwd VARCHAR(50) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8;


INSERT INTO useinfo VALUES (1001,"周加俊",616);





SELECT * FROM useinfo






CREATE TABLE `orderdedail` (
  `orderdetail_id` VARCHAR(50) DEFAULT NULL,
  `order_id` VARCHAR(50) DEFAULT NULL,
  `goods_id` VARCHAR(20) DEFAULT NULL,
  `goods_count` VARCHAR(20) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8;

SELECT * FROM orderdedail

CREATE TABLE `orderexecute` (
  `order_exec_id` VARCHAR(50) DEFAULT NULL,
  `order_id` VARCHAR(50) DEFAULT NULL,
  `status_id` VARCHAR(50) DEFAULT NULL,
  `order_exec_date` VARCHAR(100) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8;

DROP TABLE orderexecute


CREATE TABLE `orderinfo` (
  `order_id` VARCHAR(50) DEFAULT NULL,
  `user_id` VARCHAR(20) DEFAULT NULL,
  `total_price` VARCHAR(20) DEFAULT NULL,
  `rec_id` VARCHAR(50) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8;


SELECT * FROM orderinfo

SELECT * FROM orderexecute

SELECT * FROM orderdedail



CREATE TABLE shopcar (
			 goods_id VARCHAR(50) DEFAULT NULL,
			   goods_name VARCHAR(50) DEFAULT NULL,
			   small_id VARCHAR(50) DEFAULT NULL,
			  goods_retail_price VARCHAR(50) DEFAULT NULL,
			  goods_import_price VARCHAR(50) DEFAULT NULL,
			  goods_stock VARCHAR(50) DEFAULT NULL,
			  goods_sale_count VARCHAR(50) DEFAULT NULL,
			  goods_color_sort VARCHAR(50) DEFAULT NULL,
			 goods_unit VARCHAR(50) DEFAULT NULL,
			  goods_introduce VARCHAR(50) DEFAULT NULL,
			  goods_barcode VARCHAR(50) DEFAULT NULL,
			  goods_size VARCHAR(50) DEFAULT NULL,
			  goods_date VARCHAR(50) DEFAULT NULL,
			   goods_pic VARCHAR(50) DEFAULT NULL,
			   brand_id VARCHAR(50) DEFAULT NULL,
			   quotacount VARCHAR(50) DEFAULT NULL,
			   count1 VARCHAR(50) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8;

主要的就是上述代码中的一些表。

2.2创捷相应的dao层和bean层

例如：商品信息的dao层：

goodsdao：

package BaseDAO;

import java.sql.SQLException;
import java.util.List;

import bean.goods;

public class goodsDAO extends Base<goods>{
	//查找全部	
	public List<goods> fandall() throws SQLException{
		String sql = "select * from goodsinfo";
		return super.chaxun(sql);
	}
	//部分查找
	public List<goods> fandpart(String sql) throws SQLException{
		return super.chaxun(sql);
	}
//	删除
	public void delete1(String goods_id) throws SQLException{
		String sql = "DELETE FROM goodsinfo WHERE goods_id ='"+goods_id+"'";
		super.zhexing(sql);
	}
	  public void yunxing(List<goods> list) throws SQLException {
		  while(rs.next()){
			  String goods_id=rs.getString("goods_id");
			  String goods_name=rs.getString("goods_name");
			  String small_id=rs.getString("small_id");
			  String goods_retail_price=rs.getString("goods_retail_price");
			  String goods_import_price=rs.getString("goods_import_price");
			  String goods_stock=rs.getString("goods_stock");
			  String goods_sale_count=rs.getString("goods_sale_count");
			  String goods_color_sort=rs.getString("goods_color_sort");
			  String goods_unit=rs.getString("goods_unit");
			  String goods_introduce=rs.getString("goods_introduce");
			  String goods_barcode=rs.getString("goods_barcode");
			  String goods_size=rs.getString("goods_size");
			  String goods_date=rs.getString("goods_date");
			  String goods_pic=rs.getString("goods_pic");
			  String brand_id=rs.getString("brand_id");
			  String quotacount=rs.getString("quotacount");
			  goods goodsInfo=new goods(goods_id, goods_name, small_id, goods_retail_price, goods_import_price, goods_stock, goods_sale_count, goods_color_sort, goods_unit, goods_introduce, goods_barcode, goods_size, goods_date, goods_pic, brand_id, quotacount);
			  list.add(goodsInfo);
			}
	    }
}

goodsbean：实现相应的封装对象等。

package bean;

public class goods {
		  String goods_id;
		  String goods_name;
		  String small_id;
		  String goods_retail_price;
		  String goods_import_price;
		  String goods_stock;
		  String goods_sale_count;
		  String goods_color_sort;
		  String goods_unit;
		  String goods_introduce;
		  String goods_barcode;
		  String goods_size;
		  String goods_date;
		  String goods_pic;
		  String brand_id;
		  String quotacount;
		public goods(String goods_id, String goods_name, String small_idString, String goods_retail_price,
				String goods_import_price, String goods_stock, String goods_sale_count, String goods_color_sort,
				String goods_unit, String goods_introduce, String goods_barcode, String goods_size, String goods_date,
				String goods_pic, String brand_id, String quotacount) {
			super();
			this.goods_id = goods_id;
			this.goods_name = goods_name;
			this.small_id = small_idString;
			this.goods_retail_price = goods_retail_price;
			this.goods_import_price = goods_import_price;
			this.goods_stock = goods_stock;
			this.goods_sale_count = goods_sale_count;
			this.goods_color_sort = goods_color_sort;
			this.goods_unit = goods_unit;
			this.goods_introduce = goods_introduce;
			this.goods_barcode = goods_barcode;
			this.goods_size = goods_size;
			this.goods_date = goods_date;
			this.goods_pic = goods_pic;
			this.brand_id = brand_id;
			this.quotacount = quotacount;
		}
		public String getGoods_id() {
			return goods_id;
		}
		public void setGoods_id(String goods_id) {
			this.goods_id = goods_id;
		}
		public String getGoods_name() {
			return goods_name;
		}
		public void setGoods_name(String goods_name) {
			this.goods_name = goods_name;
		}
		public String getSmall_id() {
			return small_id;
		}
		public void setSmall_idString(String small_id) {
			this.small_id = small_id;
		}
		public String getGoods_retail_price() {
			return goods_retail_price;
		}
		public void setGoods_retail_price(String goods_retail_price) {
			this.goods_retail_price = goods_retail_price;
		}
		public String getGoods_import_price() {
			return goods_import_price;
		}
		public void setGoods_import_price(String goods_import_price) {
			this.goods_import_price = goods_import_price;
		}
		public String getGoods_stock() {
			return goods_stock;
		}
		public void setGoods_stock(String goods_stock) {
			this.goods_stock = goods_stock;
		}
		public String getGoods_sale_count() {
			return goods_sale_count;
		}
		public void setGoods_sale_count(String goods_sale_count) {
			this.goods_sale_count = goods_sale_count;
		}
		public String getGoods_color_sort() {
			return goods_color_sort;
		}
		public void setGoods_color_sort(String goods_color_sort) {
			this.goods_color_sort = goods_color_sort;
		}
		public String getGoods_unit() {
			return goods_unit;
		}
		public void setGoods_unit(String goods_unit) {
			this.goods_unit = goods_unit;
		}
		public String getGoods_introduce() {
			return goods_introduce;
		}
		public void setGoods_introduce(String goods_introduce) {
			this.goods_introduce = goods_introduce;
		}
		public String getGoods_barcode() {
			return goods_barcode;
		}
		public void setGoods_barcode(String goods_barcode) {
			this.goods_barcode = goods_barcode;
		}
		public String getGoods_size() {
			return goods_size;
		}
		public void setGoods_size(String goods_size) {
			this.goods_size = goods_size;
		}
		public String getGoods_date() {
			return goods_date;
		}
		public void setGoods_date(String goods_date) {
			this.goods_date = goods_date;
		}
		public String getGoods_pic() {
			return goods_pic;
		}
		public void setGoods_pic(String goods_pic) {
			this.goods_pic = goods_pic;
		}
		public String getBrand_id() {
			return brand_id;
		}
		public void setBrand_id(String brand_id) {
			this.brand_id = brand_id;
		}
		public String getQuotacount() {
			return quotacount;
		}
		public void setQuotacount(String quotacount) {
			this.quotacount = quotacount;
		}
		@Override
		public String toString() {
			return "goods [goods_idString=" + goods_id + ", goods_name=" + goods_name + ", small_idString="
					+ small_id + ", goods_retail_price=" + goods_retail_price + ", goods_import_price="
					+ goods_import_price + ", goods_stock=" + goods_stock + ", goods_sale_count=" + goods_sale_count
					+ ", goods_color_sort=" + goods_color_sort + ", goods_unit=" + goods_unit + ", goods_introduce="
					+ goods_introduce + ", goods_barcode=" + goods_barcode + ", goods_size=" + goods_size
					+ ", goods_date=" + goods_date + ", goods_pic=" + goods_pic + ", brand_id=" + brand_id
					+ ", quotacount=" + quotacount + "]";
		}
		
		  
		  
		  
		  
		  
}

其他的dao层和bean下图所示：

2.3事务控制

package service;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.List;

import BaseDAO.Base;
import BaseDAO.orderdedailDAO;
import BaseDAO.orderexecuteDAO;
import BaseDAO.orderinfoDAO;
import bean.orderdedail;
import bean.orderexecute;
import bean.orderinfo;

public class jiesuan {
	public void jiesuan1(orderinfo orderinfo,List<orderdedail> orderdedailList,orderexecute orderexecute) throws SQLException {
		Connection conn = DriverManager.getConnection(Base.url,Base.username,Base.userpwd);
		boolean flag=conn.getAutoCommit();
		//设置手动提交因为事务控制使用的是手动提交
		conn.setAutoCommit(false);
		try {
			new orderinfoDAO(conn).add(orderinfo);
			for(int i = 0; i<orderdedailList.size();i++) {
				new orderdedailDAO(conn).add(orderdedailList.get(i));
			}
			new orderexecuteDAO(conn).add(orderexecute);
			conn.commit();//提交事务
			conn.setAutoCommit(flag);
		} catch (SQLException e) {
			conn.rollback();//事务回滚
			System.out.println("==========事务以回归");
		}
		
	}
}

3service的创建

主要调用dao层的方法1实现相应的功能和进行相关的逻辑处理

例如goodssevice：

package service;

import java.sql.SQLException;
import java.util.List;

import BaseDAO.goodsDAO;
import bean.goods;

public class goodss {
		//查找全部
	public List<goods> fandall1() throws SQLException {
		return new goodsDAO().fandall();
	}
	//	根据id查找
	public List<goods> fandallid(String goods_id) throws SQLException {
		String sql = "select * from goodsinfo where goods_id = '" + goods_id + "'";
		System.out.println("=======sqlpart===="+sql);
		return new goodsDAO().fandpart(sql);
	}
//	根据name模糊查找
	public List<goods> fandallname(String goods_name) throws SQLException {
		String sql = "select * from goodsinfo where goods_name like '%"+ goods_name +"%'";
		System.out.println("=======sqlpart===="+sql);
		return new goodsDAO().fandpart(sql);
	}
//	根据name查找
	public List<goods> fandname(String goods_name) throws SQLException {
		String sql = "select * from goodsinfo where goods_name='"+ goods_name +"'";
		System.out.println("=======sqlpart===="+sql);
		return new goodsDAO().fandpart(sql);
	}
//	添加一条数据
	public  void add(String[] ids) throws SQLException {
		String sql = "INSERT  INTO goodsinfo(`goods_id`,`goods_name`,`small_id`,`goods_retail_price`,`goods_import_price`,`goods_stock`,`goods_sale_count`,`goods_color_sort`,`goods_unit`,`goods_introduce`,`goods_barcode`,`goods_size`,`goods_date`,`goods_pic`,`brand_id`,`quotacount`) VALUES ('"+ids[0]+"','"+ids[1]+"','"+ids[2]+"','"+ids[3]+"','"+ids[4]+"','"+ids[5]+"','"+ids[6]+"','"+ids[7]+"','"+ids[8]+"','"+ids[9]+"','"+ids[10]+"','"+ids[11]+"','"+ids[12]+"','"+ids[13]+"','"+ids[14]+"','"+ids[15]+"')";
		System.out.println("=======sqlpart===="+sql);
		new goodsDAO().zhexing(sql);
	}
//	删除
	public void delete(String goods_id) throws SQLException{
		new goodsDAO().delete1(goods_id);
	}
}

实现相应的增删改查功能和特定的查找等。

还有很多列例如购物车的service：

package service;

import java.sql.SQLException;
import java.util.List;

import BaseDAO.shopcarDAO;
import bean.shopcar;

public class shopcarservice {
		public List<shopcar> fandall1() throws SQLException {
			return new shopcarDAO().fandall();
		}
		public List<shopcar> fandallid(String goods_id) throws SQLException {
			return new shopcarDAO().fandid(goods_id);
		}
		public void delect1(String goods_id) throws SQLException {
			new shopcarDAO().delete(goods_id);
		}
		
		public void addcar(shopcar shopcar) throws SQLException {
			
			new shopcarDAO().add(shopcar);
		}
		public void updata(String goods_id,String count1) throws SQLException {
			
			new shopcarDAO().updata1(goods_id,count1);
		}
}

还有很多如下图所示：

4.servlet的创建

主要作用是实现前后端数据的交流，和数据在前端的显示：

例如显示的的servlet 商品显示就是淘宝主页下方的商品展示：

package servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

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 bean.goods;
import service.goodss;


/**
 * Servlet implementation class goodsservlet
 */
@WebServlet("/goodsservlet.do")
public class goodsservlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		List<goods> list = null;
		try {
			list = new goodss().fandall1();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		for (int i = 0; i < list.size(); i++) {
			for (String s:list.get(i).getGoods_pic().split("-")) {
				//s=1.jpg  将list中goods_pic的值设置成1.jpg
				list.get(i).setGoods_pic(s);//将第一张图作为主业的图片
				break;
			}
		}
		System.out.println("--------------pic----"+list.get(0).getGoods_pic());
		System.out.println("--------------pic----"+list.get(1).getGoods_pic());
		request.setAttribute("list1", list);
		RequestDispatcher dispatcher = request.getRequestDispatcher("show.jsp");
		dispatcher.forward(request, response);
		
	}

}

这个servlet的工作是从数据库查找的对应的商品信息，在把信息放在一个集合中，通过session发送到jsp通过cforeach遍历显示出来，记得导入cforeach的包，不然会报错，错误信息是图片拒绝访问。

例如进行数据交换的seervlet：

结算页面的servlet：

package servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;

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;

import bean.orderdedail;
import bean.orderexecute;
import bean.orderinfo;
import bean.shopcar;
import bean.useinfo;
import service.jiesuan;
import service.shopcarservice;
import until.SnowFlakeUtils;


/**
 * Servlet implementation class jieservlet
 */
@WebServlet("/jieservlet.do")
public class jieservlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public jieservlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		HttpSession session=request.getSession();
		//1、获取订单信息
		String order_id=SnowFlakeUtils.nextId()+"";
		useinfo useinfo=(useinfo)session.getAttribute("useinfo");
		String useid=useinfo.getUseid();
		String total_price=request.getParameter("total_price");
		String rec_id="addr001";
		orderinfo orderinfo=new orderinfo(order_id, useid, total_price, rec_id);
		
		//2、明细信息
		//ids中存放了选中的产品的id
		String []ids=request.getParameterValues("ids[]");
		System.out.println(ids[0]+"============1=============="+ids.length);
		List<shopcar> car=(List<shopcar>)session.getAttribute("car");
		List<orderdedail> orderdedailList=new ArrayList<orderdedail>();
		for (int i = 0; i < car.size(); i++) {
			for (int j = 0; j < ids.length; j++) {
				if(car.get(i).getGoods_id().equals(ids[j])){
					//说明是选中的商品
					String  orderdetail_id=SnowFlakeUtils.nextId()+"";
					String  goods_id=car.get(i).getGoods_id();
					String  goods_count=car.get(i).getCount1();
					orderdedail orderDetail=new orderdedail(orderdetail_id, order_id, goods_id, goods_count);
					orderdedailList.add(orderDetail);
				}
			}
		}
		
		//3、订单追踪信息
		String order_exec_id=SnowFlakeUtils.nextId()+"";
		String status_id="1";
		String order_exec_date=LocalDateTime.now().toString();
		orderexecute orderexecute=new orderexecute(order_exec_id, order_id, status_id, order_exec_date); 

		try {
			new jiesuan().jiesuan1(orderinfo, orderdedailList, orderexecute);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
		System.out.println("=====car.size===="+car.size());
		System.out.println("=====ids[j]===="+ids[0]);
		for (int i = 0; i < car.size(); i++) {
			for (int j = 0; j < ids.length; j++) {
				if(car.get(i).getGoods_id().equals(ids[j])){
					car.remove(i);
				}
			}
		}
		for(int i = 0 ; i<ids.length;i++) {
			
			try {
				new shopcarservice().delect1(ids[i]);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			
		}
		System.out.println("=====car.size===="+car.size());
		response.getWriter().print("1");
		
		
		
		
		
		
		
	}
}

剩下还有很多servlet如下图所示：

5.jsp页面的书写

5.1登录页面的jsp

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
			background-image: url("beijing4.jpeg");
			background-repeat: no-repeat;
    background-size: cover;
        }
        .login-container {
            width: 600px;
            height: 315px;
			position: absolute;
			top: 50px;
			left: 500px;
            margin: 0 auto;
            margin-top: 10%;
            border-radius: 15px;
            box-shadow: 0 10px 50px 0px rbg(59, 45, 159);
            /* background-color: rgb(95, 76, 194); */
        }
        .left-container {
            display: inline-block;
            width: 330px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            padding: 60px;
            /* background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211)); */
        }
        .title {
            color: #fff;
            font-size: 18px;
            font-weight: 200;
        }
        .title span {
            /* border-bottom: 3px solid rgb(237, 221, 22); */
        }
        .input-container {
            padding: 20px 0;
        }
        input {
            border: 0;
            background: none;
            outline: none;
            color: #fff;
            margin: 20px 0;
            display: block;
            width: 100%;
            padding: 5px 0;
            transition: .2s;
             border-bottom: 1px solid rgb(199, 191, 219); 
        }
        input:hover {
            border-bottom-color: #fff;
        }
        ::-webkit-input-placeholder {
            color: rgb(199, 191, 219);
        }
        .message-container {
            font-size: 14px;
            transition: .2s;
            color: rgb(199, 191, 219);
            cursor: pointer;
        }
        .message-container:hover {
            color: #fff;
        }
        .right-container {
            width: 145px;
            display: inline-block;
            height: calc(100% - 120px);
            vertical-align: top;
            padding: 60px 0;
        }
        .regist-container {
            text-align: center;
            color: #fff;
            font-size: 18px;
            font-weight: 200;
        }
        .regist-container span {
            border-bottom: 3px solid rgb(237, 221, 22);
        }
        .action-container {
            font-size: 10px;
            color: #fff;
            text-align: center;
            position: relative;
            top: 200px;
        }
        .action-container button {
            border: 1px solid rgb(237, 221, 22);
            padding: 10px;
            display: inline;
            line-height: 20px;
            border-radius: 20px;
            position: absolute;
            bottom: 10px;
            left: calc(72px - 20px);
            transition: .2s;
            cursor: pointer;
        }
        .action-container button:hover {
            background-color: rgb(237, 221, 22);
            color: rgb(95, 76, 194);
        }
      
    </style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script>
			function denglu(){
				var hh = $("input[name='username']").val();
				var hh1 = $("input[name='password']").val();
				alert("======32==="+hh);
				$.get("login.do",{"useid":hh,"usepwd":hh1},function(msg){
					if(msg==1){
						window.location.href = 'goodsservlet.do';
					}
					else {
						window.location.reload();
					}
					
					
				});
		}
	</script>
</head>
<body>
    <div class="login-container">
        <div class="left-container">
            <div class="title"><span>登录</span></div>
            <div class="input-container">
                <input type="text" name="username" placeholder="用户名">
                <input type="password" name="password" placeholder="密码">
            </div>
            <div class="message-container">
                <span>忘记密码</span>
            </div>
        </div>
        <div class="right-container">
            <div class="regist-container">
                <span class="regist">注册</span>
            </div>
            <div class="action-container">
                <!-- <span onclick="denglu()">提交</span> -->
				<button onclick="denglu()">提交</button>
            </div>
        </div>
    </div>
</body>
</html>

这里主要通过异步的方式获取到我们在input框输入的账号和密码；

var hh = $("input[name='username']").val();
				var hh1 = $("input[name='password']").val();

这里用到jquery来获取值。然后用$.get()异步发送到login.do。这个sevrlet进行相关逻辑验证。是否登录成功。如果在数据库查到了对应的账号和密码则刷新页面到查询淘宝商品的servlet就是上面的goodsserlet.do。

5.2淘宝主页的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>淘宝首页</title>
<style>
body {
           
			/*  background-image: url("show2.gif"); */
			background-image: url("beijing5.gif");
			background-repeat: no-repeat;
			background-size: 113% auto;
			background-color: #eee9d9;
    }
#zhuti{
	width: 1000px;
	height: 1500px;
	 /* background-color: #ffce11;  */
	 margin-left: 150px;
	
}
#top{
	width: 1200px;
	height: 30px;
	/* background-color: bisque; */
	display: flex;
	justify-content: space-between;
}
#topleft{
	width: 400px;
	height: 30px;
	/* background-color: aquamarine; */
	
}
#topright{
	width: 500px;
	height: 30px;
	/* background-color: black; */
}
#topleft ul{
	padding: 0px;
	margin: 0px;
	display: flex;
	/* justify-content: space-evenly; */
}
#topright ul{
	padding: 0px;
	margin: 0px;
	display: flex;
	justify-content: space-evenly;
}
#topright ul li{
	list-style: none;
}
#topleft ul li{
	list-style: none;
}
#topleft ul li a{
	text-decoration: none;
	font-size: 10px;
}
.erji{
	position: relative;
	z-index: 1000;
	display:none ;
}
.erji ul{
	display: flex;
	flex-direction: column;
	 justify-content: space-evenly; 
	/* background-color: aqua; */
}
#topleft ul li:hover .erji{
	display: block;
}
#topright ul li:hover .erji{
	display: block;
}
#topright ul li a{
	text-decoration: none;
	font-size: 10px;
}
#logo{
	width: 1200px;
	height: 100px;
	/* background-color: #eae8eb; */
	position: relative;
	z-index: 1;
	border-radius: 20px;
	background-image: url("shoucang.jpg");
}
#logoleft{
	width: 400px;
	height: 100px;
	/* background-color: aliceblue; */
	float: left;
	/* background-image: url("logo2.png"); */
}
#logoright{
	position: relative;
	width: 600px;
	height: 100px;
	/* background-color: rebeccapurple; */
	float: left;
	text-align: center;
	margin-top:20px;
}
#logorighttop{
	width: 600px;
	height: 50px;
	/* background-color: white; */
	line-height: 50px;
}
#text1{
	width: 590px;
	height: 30px;
	border-radius: 40px;
}
#button1{
	position: absolute;
	width: 50px;
	height: 35px;
	bottom: 66px;
	right: 2px;
	background-color: crimson;
	border-radius: 40px;
}
#logorightbottom{
	width: 600px;
	height: 30px;
	/* background-color: white;  */
}
#logorightbottom ul{
	padding: 0px;
	margin: 0px;
	display: flex;
	justify-content: space-evenly;
}
#logorightbottom ul li{
	list-style: none;
}
#logorightbottom ul li a{
	text-decoration: none;
	font-size: 10px;
}
#all{
	width: 1200px;
	height: 500px;
	/* background-color: white; */
	position: relative;
}
#allleft{
	position: absolute;
	width: 295px;
	height: 500px;
	/* background-color: aqua; */
	left: 5px;
	border-radius: 20px;
}
#allright{
	width: 900px;
	height: 500px;
	border-radius: 20px;
	/* background-color: black; */
	margin-left: 300px;
	position: absolute;
}
#allrighttop{
	width: 890px;
	height: 50px;
	/* background-color: blue; */
	margin-left: 5px;
	border-radius: 20px;
}
#allrightbottom{
	width: 890px;
	height: 440px;
	/* background-color: red; */
	margin-left: 5px;
	margin-top: 5px;
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
}
#allleft span{
	font-size: 50px;
	margin-top: 10px;
}
#allleft ul{
	padding: 0px;
	margin: 0px;
}
#allleft ul li{
	list-style: none;
	margin-top: 20PX;
}
#allleft ul li a{
	text-decoration: none;
	font-size: 20px;
}
#allleft ul li:hover a{
	color: brown;
}
#allrighttop ul{
	padding: 0px;
	margin: 0px;
	display: flex;
	justify-content: space-evenly;
	line-height: 50px;
}
#allrighttop ul li{
	list-style: none;
}
#allrightbottomleft{
	width: 480px;
	height: 440px;
	/* background-color: yellow; */
	border-radius: 20px;
	position: relative;
}
.luanbotu{
	width: 480px;
	height: 440px;
	position: absolute;
	border-radius: 20px;
	animation: aaa 20s linear infinite;
}
.luanbotu+.luanbotu{
	opacity: 0;
	z-index: 0;
}
#luanbotu1{
	opacity: 1;
	z-index: 1;
}
#luanbotu1{
	animation-delay: 0s;
	background-image: url("zhou2.gif");
  	background-repeat: no-repeat;
  	background-position: center;
  	background-size: cover;
}

#luanbotu2{
	animation-delay: 5s;
	background-image: url("zhou3.gif");
	background-repeat: no-repeat;
  	background-size: cover;
}
#luanbotu3{
	animation-delay: 10s;
	background-image: url("beijing3.webp");
	background-repeat: no-repeat;
  	background-size: cover;
}
#luanbotu5{
	animation-delay: 15s;
	background-image: url("s11.gif");
	background-repeat: no-repeat;
  	background-size: cover;
}

@keyframes aaa{
	0%{
			 opacity:0;
			 z-index:100;
		 }
		 5%{
		     opacity:1;
			 z-index:100;
		 }
		 20%{
		     opacity:1;
			 z-index:100;
		 }
		 25%{
		     opacity:0;
			 z-index:0;
		 }
		 100%{
		     opacity:0;
			 z-index:0;
		 }
}
#qqqq1{
	width: 150px;
	height: 50px;
	position: relative;
	z-index: 100;
	display: flex;
	justify-content: space-evenly;
	top: 350px;
	left: 170px;
}
.qqq1{
	width: 50px;
	height: 50px;
	background-color: aqua; 
	border-radius: 100%;
}
#qqqq2{
	width: 150px;
	height: 50px;
	position: absolute;
	display: flex;
	justify-content: space-evenly;
}
.qqq2{
	width: 50px;
	height: 50px;
	background-color: black; 
	border-radius: 100%;
	animation: aaaa 20s linear infinite;
}
.qqq2{
	opacity: 0;
	z-index: 0;
}
#qq1{
	opacity: 1;
	z-index: 1;
}

#qq1{
	animation-delay: 0s;
}
#qq2{
	animation-delay: 5s;
}
#qq3{
	animation-delay: 10s;
}
#qq4{
	animation-delay: 15s;
}




@keyframes aaaa{
	0%{
			 opacity:0;
			 z-index:100;
		 }
		 5%{
		     opacity:1;
			 z-index:100;
		 }
		 20%{
		     opacity:1;
			 z-index:100;
		 }
		 25%{
		     opacity:0;
			 z-index:0;
		 }
		 100%{
		     opacity:0;
			 z-index:0;
		 }
}
#allrightbottomright{
	width: 400px;
	height: 440px;
	/* background-color: white; */
	border-radius: 20px;
}
#denglutop{
	width: 400px;
	height: 200px;
	/* background-color: chartreuse; */
	background-image: url("denglu1.png");
}
#denglutop1{
	width: 400px;
	height: 100px;
	/* background-color: blueviolet; */
	display: flex;
	justify-content: space-evenly;
}
#denglubottom{
	width: 400px;
	height: 100px;
	/* background-color: brown; */
	display: flex;
	justify-content: space-evenly;
	line-height: 100px;
}
#denglubottom a{
	text-decoration: none;
}
#dengluluanbo{
	width: 400px;
	height: 40px;
	/* background-color: cornflowerblue; */
	border-radius: 20px;
}
.anniu1{
	width: 60px;
	height: 60px;
	border-radius: 30px;
	/* background-color: aqua; */
	margin-top: 20px;
}
.dengluluanbo1{
	width: 400px;
	height: 40px;
	line-height: 40px;
	position: absolute;
	text-align: center;
	animation: aaaaa 15s linear infinite;
}
.dengluluanbo1+.dengluluanbo1{
	opacity: 0;
	z-index: 0;
}
#dengluluanbo2{
	opacity: 1;
	z-index: 1;
}
#dengluluanbo2{
	animation-delay: 0s;
}
#dengluluanbo3{
	animation-delay: 5s;
}
#dengluluanbo4{
	animation-delay: 10s;
}
@keyframes aaaaa{
	0%{
			 opacity:0;
			 z-index:100;
		 }
		 5%{
		     opacity:1;
			 z-index:100;
		 }
		 20%{
		     opacity:1;
			 z-index:100;
		 }
		 25%{
		     opacity:0;
			 z-index:0;
		 }
		 100%{
		     opacity:0;
			 z-index:0;
		 }
}
#cainixihuan{
	width: 1200px;
	height: 40px;
	/* background-color: bisque; */
	line-height: 40px;
}
#cainixihuan span{
	font-size: 25px;
}
#shangping{
	width: 1200px;
	height: 600px;
	/* background-color: white; */
	/* display: flex;
	justify-content: space-evenly; */
	display: flex;
  	flex-wrap: wrap;
}
.shangping1{
	
	height: 200px;
	/* background-color: black; */
	border-radius: 20px;
	margin-top: 2.5px;
	display: flex;
	justify-content: space-evenly;
	flex-basis: 33%; /* 控制每列所占的宽度 */
 	box-sizing: border-box;
}
.shangpingtupian{
	width: 190px;
	height: 190px;
	/* background-color: aqua; */
	border-radius: 20px;
	position: relative;
}
.shangpingtupian img{
	border-radius: 20px;
}
.shangpingjieshao{
	width: 190px;
	height: 190px;
	/* background-color: white; */
	border-radius: 20px;
}
.zhezhao{
	width: 190px;
	height: 190px;
	/* background-color: brown; */
	border-radius: 20px;
	position: absolute;
	top: 0px;
	opacity: 0;
}
.zhezhao:hover{
	opacity: 0.5;
}
.shangpingjieshao span:hover{
	color: red;
}
.shangping1:hover{
	border:5px solid red;
}
#kuanzi{

	width: 580px;
	height: 100px;
	background-color: red;
	border-radius: 20px;
	display: flex;
	display: none;
	

}
#xia{
	margin-top: 15px;
	font-family: Arial;
  	font-size: 20px;
  	color: #333;
}
#xx{
	margin-top: -15px;
	font-family: Arial;
  	font-size: 50px;
  	color: #333;
}
.span1{

	top:-50px;
	margin:0px;
	padding:0px;
	font-family: "Pacifico", cursive;
	font-size: 30px;
}
#xiangqing {
	width: 520px;
	top:20px;
	position: absolute;
/* 	background-color: aqua;  */
  	display: flex;
  	flex-wrap: wrap;
}

.span1 {
  margin-right: 0px; /* 调整每个 span 元素的右侧间距 */
  margin-bottom: -25px; /* 调整每个 span 元素的下方间距 */
}
#span10{
	font-family: "Pacifico", cursive;
	font-size: 50px;
 	margin-left: 10px;
	margin-top: 100px;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function sosuo() {
		
		var s = $("#text1").val();
		if(s.length==0){
			alert("请输入要查询的内容");
		}
		else {
			$.get("sosuo.do",{"sosuo":s},function(msg){
				if(msg==1){
					$("#kuanzi").css("display", "block");
					
					}
			})
	}
	
}
	function xxx(){
		$("#kuanzi").css("display", "none");
	}
	function chaxun(e){
		
		var buttonText = $(e).text();
		alert(buttonText);
		$.get("chaxun.do",{"buttonText":buttonText},function(msg){
			
				window.location.href ="findone.do?goods_id="+msg+"";
			
		});
		
	}
	function shoucangzhong(){
		/* alert("=========shoucangzhong====="); */
		window.location.href ="shoucang.jsp";
	}
	function kai(){
		window.location.href ="kaidian.do";
	}
		
</script>


<body>
<div id="zhuti">
			<div id="top">
				<div id="topleft">
					<ul>
						<li>
						</li><li>
						</li>
						<li></li>
						<li><a href="#">中国大陆</a>
						<div class="erji">
							<ul>
								<li>中国</li>
								<li>美国</li>
								<li>日本</li>
							</ul>
						</div>
						</li>
						<li><a href="#">亲，请登录</a></li>
						<li><a href="#">免费注册</a></li>
						<li><a href="#">手机逛淘宝</a></li>
						<li><a href="#">网页无障碍</a></li>
					</ul>
				</div>
				<div id="topright">
					<ul>
						<li><a href="#">淘宝首页</a>
						<div class="erji">
							<ul>
								<li>中国</li>
								<li>美国</li>
								<li>日本</li>
							</ul>
						</div>
						</li>
						<li><a href="jiesuan.jsp">历史订单</a></li>
						<li><a href="shopcar2.jsp">购物车</a></li>
						<li><a href="#">收藏夹</a>
						<div class="erji">
							<ul>
								<li onclick="shoucangzhong()">中国</li>
								<li>美国</li>
								<li>日本</li>
							</ul>
						</div>
						</li>
						<li><a href="#">商品分类</a></li>
						<li><a href="#">卖家中心</a></li>
						<li><a href="#">联系客服</a></li>
						<li><a href="#">网页导航</a></li>
					</ul>
				</div>
			</div>
			<div id="logo">
				<div id="logoleft">
					<!-- <img style="margin-left: -60px; margin-top: -30px;" src="logo.png" alt=""> -->
					<span id="span10">淘宝一下</span>
				</div>
				<div id="logoright">
					<div id="logorighttop">
						<input type="text" name="" id="text1">
						<button id="button1" onclick="sosuo()">搜索</button>
						<div id="kuanzi">
							<div>
								<span id="xx" onclick="xxx()" style="float: right;">x</span><br>
								<span id="xia" onclick="xia()" style="float: right;">下一行</span>
							</div>
							<div id="xiangqing">
								<c:forEach items="${sosuors}" var="gs1" >
								
									<span class="span1" style="float: left;" onclick="chaxun(this)">${gs1.goods_name}</span>
								
								</c:forEach>
							</div>
						</div>
					</div>
					<div id="logorightbottom">
						<ul>
							<li><a href="#">-淘限时抢</a></li>
							<li><a href="#">零食</a></li>
							<li><a href="#">女袜</a></li>
							<li><a href="#">连衣裙</a></li>
							<li><a href="#">耐克</a></li>
							<li><a href="#">女包包</a></li>
							<li><a href="#">玩具</a></li>
							<li><a href="#">项链</a></li>
							<li><a href="#">自行车</a></li>
							<li><a href="#">床</a></li>
							<li><a href="#">防晒霜</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="all">
				<div id="allleft">
					<span>分类</span><br>
					<ul>
						<li><a href="">女装&nbsp;/&nbsp;内衣&nbsp;/&nbsp;奢品</a></li>
						<li><a href="">女鞋&nbsp;/&nbsp;男鞋&nbsp;/&nbsp;箱包</a></li>
						<li><a href="">美妆&nbsp;/&nbsp;饰品&nbsp;/&nbsp;洗护</a></li>
						<li><a href="">男装&nbsp;/&nbsp;运动/百货</a></li>
						<li><a href="">手机&nbsp;/&nbsp;数码&nbsp;/&nbsp;企业礼品</a></li>
						<li><a href="">家装&nbsp;&nbsp;/&nbsp;电器&nbsp;/&nbsp;车品</a></li>
						<li><a href="">食品&nbsp;/&nbsp;生鲜&nbsp;/&nbsp;母婴</a></li>
						<li><a href="">医药&nbsp;/&nbsp;保健&nbsp;/&nbsp;进口</a></li>
					</ul>
				</div>
				<div id="allright">
					<div id="allrighttop">
						<ul>
							<li>&nbsp;&nbsp;&nbsp;天猫&nbsp;&nbsp;|</li>
							<li>聚划算&nbsp;&nbsp;|</li>
							<li>天猫超市&nbsp;&nbsp;|</li>
							<li>司法拍卖&nbsp;&nbsp;|</li>
							<li>飞猪旅行&nbsp;&nbsp;|</li>
							<li>天天特卖&nbsp;&nbsp;|</li>
							<li>极有家&nbsp;&nbsp;|</li>
							<li>淘宝直播&nbsp;&nbsp;|</li>
						</ul>
					</div>
					<div id="allrightbottom">
						<div id="allrightbottomleft">
							<div class="luanbotu" id="luanbotu1">
							</div>
							<div class="luanbotu" id="luanbotu2"></div>
							<div class="luanbotu" id="luanbotu3"></div>
							<div class="luanbotu" id="luanbotu5"></div>
							<div id="qqqq1">
									<div class="qqq1"></div>
									<div class="qqq1"></div>
									<div class="qqq1"></div>
									<div class="qqq1"></div>
								<div id="qqqq2">
									<div class="qqq2" id="qq1"></div>
									<div class="qqq2" id="qq2"></div>
									<div class="qqq2" id="qq3"></div>
									<div class="qqq2" id="qq4"></div>
								</div>
							</div>
						</div>
						<div id="allrightbottomright">
							<div id="denglutop">
								
							</div>
							<div id="denglutop1">
								<button class="anniu1">登录</button>
								<button class="anniu1">注册</button>
								<button class="anniu1" onclick="kai()">开店</button>
							</div>
							<div id="denglubottom">
								<a href="#">宝贝收藏</a>
								<a href="#">买过的店</a>
								<a href="#">收藏的店</a>
								<a href="#">我的足迹</a>
							</div>
							<div id="dengluluanbo">
								<div class="dengluluanbo1" id="dengluluanbo2"><span></span>淘宝打击流量造假,黑公关，网络......</div>
								<div class="dengluluanbo1" id="dengluluanbo3"><span></span>疫情场景淘宝卖家指导手册</div>
								<div class="dengluluanbo1" id="dengluluanbo4"><span></span>淘宝疫情影响地区发货时间要求调整</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="cainixihuan">
					<span>猜你喜欢</span>
			</div>
			<div id="shangping">
				
				<c:forEach items="${list1}" var="gs" >
	 				<div class="shangping1">
						<div class="shangpingtupian"> 
						<a href="findone.do?goods_id=${gs.goods_id}">
						<img style="width: 190px;height: 190px;" src="showimage.do?image_id=${gs.goods_pic}" alt="">
						</a>
						<!-- <div class="zhezhao"></div> -->
						</div>
						<div class="shangpingjieshao"><span>${gs.goods_name}</span><p style="margin-left:20px;" class="price">价格: <span>${gs.goods_retail_price} </span></p>
						<a href="shopcar1.do?goods_id=${gs.goods_id}">加入购物车</a>
						
						</div>
					</div>
				</c:forEach>
			
				
				<!-- <div class="shangping1">
					<div class="shangpingtupian"><img style="width: 190px;height: 190px;" src="/合肥培训班/图片/06.jpg" alt="">
					<div class="zhezhao"></div>
					</div>
					<div class="shangpingjieshao"><span>菜板家用抗菌防霉切菜板</span></div>
				</div>
				<div class="shangping1">
					<div class="shangpingtupian"><img style="width: 190px;height: 190px;" src="/合肥培训班/图片/07.jpg" alt="">
					<div class="zhezhao"></div>
					</div>
					<div class="shangpingjieshao"><span>菜板家用抗菌防霉切菜板</span></div>
				</div>
			</div> -->
		</div>
	</div>
</body>
</html>

这个页面主要包括导航栏的一些操作例如:历史订单，收藏夹，购物车等；还有轮播图和开店额注册按钮；然后就是商品展示区域。

还有很多jsp和其他的代码请联系代码小周领取！！！！！！！！！！！！！！！！！！！

今天的分享就到这，下一期分享在这个项目工程中的一些细节操作和遇到的一些问题和解决方法。

代码小周

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
利用servlet，mysql，vue，mysql，jquery和jsp等相关技术实现淘宝相关功能。

如果在数据库查到了对应的账号和密码则刷新页面到查询淘宝商品的servlet就是上面的goodsserlet.do。这个servlet的工作是从数据库查找的对应的商品信息，在把信息放在一个集合中，通过session发送到jsp通过cforeach遍历显示出来，记得导入cforeach的包，不然会报错，错误信息是图片拒绝访问。然后就是商品展示区域。今天的分享就到这，下一期分享在这个项目工程中的一些细节操作和遇到的一些问题和解决方法。还有很多jsp和其他的代码请联系代码小周领取！主要的就是上述代码中的一些表。
复制链接

扫一扫