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界面没有时间弄得很美观了。希望下次能够做的更好吧。