《简易商城购物系统》

最新推荐文章于 2024-03-02 20:09:21 发布
最新推荐文章于 2024-03-02 20:09:21 发布
阅读量2.5k 收藏 26
点赞数 2

终极完美《简易商城购物车系统》揭秘--MVC设计模式

《简易商城购物系统》

大家经常去网上够物，对网上所谓的购物车应该不会陌生吧，那么今天我们就用使用javaweb的MVC设计模式来实现一个网上购物系统的案例。

最终效果如下：

image

 

三层架构的简单介绍

image

一、开发步骤

首先要搞清楚你要做什么，然后：

1.搭建开发环境

jstl.jar

standard.jar

2.建立类包

3.建立数据库

使用内存数据库

总之，此购物车的实现，使用的是MVC设计模式，MVC设计模式的思路就是从jsp--javabean—servlet--jsp页面做显示

流程图：

 

图一：MVC设计模式的简介

image

图二：购物系统案例的实现思路：

image

图三：设计购物车页面

image

 

节日正式开始，精彩不容错过。。。。

1.写一个jsp购物页面

复制代码 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head> 
    
    <title>飘叶网上商城</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
  
  <body>
  <hr/>
  <h2 >欢迎进入飘叶网上购物商城</h2>
  <hr>
       <a href="${pageContext.request.contextPath}/ListBookServlet">进入购物页面</a> <br>
  </body>
</html>
复制代码

2.写一个javabean

复制代码 
package cn.itcast.cart.domain;

public class Book
{
    private String id;
    private String name;//书名
    private String author;//作者
    private int price;
    
    public Book()
    {
        super();
        // TODO Auto-generated constructor stub
    }
    public Book(String id, String name, String author, int price)
    {
        super();
        this.id = id;
        this.name = name;
        this.author = author;
        this.price = price;
    }
    public String getId()
    {
        return id;
    }
    public void setId(String id)
    {
        this.id = id;
    }
    public String getName()
    {
        return name;
    }
    public void setName(String name)
    {
        this.name = name;
    }
    public String getAuthor()
    {
        return author;
    }
    public void setAuthor(String author)
    {
        this.author = author;
    }
    public int getPrice()
    {
        return price;
    }
    public void setPrice(int price)
    {
        this.price = price;
    }
    
}
复制代码

 

3.建立DB，用Map集合来模拟数据库

复制代码 
package cn.itcast.cart.domain;

import java.util.Collection;
import java.util.LinkedHashMap;
import java.util.Map;

public class DB
{
//    使用map集合来模拟数据库
    private static Map<String , Book> books=new LinkedHashMap<String, Book>();
    static{
        books.put("1", new Book("1", "《水浒传》", "施耐庵", 48));
        books.put("2", new Book("2", "《西游记》", "吴承恩 ", 58));
        books.put("3", new Book("3", "《三国演义》", "罗贯中", 78));
        books.put("4", new Book("4", "《红楼梦》", "曹雪芹", 28));
        books.put("5", new Book("5", "《平凡的世界》", "路遥", 18));
    }
//    获得所有图书
    // 获得所有图书
    public static Collection<Book> getAll() {
        return books.values();
    }
    
    // 根据id查找图书
    public static Book find(String id) {
        return books.get(id);
    }
}
复制代码

4.用javabean建立一个购物车对象

复制代码 
package cn.itcast.cart.domain;

public class ShoppingcartItem
{
    //购物车项，每一本书买了多少本，总共多少钱
    private Book book;
    private int quantity;
    private int price;
    public Book getBook()
    {
        return book;
    }
    public void setBook(Book book)
    {
        this.book = book;
    }
    public int getQuantity()
    {
        return quantity;
    }
    public void setQuantity(int quantity)
    {
        this.quantity = quantity;
        this.price=this.book.getPrice()*quantity;
    }
    public int getPrice()
    {
        return price;
    }
    public void setPrice(int price)
    {
        this.price = price;
    }

}
复制代码

 

购物车—cart

复制代码 
package cn.itcast.cart.domain;

import java.util.HashMap;
import java.util.Map;

//购物车对象
public class Shoppingcart
{
    private Map<String, ShoppingcartItem> items=new HashMap<String, ShoppingcartItem>();
    private int price;//总价
    public Map<String, ShoppingcartItem> getItems()
    {
        return items;
    }
    public void setItems(Map<String, ShoppingcartItem> items)
    {
        this.items = items;
    }
    public int getPrice()
    {
        //计算总价
        int price=0;
        for(ShoppingcartItem item:items.values())
        {
            price+=item.getPrice();
        }
        return price;
    }
    public void setPrice(int price)
    {
        this.price = price;
    }
}
复制代码

5、获得图书商品列表的servlet—ListBookServlet.java

