一个简单购物网页的制作过程

最新推荐文章于 2022-09-15 22:32:38 发布

置顶苏捻

最新推荐文章于 2022-09-15 22:32:38 发布

阅读量6.9k

点赞数 10

文章标签： jsp

本文链接：https://blog.csdn.net/qq_47575615/article/details/111695329

版权

一、网页效果

1、登录(vip用户和普通会员)

在这里插入图片描述

选择vip和普通会员，最终的付款折扣会不同。

2、购物页面

在这里插入图片描述

文本框中输入要购买的数量

3、结账页面（购物操作的数量以1、2、3为例）

在这里插入图片描述

名字前面显示vip或者普通会员，后面显示名字。
商品后面显示购买的物品以及数量。
应付款以及打折后的金额。

二、下面是代码的制作过程：

1、登录页面：主要架构为一个表单。（需要一个javabean附在之后）

创建一个jsp文件，取名为denglu.jsp。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="mybean.Buy" %>
<%
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>
    <base href="<%=basePath%>">
    
    <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>
    <h2>欢迎来到购物网站</h2>
  	请输入你的信息：<br>
    <form action="buy.jsp" method="post">
    	<input type="text" name="username" value="Guest" /><br>
    	<input type="radio" name="vip" value="y" checked>vip会员 
    	<input type="radio" name="vip" value="n">普通会员 <br>
    	<input type="submit" value="开始购物"/>
    </form>
  </body>
</html>

创建一个名为mybean的Java包，在其目录下创建Buy.java.

package mybean;

import java.io.Serializable;

public class Buy implements Serializable {
	private String username;
	private String vip;
	private int Clothes=0;
	private int Pants=0;
	private int Shoes=0;
	private String notice;
	private int sum;
	public Buy() {
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getVip() {
		return vip;
	}
	public void setVip(String vip) {
		this.vip = vip;
	}
	
	public int getClothes() {
		return Clothes;
	}
	public void setClothes(int Clothes) {
		this.Clothes = Clothes;
	}
	public int getPants() {
		return Pants;
	}
	public void setPants(int Pants) {
		this.Pants = Pants;
	}
	public int getShoes() {
		return Shoes;
	}
	public void setShoes(int Shoes) {
		this.Shoes = Shoes;
	}
	
	public String getNotice() {
		return notice;
	}
	public void setNotice(String notice) {
		this.notice = notice;
	}
	public int getSum() {
		return sum;
	}
	public void setSum(int sum) {
		this.sum = sum;
	}
	public String PrintVip(){
		if(vip.equals("y")) return "VIP";
		else return "普通会员";
	}
	public String Cart(){
		notice="";
		notice+=getClothes()+"件衣服 ";
		notice+=getPants()+"件裤子 ";
		notice+=getShoes()+"双鞋 ";
			
		return notice;
	}
	public int Sum(){
		sum=0;
		sum+=getClothes()*120;
		sum+=getPants()*100;
		sum+=getShoes()*80;
		return sum;
	}
	public String Notice(){
		if(vip.equals("y")) return "享有八折优惠";
		else return "不享有优惠";
	}
	public double Discount(){
		if(vip.equals("y")) return sum*(0.8);
		else return sum;
	}
}

2、购买页面。

创建一个buy.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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'buy.jsp' starting page</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>
    <h2>购物——商品选择页面</h2>
    <jsp:useBean id="buy" class="mybean.Buy" scope="session" />
	<jsp:setProperty name="buy" property="*" />
	<%buy.setUsername(new String (buy.getUsername())); %>
  	欢迎<%=buy.getUsername() %>：<%=buy.PrintVip() %>来到百货商店！<br>
  	请选择要购买的商品：<br>
    <form action="pay.jsp" method="post">
    	<input type="text" name="Clothes" style="width:40px;">衣服 120元
    	<input type="text" name="Pants" style="width:40px;">裤子 100元
    	<input type="text" name="Shoes" style="width:40px;">鞋 80元<br>
    	<input type="submit" value="提交"/>
    </form>
  </body>
</html>

3、结算页面。

创建一个pay.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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'pay.jsp' starting page</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>
    <h2>购物——结账页面</h2>
    <jsp:useBean id="buy" class="mybean.Buy" scope="session" />
	<jsp:setProperty name="buy" property="*" />
	<%
	String Clothes;
	Clothes=request.getParameter("Clothes");
	int A = Integer.parseInt(Clothes); 
	buy.setClothes(A);
	Clothes=request.getParameter("Pants");
	int B = Integer.parseInt(Clothes); 
	buy.setPants(B);
	Clothes=request.getParameter("Shoes");
	int C = Integer.parseInt(Clothes); 
	buy.setShoes(C);
	%>
  	<%=buy.PrintVip() %>的姓名是：<%=buy.getUsername() %><br>
  	要购买的商品是：<%=buy.Cart()%><br>
  	应付款是：<%=buy.Sum() %>元，您<%=buy.Notice()%>，实付款是：<%=buy.Discount() %>元<br>
            欢迎您下次光临！
  </body>
</html>