利用JSP編程技術實現一個簡單的購物車程序

本文轉載自查看原文 2015-10-16 22:33 27397 作業

實驗二 JSP編程

一.實驗目的1. 掌握JSP指令的使用方法；2. 掌握JSP動作的使用方法；3. 掌握JSP內置對象的使用方法；4. 掌握JavaBean的編程技術及使用方法；5. 掌握JSP中數據庫編程方法；

二.實驗要求：利用JSP編程技術實現一個簡單的購物車程序，具體要求如下。

（1）用JSP編寫一個登錄頁面，登錄信息中有用戶名和密碼，分別用兩個按鈕來提交和重置登錄信息。

（2）編寫一個JSP程序來處理用戶提交的登錄信息，如果用戶名為本小組成員的名字且密碼為對應的學號時，采用JSP內置對象的方法跳轉到訂購頁面（顯示店中商品的種類和單價等目錄信息）；否則采用JSP動作提示用戶重新登錄(注：此頁面上要包含前面的登錄界面)。

（3）當顧客填好所需商品的數量並點擊提交按鈕時，將前面訂購的商品放入購物車中並顯示購物車里的相關信息，包括商品的名稱和數量以及所有商品的總價格（關於總價格的計算，要求通過編寫一個JavaBean來輔助實現）。

（4）修改登錄程序。將合法用戶信息（用戶名）寫入數據庫中，登錄時通過查找數據庫來完成登錄。

（5）將商品信息寫入數據庫，計算價格時通過查找數據庫來完成。

在jsp中用include指令引入html文件時遇到的問題：

jsp和html都可以正確的顯示，當jsp引入html時訪問jsp頁面html出現亂碼，jsp原有的輸出無亂碼，解決方案：

在html第一行加入：<%@ page language="java" import="java.util.*" pageEncoding="gb18030"%>

jsp的編碼格式為：<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>

1.由於需要運用數據庫來進行判斷用戶是否登陸，必須需要一個注冊頁面 reg.jap

 1 <%@ page language="java" pageEncoding="utf-8"%>
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 <title>注冊頁面</title>
 7 <link href="styles/index.css" rel="stylesheet">
 8 </head>
 9 <body>
10 <!-- 文件引入的兩種方式 -->
11 <%--  <%@include file="include/header.inc.html"%> --%>
12     <jsp:include page="include/header.inc.html"></jsp:include>
13     <p class="welcome">歡迎進入購物車注冊界面</p>
14     <form action="doreg.jsp" method="post">
15         <div>
16             <h2>用戶名：</h2><input class="input" type="text" name="username"  placeholder="請輸入用戶名">
17         </div>
18         <div>
19             <h2>密 碼：</h2><input class="input" type="password" name="pwd"  placeholder="請輸入您的密碼">
20         </div>
21         <div>
22             <input class="input1" type="submit" value="注冊"> 
23             <input class="input1" type="reset" value="重置">
24         </div>
25          <h3>已有賬號，直接<a href="index.jsp">登陸</a></h3>
26     </form>
27     <%@include file="include/footer.inc.html"%>
28 </body>
29 </html>

2.需要寫一個數據庫來存儲用戶信息，表名為 ·user·；（創建表的語句不寫）

+----------+-------------+------+-----+---------+-------+
| Field    | Type        | Null | Key | Default | Extra |
+----------+-------------+------+-----+---------+-------+
| uesrname | varchar(20) | NO   |     | NULL    |       |
| password | int(16)     | NO   |     | NULL    |       |
+----------+-------------+------+-----+---------+-------+

2.1 還需要一個表來存儲商品信息 goods 表

 create table `goods1` (id int not null auto_increment primary key,goods_name varchar(20), goodspic varchar(30),goods_pri double(10), goods_name_en varchar(20))engine = InnoDB default charset=utf8;

+---------------+-------------+------+-----+---------+----------------+
| Field         | Type        | Null | Key | Default | Extra          |
+---------------+-------------+------+-----+---------+----------------+
| id            | int(11)     | NO   | PRI | NULL    | auto_increment |
| goods_name    | varchar(20) | YES  |     | NULL    |                |
| goodspic      | varchar(30) | YES  |     | NULL    |                |
| goods_pri     | varchar(20) | YES  |     | NULL    |                |
| goods_name_en | varchar(20) | YES  |     | NULL    |                |
+---------------+-------------+------+-----+---------+----------------+

