JAVA课程设计+购物车 个人博客

1. 团队课程设计博客链接

2.个人负责模块或任务说明

  将数据库中已经存在的商品取出，用表格显示到页面中。

  实现在商品页面的购买，直接弹出消息框，输出价格，实现购买。

  实现在商品页面进行添加购物车，并转到购物车

  实现在购物车页面显示数据

  实现在购物车页面进行删除表格的某一行数据

  实现在购物车页面进行购买，并重新返回商品页面

3.自己的代码提交记录截图

4.自己负责模块或任务详细说明

（1）将数据库中已经存在的商品取出，用表格显示到页面中。

主要代码：

<table border="1">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>PRICE</th>
        <th>INVENTORY</th>
    </tr>
    <%
    DButil util=new DButil();
    List<ProductDB>list=util.readFirstProduct();
    for(ProductDB e:list){ %>
    <tr>
    <td><%=e.getId() %></td>
    <td><%=e.getName() %></td>
    <td><%=e.getPrice() %></td>
    <td><%=new Random().nextInt(100) %></td>
    
    </tr>
    <%} %>
</table>

public List<ProductDB> readFirstProduct() {
        List<ProductDB> list = new ArrayList<ProductDB>();
        Connection con = null;
        PreparedStatement psmt = null;
        ResultSet rs = null;
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        try {
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/shopping", "root", "kimheechul");
            String sql = "select * from product";
            psmt = con.prepareStatement(sql);
            rs = psmt.executeQuery();
            while (rs.next()) {
                int id = rs.getInt("id");
                String name = rs.getString("name");
                double price = rs.getDouble("price");
                ProductDB tl = new ProductDB(id, name, price);
                list.add(tl);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (psmt != null) {
                    psmt.close();
                }
                if (con != null) {
                    con.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return list;
    }

在DButil中定义好方法，使得其能够连接数据库，获取数据库中的数据，并将数据输入到List列表中，并返回列表。
在JSP中使用<table>、<tr>、<td>和<th>标签制作表格，并且同时使用for循环进行遍历list列表，将列表中的数据显示到表格中，使用<%= %>就可以实现。

（2）实现在商品页面的购买，直接弹出消息框，输出价格，实现购买。

主要代码：

    <form id="product" method="post" action="productList.jsp">
    <select id="ID" name="NAME">
    <%for(ProductDB e:list){ %>
    <option value=<%=e.getName() %>><%=e.getName() %></option>
    <%} %>
    </select>
    数量：<input id='count' type="text"/>
    单价：<input id='price' type='text'>
    <input type="submit" value="购买" onclick="fun()"/>
    </form>

<script type="text/javascript">
        function fun()
        {
            var  obj=document.getElementById("ID");
            for (i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.
                if (obj[i].selected== true ) {
                    var text=obj[i].value;//获取当前选择项的 值 .
                }
            }
            var price = document.getElementById('price').value;
            var count = document.getElementById('count').value;
            var total = (count*price).toFixed(2);
        
            if(confirm("确定购买"+text+"支付"+total+"元吗?")){
            
                window.location.href = "productList.jsp";
            }
        }
</script>

通过使用<form id="product" method="post" action="productList.jsp">
form表单来提交选中和输入数据，同时使用action属性来规定当我们使用表单来提交数据时，数据提交到哪里。使用<select> 标签创建一个菜单，将 <option> 标签中的内容作为一个元素显示，其值可以用value=<%=e.getName() %>来实现输入。
再通过<input>标签和其type属性定义一个“submit”提交按钮，并使用onclick事件属性使得我们可以在点击购买按钮时能够执行已经编写好的JavaScript代码。
在fun（）中，我们使用document.getElementById（id）来获取<select>菜单中的值，及使用document.getElementById（id）.value来获取“text”字段中的值。且使用confirm（）来显示对话框，并且当有对话框出现后点击的是确定按钮时，跳转页面。

（3）实现在商品页面进行添加购物车，并转到购物车

主要代码：

</table>
    <form id="product" method="post" action="productList.jsp">
    <select id="ID" name="NAME">
    <%for(ProductDB e:list){ %>
    <option value=<%=e.getName() %>><%=e.getName() %></option>
    <%} %>
    </select>
    数量：<input id='count' type="text"/>
    单价：<input id='price' type='text'>
        <input type="button" value="添加" onclick="add()"/>
    </form>

<script type="text/javascript" language="javaScript">
function add(){
    var  obj=document.getElementById("ID");
    for (i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.
        if (obj[i].selected== true ) {
            var text=obj[i].value;//获取当前选择项的 值 .
        }
    }
    var price = document.getElementById('price').value;
    var count = document.getElementById('count').value;
    if(confirm("确定要加入购物车?")){
        window.location.href = "cart.jsp?count="+count+"&price="+price+"&name="+text;
    }
}
</script>

此功能和上述功能相似，且使用的代码类似。
通过使用<form id="product" method="post" action="productList.jsp">
form表单来提交选中和输入数据，同时使用action属性来规定当我们使用表单来提交数据时，数据提交到哪里。使用<select> 标签创建一个菜单，将 <option> 标签中的内容作为一个元素显示，其值可以用value=<%=e.getName() %>来实现输入。
再通过<input>标签和其type属性定义两个“text”字段和一个“button”提交按钮，并在其中使用onclick事件属性使得我们可以在点击购买按钮时能够执行已经编写好的JavaScript代码。
在add（）中，我们使用document.getElementById（id）来获取<select>菜单中的值，及使用document.getElementById（id）.value来获取“text”字段中的值。且使用confirm（）来显示对话框，并且当有对话框出现后点击的是确定按钮时，跳转页面，并在其后添上参数，将我们获得的值传送到购物车页面中。

（4）实现在购物车页面显示数据

主要代码：

<table border="1">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>PRICE</th>
        <th>NUMBER</th>
        <th>操作</th>
        <th>操作</th>
    </tr>
    <%int count = Integer.parseInt(request.getParameter("count"));%>
    <%BigDecimal price = new BigDecimal(request.getParameter("price"));
    price=price.setScale(2, BigDecimal.ROUND_HALF_UP);%>
    <%String name = request.getParameter("name");%>
    <%Connection con = null;
    PreparedStatement psmt = null;
    ResultSet rs = null;
    con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "kimheechul");
    String strSql = "insert into cart(name,price,num) values(?,?,?)";
    psmt = con.prepareStatement(strSql);
    psmt.setString(1, name);
    psmt.setBigDecimal(2,price);
    psmt.setInt(3, count);
    psmt.executeUpdate();
    psmt.close();//立即释放资源
    DButil util=new DButil();
    double total=0.0;
    List<Product>list=util.readProduct();
    for(Product e:list){ %>
    <tr>
    <td><%=e.getId() %></td>
    <td><%=e.getName() %></td>
    <td><%=e.getPrice() %></td>
    <td><%=e.getNum() %></td>
    </tr>
    <%} %>
</table>

此方法和上述的在商品页面中显示数据的代码相似，差别在于我们需要使用request.getParameter（）来获得商品页面中表单使用post方式传送过来的值，且因为其类型为String型，需要将其转换成对应的类型。再将数据插入数据库中。其余与商品页面的代码大致一样。

（5）实现在购物车页面进行删除表格的某一行数据

主要代码：

<td align="center"> <a href="#" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)">删除</a> </td>

删除功能是通过使用<a></a>标签，使用连接，使其匹配到this所指向的元素的父容器的父容器的父容器，（parentNode指的是父节点）也就是在这个元素外面第三层包裹他的那个元素。然后删除这个节点，并且是删除的是这个this元素指向的元素的父容器的父容器，也就是这个元素第二层包裹它的那个元素。

（6）实现在购物车页面进行购买，并重新返回商品页面

主要代码：

    <%
    DButil util=new DButil();
    double total=0.0;
    List<Product>list=util.readProduct();
    for(Product e:list){ %>
    <tr>
    <td><%=e.getId() %></td>
    <td><%=e.getName() %></td>
    <td><%=e.getPrice() %></td>
    <td><%=e.getNum() %></td>
    <% total=e.getPrice()*e.getNum();%>
    <td><input type="button" name="calculate" onclick="setvalue(<%=total%>)" value="购买"></td>
    </tr>
    <%} %>
</table>
总价：<input type="text" name="result" id="result">
<script>
    function setvalue(v)
    {
        document.getElementById("result").value=v.toFixed(2);
        if(confirm("确定要支付"+document.getElementById("result").value+"元吗？")){
            window.location.href = "productList.jsp";
        }
    }
</script>

同样是通过List储存数据库数据，使用for循环遍历列表，获取数据库的值，计算总价。
再通过<input>标签和其type属性定义一个“button”按钮，并使用onclick事件属性使得我们可以在点击购买按钮时能够执行已经编写好的JavaScript代码。
在setvalue（）中，我们使用document.getElementById("result").value=v.toFixed(2);来将获得的值显示在“text”字段中。且使用confirm（）来显示对话框，并且当有对话框出现后点击的是确定按钮时，跳转页面，支付成功。

5.课程设计感想

1、在课程设计的过程中对于一些知识点的掌握更加巩固了，尤其是关于JSP的用法，比原来稍微了解了些
2、在课设的过程发现自己的编程知识储备还是比较薄弱的，对于在编写代码的过程中发现的问题，还不是能很好地解决
3、在编写代码的过程中，虽然有碰到很多的困难，但是也有很多的收获，至少能够编写WEB界面了。虽然是比较基础的界面，但是也是一种进步和收获
4、因为本周有两场考试，所以做课程设计时间就变得很紧张了，而且开始做课设的时间又较迟，导致WEB界面没有时间弄得很美观了。希望下次能够做的更好吧。

转载于:https://www.cnblogs.com/KimHeechul/p/7062605.html