复制代码 
package cn.itcast.cart.web.servlet;

import java.io.IOException;
import java.util.Collection;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.cart.domain.Book;
import cn.itcast.cart.domain.DB;

public class ListBookServlet extends HttpServlet
{
    //从DB中查询所有的图书
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        //查询所有的商品
        Collection<Book> books = DB.getAll();
//        转发给jsp显示
        request.setAttribute("books", books);
        request.getRequestDispatcher("/WEB-INF/pages/listbook.jsp").forward(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doGet(request, response);
    }

}
复制代码

 

6.servlet处理完的数据转发到一个展示商品的页面—listbook.jsp

复制代码 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>
<script type="text/javascript">
    function buy(id){
        window.location = "${pageContext.request.contextPath}/BuyServlet?id="+id;
    }
</script>

</head>
<body style="text-align: center">
    <h1 >商品列表</h1>
    <table border="1"  width="400px">
        <tr>
            <td>图书名称</td>
            <td>作者</td>
            <td>价格</td>
            <td>购买</td>
        </tr>
        <c:forEach var="book" items="${requestScope.books}">
            <tr>
            <td>${book.name}</td>
            <td>${book.author}</td>
            <td>${book.price}</td>
            <td>
                <input type="button" value="购买" onclick="buy(${book.id})"/>
            </td>
        </tr>
        </c:forEach>
    </table>
</body>
</html>
复制代码

7.写一个购买处理的servlet

复制代码 
package cn.itcast.cart.web.servlet;

import java.io.IOException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.cart.domain.Book;
import cn.itcast.cart.domain.DB;
import cn.itcast.cart.domain.Shoppingcart;
import cn.itcast.cart.domain.ShoppingcartItem;

public class BuyServlet extends HttpServlet
{

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        //购买页面
        //获得图书
        String id=request.getParameter("id");
        Book book=DB.find(id);
//        获得购物车
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart");
        if(cart==null){
            //首次购物
            cart=new Shoppingcart();
            request.getSession().setAttribute("cart", cart);
        }
//        商品放入购物车
        bookInCart(book,cart);
//        跳转至购物车页面,是一个请求重定向的页面
        response.sendRedirect(request.getContextPath()+"/ListCartServlet");
    }
//购物
    private void bookInCart(Book book, Shoppingcart cart)
    {//判断是否买过
        Map<String, ShoppingcartItem> items = cart.getItems();
        
        ShoppingcartItem item = items.get(book.getId());
        
        if(item==null){
            //此书未买过，创建新条目
            item=new ShoppingcartItem();
            item.setBook(book);
            item.setQuantity(1);
            //条目存入购物车
            items.put(book.getId(), item);
        }else{
            //买过数量加1
            item.setQuantity(item.getQuantity()+1);
        }
        
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doGet(request, response);
    }

}
复制代码

8.写一个获得购物车数据处理的servlet—ListCartServlet.java

复制代码 
package cn.itcast.cart.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ListCartServlet extends HttpServlet
{
    
    //查看购物车，请求重定向的页面
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        request.getRequestDispatcher("/WEB-INF/pages/listcart.jsp").forward(request, response);
        
        
        
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doGet(request, response);
    }

}
复制代码

 

9.购买的东西放入购物车，继而转向购物车展示页面—listcart.jsp

复制代码 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%--    只要使用foreach就要导入下面的这句代码--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
<script type="text/javascript">
    function change(id,inputObj){
        var quantity=inputObj.value;

        if(quantity==null || quantity=="") {
            alert("数量不能为空");
            inputObj.value = defaultValue;
            return;
        }
        
        if(quantity.match(/^[1-9][0-9]*$/)==null) {
            alert("数量必须为正整数");
            inputObj.value = defaultValue;
            return;
        }
        
        if(parseInt(quantity)>999) {
            alert("您购买的数量已达到团购标准，请致电800-820-8820");
            inputObj.value = defaultValue;
            return;
        }
        
        
        window.location="${pageContext.request.contextPath}/UpdateServlet?id="+id+"&quantity="+quantity;
    }
</script>

</head>
<body style="text-align: center">
<h1>我的购物车</h1><br>
<hr>
<table border="1" width="800px">
    <tr>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
    </tr>
<%--map迭代完后都是entry--%>
    <c:forEach var="entry" items="${cart.items}">
    <tr>
        <td>${entry.value.book.name}</td>
        <td>${entry.value.book.price}</td>
        <td>
            <input type="text" value="${entry.value.quantity}"  onblur="change(${entry.key},this) " style="width: 40px;"/>
        </td>
        <td>${entry.value.price}</td>
        <td>
            <a href="${pageContext.request.contextPath}/DaleServlet?id=${entry.key }">删除</a>
        </td>
    </tr>    
    </c:forEach>
    <tr>
        <td>
            <a href="${pageContext.request.contextPath}/clearServlet">清空购物车</a>
        </td>
        <td>
            <a href="${pageContext.request.contextPath}/ListBookServlet">继续购物</a>
        </td>
        <td>
            <a href="#">下订单</a>
        </td>
        <td colspan="2">购物车总价：￥${cart.price}元</td>
    </tr>