3.用戶注冊的信息以post 的方式提交給doreg.jsp來處理，注冊成功即跳轉商品頁面goods.jsp

 1 <%@page import="java.sql.*"%>
 2 <%@ page language="java" pageEncoding="GB18030"%>
 3 
 4 <%
 5 try{
 6     Class.forName("com.mysql.jdbc.Driver");//加載數據庫驅動，注冊到驅動管理器
 7     String url = "jdbc:mysql://127.0.0.1:3301/shopcar";//數據庫連接字符串
 8     String usename = "root";
 9     String password = "123456";
10     Connection conn = DriverManager.getConnection(url,usename,password);//創建Connection連接
11     if(conn != null){
12         System.out.println("數據庫鏈接成功！");
13         //conn.close();//關閉數據庫連接
14         String insert_db = "INSERT INTO `user`(uesrname,password)values(?,?)";
15         //插入操作
16         PreparedStatement statement = (PreparedStatement)conn.prepareStatement(insert_db);
17         
18         statement.setString(1,request.getParameter("username"));
19         statement.setString(2,request.getParameter("pwd"));
20         statement.executeUpdate();
21         
22         session.setAttribute("userName", request.getParameter("username"));//給當前注冊用戶開啟會話
23         out.println("插入成功");
24         out.println("頁面在3秒鍾內自動跳轉");
25         out.println("<a href=\"goods.jsp\">點擊請進入購物頁面</a>");
26     }else{
27         out.println("數據庫連接失敗");//輸出錯誤信息
28     }
29 }catch(ClassNotFoundException e){
30     e.printStackTrace();
31 }catch(SQLException e){
32     e.printStackTrace();
33 }
34 %>
35 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
36 <html>
37 <head>
38 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
39 <meta http-equiv="refresh" content="2;url=goods.jsp"> 
40 <title>注冊頁面</title>
41 </head>
42 <body>
43 
44 </body>
45 </html>

4.已有賬戶的用戶直接登陸進行，index.jsp

 1 <%@ page language="java" import="java.util.*"
 2     contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
 3 
 4 <%
 5     Cookie[] cookies = request.getCookies();
 6     String uname = "";
 7     String upwd = "";
 8     String utrue = "";
 9     if(cookies != null ){
10         for(int i = 0 ; i < cookies.length; i++){
11             Cookie cookie = cookies[i];
12             if(cookie.getName().equals("rname")){
13                 uname = cookie.getValue();
14             }else if(cookie.getName().equals("rpwd")){
15                 upwd = cookie.getValue();
16             }else if(cookie.getName().equals("rtrue")){
17                 utrue = cookie.getValue();
18             }
19         }
20     }
21 %>
22 
23 
24 <!DOCTYPE html>
25 <html>
26 <head>
27 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
28 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
29 <title>歡迎進入購物車</title>
30 <link href="styles/index.css" rel="stylesheet">
31 </head>
32 <body>
33     <%-- <%@include file="include/header.inc.html"%> --%>
34     <jsp:include page="include/header.inc.html"></jsp:include>
35     <p class="welcome">歡迎進入購物車登陸界面</p>
36     <form action="show.jsp">
37         <div>
38             <h2>用戶名：</h2><input class="input" type="text" name="username" value="<%= uname %>" placeholder="請輸入用戶名">
39         </div>
40         <div>
41             <h2>密 碼：</h2><input class="input" type="password" name="pwd" value="<%= upwd %>" placeholder="請輸入您的密碼">
42         </div>
43         <div>
44             <input type="checkbox" name="remember" value="true"> <input class="input1"
45                 type="submit" value="登陸"> <input class="input1" type="reset" value="重置">
46         </div>
47         <div><p>還沒有注冊，請先注冊</p>  
48              <a href="reg.jsp">注冊</a>
49         </div>
50     </form>
51     <%@include file="include/footer.inc.html"%>
52 </body>
53 </html>

5.檢測登陸結果用show.jsp來驗證。

 1 <%@page import="java.sql.*"%>
 2 <%@ page language="java" contentType="text/html; charset=GB18030"
 3     pageEncoding="GB18030"%>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
 8 <title>Insert title here</title>
 9 </head>