</table>
</body>
</html>
复制代码

下面就是实现购物车里面的一些操作功能

10.更新购物车，就是修改完数量后，自动更新购物车—UpdateServlet.java

复制代码 
package cn.itcast.cart.web.servlet;

import java.io.IOException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.cart.domain.Shoppingcart;
import cn.itcast.cart.domain.ShoppingcartItem;

public class UpdateServlet extends HttpServlet
{
    //更新购物车
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        //获得id和quantity
        String id=request.getParameter("id");
        int quantity=Integer.parseInt(request.getParameter("quantity"));
        //获得购物车
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart");
        // 修改数量
        /*
        Map<String, ShoppingcartItem> items = cart.getItems();
        
        ShoppingcartItem item = items.get(id);
        
        item.setQuantity(quantity);*/
        
        cart.getItems().get(id).setQuantity(quantity);
        
        // 跳转至购物车页面
        response.sendRedirect(request.getContextPath() + "/ListCartServlet");
    }

        
    

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doGet(request, response);
    }

}
复制代码

11.删除购物车中的单行数据—DaleServlet.java

复制代码 
package cn.itcast.cart.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.cart.domain.Shoppingcart;

public class DaleServlet extends HttpServlet
{

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        // 获得id
        String id = request.getParameter("id");
        
        // 获得购物车
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart");
        
        //删除条目
        cart.getItems().remove(id);

        // 跳转至购物车页面
        response.sendRedirect(request.getContextPath()+"/ListCartServlet");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doGet(request, response);
    }

}
复制代码

12.清空购物车—clearServlet.java

复制代码 
package cn.itcast.cart.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.cart.domain.Shoppingcart;

public class clearServlet extends HttpServlet
{

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        // 获得购物车
        Shoppingcart cart = (Shoppingcart) request.getSession().getAttribute("cart");
        
        // 清空购物车
        cart.getItems().clear();
        
        // 跳转至购买页面
        response.sendRedirect(request.getContextPath()+"/ListBookServlet");
    }




    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        doGet(request, response);
    }

}
复制代码

 

ok,忙碌到半夜，到此结束，下面看看我们的最终效果吧：

image

--------------------------------------------------------------------------------------------------

 

image

 

-------------------------------------------------------------------------------------------------

嘿嘿，没有美工处理的页面，还行，像那回事吧？

这上面的所有功能都可以实现的哦！

image

牟兴辉
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP实训项目-简易商城购物系统
06-22
本系统使用了Dao模式进行设计，连接到数据库中 网页文件值JSP文件，主要操作在网页中进行 系统由单点登录、商品展示和购物车共三部分功能模块组成
[附源码]java毕业设计网上购物商城系统
计算机毕设程序设计
11-20 2848
项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。
基于javaweb的个人pc电脑商城系统(java+ssm+jsp+jquery+mysql)
m0_69593263的博客
10-24 1704
基于javaweb的个人pc电脑商城系统(java+ssm+jsp+jquery+mysql) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等
Java网上商城购物系统设计与实现(Idea+Springboot+mysql)
杭州.黄老师
03-02 3889
Java网上商城购物系统设计与实现(Idea+Springboot+mysql)毕设毕业设计，黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSDN网站查询黄菊华老师。
vue - 练手项目：简易商城
asfcyg的博客
06-19 9967
学习vue的第一个练手的小项目使用的是vue3.0 第一步：划分目录结构 第二步：引入两个css文件 将两个文件放在src->assets->css下 第一个css文件是normalize.css，让不同浏览器在渲染网页元素时形式更加统一，是一个大神写的，可以在github上下载。 第二个css文件是base.css文件，引入一些基础的样式 /* 引入css文件 */ @import "./normalize.css"; *, *::before, *::after { margin:
简单购物系统—Python 小项目
m0_52165864的博客
06-07 1481
函数只是封装功能 接收参数返回结果 不要让函数做跳转。 1、输出欢迎界面还有登录注册菜单 1、登录 2、注册 保留用户信息，目前做不到固话，先注册，注册成功之后再选择登录进去 用户信息-用户名、密码、初始金额 2、登录成功之后，又弹出菜单 1、查看商品信息 2、购买商品，将商品加入购物车 3、查看和结算购物车 4、退出 运行结果： 1、登录之后可以进行商品信息查询、购物、查看和结算购物车 2.用户注册可以选择充值金额。..........
基于Java web的购物商城系统设计与实现
ambiguous__的博客
05-20 9270
目 录 1 绪 论 1 1.1 本课题研究的背景和意义 1 1.1.1 本课题研究的背景 1 1.1.2 本课题研究的意义 2 1.1.3 本课题的发展现状及前景 2 1.2 系统的实现任务 7 2 系统概述及实现技术介绍 8 2.1 网上商城简介 8 2.2 相关实现技术介绍 10 2.2.1 JSP语言及其特点 10 2.2.2 DreamweaverMX知识介绍 12 2.2.3 数据库基础知识介绍 13 2.2.4 JDBC基础知识介绍 15 2.3 系统的主要架构及开发模式 16 2.3.1 基
使用Java面向对象开发一个简单的购物车系统
m0_69531806的博客
02-17 1190
使用面向对象方法搭建一个简易的购物车系统
基于SSM的网上购物商城系统
12-31
SSM网上购物商城系统 项目描述 该网上购物商城前端使用了jsp来实现数据的展示，后端通过java代码来对数据进行一系列的操作，前端使用了原生的html页面技术进行渲染，同时也加入了jquery技术制作了一下控件效果，...
千博商城购物系统 免费购物系统
10-30
千博电子商城系统将产品展示、购物管理、资金管理等功能相结合，并提供了简易 的操作、丰富的功能和完善的权限管理，为用户提供了一个低成本、高效率的网上商城购物系统建设方案。 千博商城购物系统 v2016 Build...
Java Web购物系统.rar
06-26
这是一个完整的Java Web系统，数据库MySQL实现。其中有前端、后端，比较完整。欢迎大家前来下载。
javaweb实验报告（购物系统）
11-25
基于MVC设计模式的在线购物系统的实现，报告中有代码和截图，天津理工javaweb实验报告
java项目实战之购物商城（java毕业设计）
03-31
 项目涉及的技术：  1、前端：jsp、css、javascript、jQuery(js框架) 2、后台：Servlet、动态代理、Mybatis框架、javaMail进行邮件发送、jstl 、jstl自定义分页标签、代码生成器等 3、数据库：Mysql 4、服务器：Tomcat项目开发涉及的功能： 1、项目以及数据库搭建2、用户登录、退出3、用户注册、邮件发送、以及用户信息激活4、首页商品信息页面搭建以及查询功能实现5、查询商品明细6、加入商品至购物车、删除、更新、清除购物车商品信息7、确认订单信息8、订单页面搭建以及下订单功能实现9、查询我的购物车以及订单信息10、商品系统后台界面搭建11、代码机器人使用等等
【计算机毕业设计】网上商城购物系统
JAVA编码选手的博客
06-12 458
Java SpringBoot网上商城购物系统，基于SpringBoot框架进行开发，前端页面效果通过使用Vue框架进行编码实现，实现了用户跟管理员这两类用户角色，实现了商品信息管理、订单管理等功能。
python-一个简易的购物系统
qq_44212783的博客
04-05 1万+
一个简易的购物系统
JavaWeb：实现购物商城（课程设计完整版）
热门推荐
m0_63512120的博客
02-19 2万+
基于javaweb实现的网上购物商城，实现了一些基础功能，供大家参考学习，也可以当做课程设计，在文章结尾附有源代码和素材让大家使用。原创作品，大家可以在评论区指出问题哟，我们共同学习！
Java购物小系统（使用最基础的语法实现的控制台购物系统）
weixin_45570663的博客
01-24 2653
自述：本人是一名卑微专科大一软件技术学生，目前学习Java已经快三个月了吧，在这里给大家分享一下我的学习成果，希望看到的大佬可以给我一些建议，也希望这篇文章能给正在学习Java的小伙伴一些练习的途径： 程序执行的入口是（InSystem.java）文件 总共分为十一个Java文件 客户信息管理 添加客户信息 创建一个客户类，里面声明客户应具备的客户信息，如：客户编号、客户姓名、客户电话、客户积分等，声明该类的对象数组，利用对象数组存储客户的信息，
基于Java的商城购物系统
wx1998114的博客
11-17 2991
项目简介：本系统主要的功能有会员注册、登录、商品种类管理、商品管理、浏览商品、以及购物车等操作。开源分享
JavaWebmvc简易商城购物系统
最新发布
03-23
JavaWebmvc简易商城购物系统是一个基于JavaWeb技术开发的商城购物系统，它可以实现用户注册、登录、浏览商品、添加购物车、下单等功能。 该系统的主要技术栈包括Java、JavaWeb、Spring MVC、MyBatis等。其中，Java...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值