10 <body>
11     <%
12     
13     String username = request.getParameter("username");
14     String password = request.getParameter("pwd");
15     String remember = request.getParameter("remember");
16 
17     if(username == null)
18         username="";
19     if(password == null)
20         password="";
21     if(remember == null)
22         remember = "false";
23     
24     String driver = "com.mysql.jdbc.Driver";
25     String url = "jdbc:mysql://127.0.0.1:3301/shopcar";
26     String user = "root";
27     String password_db = "123456";
28     try {
29         Class.forName(driver);//加載驅動
30         Connection conn = DriverManager.getConnection(url,user,password_db);
31         // 連接URL為 jdbc:mysql://服務器地址/數據庫名 ，后面的2個參數分別是登陸用戶名和密碼        
32         System.out.println("Success connect Mysql server!");
33         // statement用來執行SQL語句
34         Statement stmt = conn.createStatement();
35         // 結果集
36         ResultSet rs = stmt.executeQuery("select * from `user`");
37         // student 為你表的名稱
38         while (rs.next()) {
39             String name = rs.getString("uesrname");
40             String pwd = rs.getString("password");
41             /* out.println(rs.getString("uesrname"));
42             out.println(rs.getString("password")+"<br>"); */
43             if(username!=null && username.equals(name) && password.equals(pwd))
44             {
45                 if(remember != null && remember.equals("true"))
46                 {
47                     Cookie cookie1 = new Cookie("rname",username);
48                     Cookie cookie2 = new Cookie("rpwd",password);
49                     cookie1.setMaxAge(60*60*24*7);
50                     cookie2.setMaxAge(60*60*24*7);
51                     response.addCookie(cookie1);
52                     response.addCookie(cookie2);
53                 }
54                 session.setAttribute("userName",username);
55                 response.sendRedirect("goods.jsp");
56             }else{
57                 /* response.sendRedirect("index.jsp"); */
58                 out.println("查詢不成功");
59                 /* out.println("<a href = \"index.jsp\">請重新登陸</a>"); */
60             }
61             
62         }
63     } catch (Exception e) {
64         // TODO: handle exception
65         System.out.print("get data error!");
66         e.printStackTrace();
67     }
68     
69     
70     
71 
72     
73     %>
74 </body>
75 </html>

6.成功登陸進入商品選擇頁面，從數據庫中調集數據goods1.jsp (6.1 為未用數據庫展示的商品選擇頁面，可以先參考6.1)

<%@page import="java.sql.*"%>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>購物頁面</title>
<style>
    td{border:1px solid green;}
</style>
</head>
<body>
 <!--創建數據表 create table `goods` (id int not null auto_increment primary key,goods_name varchar(20), goodspic varchar(30),goods_pri varchar(20), goods_name_en varchar(20)); -->
<p>歡迎用戶:
<%= 
    session.getAttribute("userName")
%>
</p>
<p>請選購商品並填寫所需要購買的數量</p>
<form action="order2.jsp" method="post">
    <table style="border:1px solid green;">
        <thead>
            <tr>
                <th>編號</th>
                <th>商品名</th>
                <th>單價</th>
                <th>購買數量</th>
            </tr>
        </thead>
        <tbody>

<%
try{
    Class.forName("com.mysql.jdbc.Driver");//加載數據庫驅動，注冊到驅動管理器
    String url = "jdbc:mysql://127.0.0.1:3301/shopcar";//數據庫連接字符串
    String usename = "root";
    String password = "123456";
    Connection conn = DriverManager.getConnection(url,usename,password);//創建Connection連接
    // statement用來執行SQL語句
    Statement stmt = conn.createStatement();
    // 結果集
    ResultSet rs = stmt.executeQuery("select * from `goods1`");
    // student 為你表的名稱
    while (rs.next()) {
        application.setAttribute("id", rs.getString("id"));
        application.setAttribute("goods_name", rs.getString("goods_name"));
        application.setAttribute("goodspic", rs.getString("goodspic"));
        application.setAttribute("goods_pri", rs.getString("goods_pri"));
        application.setAttribute("goods_name_en", rs.getString("goods_name_en"));
        /* String id = (rs.getString("id"));
        String goods_name = (rs.getString("goods_name"));
        String goodspic = (rs.getString("goodspic"));
        String goods_pri = (rs.getString("goods_pri"));
        String goods_name_en = (rs.getString("goods_name_en")); */
%>
        <tr>
            <td><%=application.getAttribute("id") %></td>
            <td><img src="<%=application.getAttribute("goodspic") %>"><%=application.getAttribute("goods_name") %></td>
            <td>￥<%=application.getAttribute("goods_pri") %></td>
            <td><input type="text" name="<%=application.getAttribute("goods_name_en") %>" id="" value="" placeholder="0"></td>
        </tr>
<%        
        
        }

    }catch(ClassNotFoundException e){
        e.printStackTrace();
    }catch(SQLException e){
        e.printStackTrace();
    }
%>

            </tbody>
        </table>
        <input type="submit" value="提交訂單">
    </form>
</body>
</html>

6.1 未用數據庫的代碼 goods.jsp

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="GB18030"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>購物頁面</title>
 8 <style>
 9     td{border:1px solid green;}
10 </style>
11 </head>
12 <body>
13  <!--創建數據表 create table `goods` (id int not null auto_increament primary key,goods_name varchar(20), goodspic varchar(30),goods_name_en varchar(20)); -->
14     <p>歡迎用戶:
15     <%= 
16         session.getAttribute("userName")
17     %>
18     </p>
19     <p>請選購商品並填寫所需要購買的數量</p>
20     <form action="order.jsp" method="post">
21         <table style="border:1px solid green;">
22             <thead>
23                 <tr>
24                     <th>編號</th>
25                     <th>商品名</th>
26                     <th>單價</th>
27                     <th>購買數量</th>
28                 </tr>
29             </thead>
30             <tbody>
31                 <tr>
32                     <td>1</td>
33                     <td><img src="./images/apple.jpg"/>蘋果</td>
34                     <td>￥5.0</td>
35                     <td><input type="text" name="apple" id="" placeholder="0"></td>
36                 </tr>
37                 <tr>
38                     <td>2</td>
39                     <td><img src="./images/orange.jpg"/>橘子</td>
40                     <td>￥3.0</td>
41                     <td><input type="text" name="orange" id="" placeholder="0"></td>
42                 </tr>
43                 <tr>
44                     <td>3</td>
45                     <td><img src="./images/banana.jpg"/>香蕉</td>
46                     <td>￥2.0</td>
47                     <td><input type="text" name="banana" id="" placeholder="0"></td>
48                 </tr>
49                 <tr>
50                     <td>4</td>
51                     <td><img src="./images/youzi.jpg"/>柚子</td>
52                     <td>￥4.5</td>
53                     <td><input type="text" name="grapefruit" id="" placeholder="0"></td>
54                 </tr>
55                 <tr>
56                     <td>5</td>
57                     <td><img src="./images/peach.jpg"/>桃子</td>
58                     <td>￥5.5</td>
59                     <td><input type="text" name="peach" id="" placeholder="0"></td>
60                 </tr>
61             </tbody>
62         </table>
63         <input type="submit" value="提交訂單">
64         <!-- <button type="submit">提交訂單</button> -->
65     </form>
66 </body>
67 </html>

7.訂購結果order.jsp顯示頁面，運用javaBean來計算，將邏輯分離

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="GB18030"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>訂單信息</title>
 8 </head>
 9 <body>
10      <jsp:useBean id="car" scope="page" class="ShopCar.CountPrice">
11             <jsp:setProperty name="car" property="num_apple" param="apple"/>
12             <jsp:setProperty name="car" property="num_orange" param="orange"/>
13             <jsp:setProperty name="car" property="num_banana" param="banana"/>
14             <jsp:setProperty name="car" property="num_grapefruit" param="grapefruit"/>
15             <jsp:setProperty name="car" property="num_peach" param="peach"/>
16             <p><b>尊敬的用戶：</b></p>
17         <%= 
18             session.getAttribute("userName")
19         %>
20             <p>您選購的訂單詳情如下</p>
21         <table>
22             <thead>
23                 <tr><th>編號</th><th>商品名</th><th>單價</th><th>購買數量</th><th>價格</th></tr>
24             </thead>
25             <tbody>
26                 <tr>
27                     <td>1</td>
28                     <td>蘋果</td>
29                     <td>￥5.0</td>
30                     <td><jsp:getProperty name = "car" property="num_apple" /></td>
31                     <td><jsp:getProperty name = "car" property="pri_apple" /></td>
32                 </tr>
33                 <tr>
34                     <td>2</td>
35                     <td>橘子</td>
36                     <td>￥3.0</td>
37                     <td><jsp:getProperty name = "car" property="num_orange" /></td>
38                     <td><jsp:getProperty name = "car" property="pri_orange" /></td>
39                 </tr>
40                 <tr>
41                     <td>3</td>
42                     <td>香蕉</td>
43                     <td>￥2.0</td>
44                     <td><jsp:getProperty name = "car" property="num_banana" /></td>
45                     <td><jsp:getProperty name = "car" property="pri_banana" /></td>
46                 </tr>
47                 <tr>
48                     <td>4</td>
49                     <td>柚子</td>
50                     <td>￥4.5</td>
51                     <td><jsp:getProperty name = "car" property="num_grapefruit" /></td>
52                     <td><jsp:getProperty name = "car" property="pri_grapefruit" /></td>
53                 </tr>
54                 <tr>
55                     <td>5</td>
56                     <td>桃子</td>
57                     <td>￥5.5</td>
58                     <td><jsp:getProperty name = "car" property="num_peach" /></td>
59                     <td><jsp:getProperty name = "car" property="pri_peach" /></td>
60                 </tr>
61             </tbody>
62         </table>
63         <div>總價為：<jsp:getProperty  name="car" property="total_price"/></div>
64         <button>立即付款</button>
65         <a href="goods.jsp"><button>取消訂單</button></a>
66      </jsp:useBean>
67 </body>
68 </html>

View Code

8.javaBean的計算代碼ShopCar.CountPrice

  1 package ShopCar;
  2 
  3 public class CountPrice {
  4     private double num_apple;
  5     private double num_orange;
  6     private double num_banana;
  7     private double num_grapefruit;
  8     private double num_peach;
  9     private double pri_apple;
 10     private double pri_orange;
 11     private double pri_banana;
 12     private double pri_grapefruit;
 13     private double pri_peach;
 14     private double total_price;
 15 
 16     public double getNum_apple() {
 17         return num_apple;
 18     }
 19 
 20     public void setNum_apple(double num_apple) {
 21         this.num_apple = num_apple;
 22         this.setPri_apple(num_apple * 5.0);
 23     }
 24 
 25     public double getNum_orange() {
 26         return num_orange;
 27     }
 28 
 29     public void setNum_orange(double num_orange) {
 30         this.num_orange = num_orange;
 31         this.setPri_orange(num_orange * 3.0);
 32     }
 33 
 34     public double getNum_banana() {
 35         return num_banana;
 36 
 37     }
 38 
 39     public void setNum_banana(double num_banana) {
 40         this.num_banana = num_banana;
 41         this.setPri_banana(num_banana * 2.0);
 42     }
 43 
 44     public double getNum_grapefruit() {
 45         return num_grapefruit;
 46     }
 47 
 48     public void setNum_grapefruit(double num_grapefruit) {
 49         this.num_grapefruit = num_grapefruit;
 50         this.setPri_grapefruit(num_grapefruit * 4.5);
 51     }
 52 
 53     public double getNum_peach() {
 54         return num_peach;
 55     }
 56 
 57     public void setNum_peach(double num_peach) {
 58         this.num_peach = num_peach;
 59         this.setPri_peach(num_peach * 5.5);
 60     }
 61 
 62     public double getPri_apple() {
 63         return pri_apple;
 64     }
 65 
 66     public void setPri_apple(double pri_apple) {
 67         this.pri_apple = pri_apple;
 68     }
 69 
 70     public double getPri_orange() {
 71         return pri_orange;
 72     }
 73 
 74     public void setPri_orange(double pri_orange) {
 75         this.pri_orange = pri_orange;
 76     }
 77 
 78     public double getPri_banana() {
 79         return pri_banana;
 80     }
 81 
 82     public void setPri_banana(double pri_banana) {
 83         this.pri_banana = pri_banana;
 84     }
 85 
 86     public double getPri_grapefruit() {
 87         return pri_grapefruit;
 88     }
 89 
 90     public void setPri_grapefruit(double pri_grapefruit) {
 91         this.pri_grapefruit = pri_grapefruit;
 92     }
 93 
 94     public double getPri_peach() {
 95         return pri_peach;
 96     }
 97 
 98     public void setPri_peach(double pri_peach) {
 99         this.pri_peach = pri_peach;
100     }
101 
102     public double getTotal_price() {
103         this.total_price = this.getPri_apple() + this.getPri_banana()
104                 + this.getPri_grapefruit() + this.getPri_grapefruit()
105                 + this.getPri_orange() + this.getPri_peach();
106         return total_price;
107     }
108 }

View Code

附：本次實驗還有很多不完善的地方，花費了較長的時間，不想總結，餓了！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 一個簡單的購物車程序用java代碼寫一個簡單的網上購物車程序 python簡單購物車程序 python基礎-實現購物車程序 Python購物車程序 python3寫的簡單購物車程序初學 python 之購物車程序實現原理使用MongoDB和JSP實現一個簡單的購物車系統使用MongoDB和JSP實現一個簡單的購物車系統利用Vue實現一個簡單的購物車功能