基於Servlet&Jsp的網上書店設計(三)

時間  2019-12-06
標籤 基於 servlet&jsp servlet jsp 網上 書店 設計 欄目 JSP 简体版
原文   原文鏈接

六，本設計Servlet&Jsp代碼實現過程javascript

用一句話歸納，用戶在客戶端請求jsp頁面，jsp頁面將結果提交到Servlet，由Servlet負責處理結果，訪問數據庫等操做，並將參數結果放在request，session，application等元素中，而後經過請求轉發和重定向轉發到其餘jsp頁面或者Servletcss

6.1進入主頁和查看書籍詳細信息功能html

客戶經過客戶端請求地址http://localhost:8080/ShoppingCart/frame.jsp，請求主頁面，主頁面採用框架標籤frameset，框架中頁面再轉發請求Http://localhost:8080/ShoppingCart/PageQueryServlet，  返回的books.jsp頁面前端

frame.Jsp的代碼
java

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>喵喵網上書店</title>     
  7.   </head>    
  8.    
  9.    <frameset cols="25%,75%" frameborder="NO" border="0" framespacing="0">  
  10.        <frame src="login.jsp" noresize scrolling="no" name="leftframe">       
  11.        <frame src="Http://localhost:8080/ShoppingCart/PageQueryServlet" name="rightframe" noresize scrolling="yes">       
  12.    </frameset>  
  13. </html>  

PageQueryServlet.Java的Servlet是分頁顯示書籍的代碼mysql

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.List;  
  6.   
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11. import com.Dao.PageQueryDao;  
  12. import com.beans.Book;  
  13.   
  14. public class PageQueryServlet extends HttpServlet {  
  15.   
  16.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  17.             throws ServletException, IOException {  
  18.           int currpage=1;  
  19.           if(request.getParameter("page")!=null){  
  20.               currpage=Integer.parseInt(request.getParameter("page"));  
  21.           }  
  22.           
  23.          PageQueryDao pagedao=new PageQueryDao();  
  24.          List<Book> list=pagedao.getPageList(currpage);//查詢當前頁記錄  
  25.          request.setAttribute("list", list);   
  26.          int pages;   //計算查詢總頁數  
  27.          int count=pagedao.FindCounts();  
  28.          if(count%Book.PAGE_SIZE==0){  
  29.              pages=count/Book.PAGE_SIZE;  
  30.          }  
  31.          else{  
  32.              pages=count/Book.PAGE_SIZE+1;  
  33.          }  
  34.            
  35.          StringBuffer sb=new StringBuffer();  
  36.          //構建分頁條  
  37.          for(int i=1;i<=pages;i++){  
  38.              if(i==currpage){  
  39.                  sb.append("『" + i + "』");  
  40.              }  
  41.              else{  
  42.                  sb.append("<a href='PageQueryServlet?page="+i+"'>"+i+"</a>");  
  43.              }  
  44.              sb.append(" ");  
  45.          }  
  46.          request.setAttribute("bar", sb.toString());  
  47.          request.getRequestDispatcher("books.jsp").forward(request, response);  //請求轉發    
  48.     }  
  49.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  50.         doGet(request, response);  
  51.     }  
  52.   
  53. }  

Books.jsp是顯示書籍web

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@page import="java.util.List"%>  
  3. <%@page import="com.beans.Book"%><html>  
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  5. <html>  
  6.   <head>  
  7.     <title>圖書信息列表</title>  
  8.   
  9.     <!-- 
  10.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  11.     -->  
  12.     <style type="text/css">  
  13.         a:link{color:#FF4500;text-decoration:none}/*未訪問，紅色，無下劃線*/  
  14.         a:active{color:blue;}/*激活，紅色*/  
  15.         a:visited{color:red;text-decoration:none}/*已訪問，紫色，無下劃線*/  
  16.         a:hover{color:yellow;text-decoration:underline}/*鼠標移動上面，藍色，下劃線*/  
  17.     </style>  
  18.   </head>  
  19.     
  20.   <body bgcolor="#98FB98" >  
  21.         <br><br>  
  22.        <table align="center" width="900">  
  23.           <tr>  
  24.              <td align="center" colspan="6" valign="baseline">  
  25.                  <h2 style=" font-family:隸書;color:#0A0A0A;font-size:50px">喵喵網上書店</h2>  
  26.              </td>  
  27.           </tr>  
  28.             <%! int i=1,j=1; %>  
  29.            <% List<Book> list=(List<Book>)request.getAttribute("list");%>  
  30.            <% for(j=1;j<=2;j++){ %>  
  31.              <tr >  
  32.             <%   
  33.                for(Book b:list){   
  34.                    if(j==2){  
  35.                      if(b.getBookId()<=3||(b.getBookId()>=7&&b.getBookId()<=9)) continue;  
  36.                    }                           
  37.              %>           
  38.             <td width="100" height="140"><img src="images/<%=String.valueOf(b.getBookId()-1) %>.jpg"/></td>  
  39.             <td width="160">   
  40.                  <font color="#0000FF" face="隸書">ISDN :<%=b.getBookId() %></font><br>  
  41.                  <font color="#0000FF" face="隸書"> 書 名:<%=b.getName() %></font><br>  
  42.                  <font color="#0000FF" face="隸書"> 做 者:<%=b.getAuthor() %></font><br>  
  43.                  <font color="#0000FF" face="隸書">出 版:<%=b.getPublisher() %></font><br>  
  44.                  <font color="#0000FF" face="隸書">價 格:<%=b.getPrice() %> </font><br>     
  45.                     <a href="BookInfo/<%=b.getBookId()%>.jsp?bookid=<%=b.getBookId()%>">查看詳細信息</a>                             
  46.             </td>   
  47.                <% if(b.getBookId()%3==0) break; %>                           
  48.           <%} %>     
  49.           </tr>  
  50.           <%} %>           
  51.           <tr>  
  52.             <td align="right" colspan="6"><%= request.getAttribute("bar") %></td>            
  53.           </tr>  
  54.        </table>  
  55.   </body>  
  56. </html>  
結果圖：



點擊「查看詳細信息」會把該書的bookId放入request中，而後跳轉到相應的書的詳細信息頁：ajax

Id=1的書的代碼，1.jspsql

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ page import="com.Dao.BookDao" %>  
  3. <%@ page import="com.beans.Book" %>  
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  5. <html>  
  6.   <head>  
  7.     <title>三國演義</title>  
  8.     <!-- 
  9.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  10.     -->  
  11.     <style type="text/css">  
  12.         a:link{color:blue;text-decoration:none}/*未訪問，紅色，無下劃線*/  
  13.         a:active{color:blue;}/*激活，紅色*/  
  14.         a:visited{color:yellow;text-decoration:none}/*已訪問，紫色，無下劃線*/  
  15.         a:hover{color:blue;text-decoration:underline}/*鼠標移動上面，藍色，下劃線*/  
  16.     </style>  
  17.   
  18.   </head>   
  19.   <body  bgcolor="#98FB98" >  
  20.         <% int bookid=Integer.parseInt(request.getParameter("bookid"));    
  21.             BookDao bookdao=new BookDao();     
  22.             Book b=bookdao.getBookById(bookid);    
  23.             String msg=(String)request.getAttribute("msg");                     
  24.          %>  
  25.          
  26.         <br><br><br><br>  
  27.       <form action="http://localhost:8080/ShoppingCart/CheckLogin?bookid=<%=b.getBookId() %>" method="post" name="checkform">  
  28.         <table align="center"  width="800">  
  29.              <tr>  
  30.                 <td width="100" height="140"><img src="Http://localhost:8080/ShoppingCart/images/<%=String.valueOf(b.getBookId()-1) %>.jpg"/></td>  
  31.                 <td >   
  32.                   <font color="#000000" face="隸書" size="4">ISDN :<%=b.getBookId() %></font><br>  
  33.                   <font color="#000000" face="隸書" size="4"> 書 名:<%=b.getName() %></font><br>  
  34.                   <font color="#000000" face="隸書" size="4"> 做 者:<%=b.getAuthor() %></font><br>  
  35.                   <font color="#000000" face="隸書" size="4">出 版:<%=b.getPublisher() %></font><br>  
  36.                   <font color="#000000" face="隸書" size="4">價 格:<%=b.getPrice() %> </font><br>                                             
  37.                 </td>   
  38.              </tr>  
  39.              <tr><td colspan="2"> <hr color="#FF0000"></td></tr>    
  40.                
  41.              <tr>  
  42.                <td colspan="2"> <h2><font color="#8B0000" face="隸書">簡介：</font></h2></td>  
  43.              </tr>    
  44.                
  45.              <tr>  
  46.                <td colspan="2">    
  47.                <p style="font-family:'楷體'">      《三國演義》是中國第一部長篇章回體歷史演義小說，以描寫東漢末年的戰爭爲主，反映了魏、蜀、吳三個政治集團之間的政治和軍事鬥爭。分爲黃巾之亂、董卓之亂、三國鼎立三大部分。在廣闊的背景上，上演了一幕幕氣勢磅礴的戰爭場面。</p>  
  48.                <p style="font-family:'楷體'">      羅貫中將兵法三十六計融於字裏行間，既有情節，也有兵法韜略。本書反映了豐富的歷史內容，人物名稱、地理名稱、主要事件和人物性格與《三國志》基本相同，是在固定形象基礎上，進行再發揮，這也是歷史演義小說的套路。本書一方面反映了真實的三國曆史，照顧到讀者但願瞭解真實歷史的須要；另外一方面，根據明朝社會的實際狀況對三國人物進行了誇張、美化、醜化等等。</p></td>  
  49.              </tr>  
  50.                  
  51.               <tr>  
  52.                 <td colspan="2" align="right">                  
  53.                 <input value="加入購物車" type="submit">  <a href="Http://localhost:8080/ShoppingCart/PageQueryServlet">繼續購物</a></td>  
  54.                </tr>           
  55.         </table>                
  56.      </form>  
  57.        <% if(msg!=null){ %>  
  58.               <%=msg %>  
  59.          <%} %>  
  60.   </body>  
  61. </html>  

結果圖：

在該頁面中點擊「加入購物車」，請求會提交到CheckLogin的Servlet，在該Servlet中完成檢查用戶有無登陸的操做和將書加入到該用戶的購物車的操做。若是用戶爲登陸會「用戶爲登陸」窗口提示信息，若是登陸了，就成功加入了該用戶的購物車，感受淘寶的模式有點像，點擊該用戶的「查看個人購物車」便可看到剛加的書籍。若購物車中有書籍會提示「此書已加入購物車，請勿重複添加！」，只需在購物車中調整購買數量便可。數據庫

CheckLogin.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10. import javax.servlet.http.HttpSession;  
  11.   
  12. import com.Dao.BookDao;  
  13. import com.Dao.CartDao;  
  14. import com.beans.Book;  
  15.   
  16. public class CheckLogin extends HttpServlet {  
  17.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  18.             throws ServletException, IOException {  
  19.         response.setCharacterEncoding("gb2312");  
  20.         HttpSession session=request.getSession();   
  21.         //String user=(String) session.getAttribute("user");//從session中獲取用戶  
  22.           
  23.         System.out.println("加入購物車");  
  24.         String bookid=request.getParameter("bookid");  
  25.         BookDao bookdao=new BookDao();  
  26.         Book b=bookdao.getBookById(Integer.parseInt(bookid));//經過傳過來的bookid返回書的對象  
  27.           
  28.         System.out.println("以獲取用戶");  
  29.         if( session.getAttribute("userid")==null){//若是用戶未登陸  
  30.             System.out.println("用戶未空");  
  31.             request.setAttribute("msg", "<script language='javascript'>window.alert('用戶未登陸！');</script>");  
  32.             request.getRequestDispatcher("BookInfo/"+b.getBookId()+".jsp").forward(request, response);  
  33.         }  
  34.         else{  
  35.             //加入購物車的操做            
  36.             CartDao cartdao=new CartDao();  
  37.             String userid=(String)session.getAttribute("userid");  
  38.             //System.out.println(b.getName());  
  39.             //System.out.println((String)session.getAttribute("userid"));     
  40.             boolean cc=cartdao.isContainBook(userid, bookid);  
  41.             if(cc){//若是此書已添加  
  42.                 request.setAttribute("msg", "<script language='javascript'>window.alert('此書已加入購物車，請勿重複添加！');</script>");  
  43.                 request.getRequestDispatcher("BookInfo/"+b.getBookId()+".jsp").forward(request, response);  
  44.             }else{//若是此書沒添加  
  45.                   
  46.                 boolean bb=cartdao.InsertBook((String)session.getAttribute("userid"), b);  
  47.                 if(bb){//若是插入書籍成功  
  48.                     /*PrintWriter out=response.getWriter(); 
  49.                     out.print("<script language='javascript'>window.alert('成功加入購物車！');</script>");               
  50.                     out.flush(); 
  51.                     out.close();*/  
  52.                     request.setAttribute("msg", "<script language='javascript'>window.alert('成功加入購物車！');</script>");  
  53.                     request.getRequestDispatcher("BookInfo/"+b.getBookId()+".jsp").forward(request, response);  
  54.                 }  
  55.                 else{     
  56.                     request.setAttribute("msg", "<script language='javascript'>window.alert('加入購物車失敗！');</script>");  
  57.                     request.getRequestDispatcher("BookInfo/"+b.getBookId()+".jsp").forward(request, response);  
  58.                 }  
  59.                   
  60.             }             
  61.         }  
  62.     }  
  63.   
  64. }  

6.2用戶註冊和用戶登陸功能

在用戶登陸使用以前用戶首先要註冊，註冊過程我採用的是爲每一個用戶新建一張表，這張表就表明了該用戶的購物車，存放的是該用戶選購的書籍

Register.jsp是顯示註冊的代碼

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>用戶註冊</title>  
  7.     <!-- 
  8.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  9.     -->  
  10.     <script type="text/javascript">  
  11.           var select=document.getElementByName("header");  
  12.           var options=select.getElementsByTagName("option");  
  13.           var placeholder=document.getElementsByName("place");  
  14.           function selectheader(){  
  15.                placeholder.src=select.value;  
  16.                  
  17.           }  
  18.     </script>  
  19.     <script type="text/javascript">  
  20.        function login(){  
  21.             if(document.registerform.ID.value==""){  
  22.               window.alert("帳號不能爲空！");  
  23.               return ;  
  24.             }  
  25.             if(document.registerform.Password.value==""){  
  26.               window.alert("密碼不能爲空！");  
  27.               return ;  
  28.             }  
  29.             registerform.submit();  
  30.        }  
  31.         function cancelregister(){  
  32.             document.registerform.method="post";  
  33.             document.registerform.target="_top";  
  34.             document.registerform.action="http://localhost:8080/ShoppingCart/frame.jsp";  
  35.             document.registerform.submit();  
  36.         }  
  37.          
  38.     </script>  
  39.   </head>  
  40.   <body bgcolor="#98FB98">  
  41.     <br><br><br><br>  
  42.     <form action="RegServlet" name="registerform" method="post">  
  43.                  
  44.        <table align="center"  width="300" >  
  45.          <tr>  
  46.             <td colspan="2" align="center" style="color:#00F;font-size;36px" rowspan="1"><b>用戶註冊</b></td>  
  47.          </tr>  
  48.          <tr>  
  49.             <td>帳    號：</td>  
  50.             <td><input name="ID" type="text" > </td>  
  51.          </tr>  
  52.          <tr>  
  53.             <td>密    碼：</td>  
  54.             <td><input name="Password" type="password" > </td>  
  55.          </tr>  
  56.          <tr>  
  57.             <td>性    別:</td>  
  58.             <td><input name="Sex" type="radio" value="男">男 <input name="Sex" type="radio" value="女">女</td><!--單選按鈕-->  
  59.          </tr>  
  60.          <tr>  
  61.            <td>電話號碼：</td>  
  62.            <td><input name="Phone" type="text"/></td>  
  63.          </tr>  
  64.         <tr>  
  65.             <td>家    鄉：</td>  
  66.             <td>  
  67.               <select name="Home" ><!--下拉列表-->  
  68.                 <option value="北    京">北     京</option>  
  69.                 <option value="上   海">上   海</option>  
  70.                 <option value="廣   州">廣   州</option>  
  71.                 <option value="深    圳">深    圳</option>               
  72.               </select>  
  73.              </td>  
  74.          </tr>  
  75.          <tr>  
  76.            <td>電子郵件：</td>  
  77.            <td><input name="Email" type="text"/></td>  
  78.          </tr>  
  79.          <tr>  
  80.              <td>上傳頭像：</td>  
  81.              <td >  
  82.                 <div  style="border:1px solid;width:50px;height:50px;" >  
  83.                    <img name="place" src="Sheader/1.jpg" width="50" height="50"></img>                 
  84.                  </div>    
  85.                   <select name="Header" style="width:50px;" onclick="selectheader()"><!--下拉列表-->  
  86.                      <option value="Sheader/1.jpg" >1</option>  
  87.                      <option value="Sheader/2.jpg" >2</option>  
  88.                      <option value="Sheader/3.jpg" >3</option>  
  89.                      <option value="Sheader/4.jpg" >4</option>  
  90.                      <option value="Sheader/5.jpg" >5</option>      
  91.                      <option value="Sheader/6.jpg" >6</option>      
  92.                      <option value="Sheader/7.jpg" >7</option>      
  93.                      <option value="Sheader/8.jpg" >8</option>      
  94.                      <option value="Sheader/9.jpg" >9</option>      
  95.                      <option value="Sheader/10.jpg" >10</option>                   
  96.                 </select>                                                                     
  97.              </td>               
  98.          </tr>  
  99.          <tr>  
  100.             <td></td>  
  101.             <td><input type="submit" value=" 注    冊 " > <input type="button" value=" 取    消 "  onclick="cancelregister()"></td>  
  102.          </tr>  
  103.        </table>           
  104.      </form>  
  105.   </body>  
  106. </html>  
結果圖：


該註冊頁面點擊「取消」會返回顯示書籍的主頁面，點擊「註冊」請求提交到RegServlet，註冊成功以後會彈出一個註冊成功提示框而且數據庫會生成以帳號爲表名的表：


RegServlet.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.sql.Connection;  
  6. import java.sql.PreparedStatement;  
  7. import java.sql.SQLException;  
  8.   
  9. import javax.servlet.ServletException;  
  10. import javax.servlet.http.HttpServlet;  
  11. import javax.servlet.http.HttpServletRequest;  
  12. import javax.servlet.http.HttpServletResponse;  
  13.   
  14. import com.Dao.UserDao;  
  15. import com.tools.DBConnection;  
  16.   
  17. public class RegServlet extends HttpServlet {  
  18.       
  19.   
  20.     private static final long serialVersionUID = 1L;  
  21.   
  22.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  23.             throws ServletException, IOException {  
  24.            request.setCharacterEncoding("UTF-8");  
  25.            response.setCharacterEncoding("UTF-8");  
  26.            response.setContentType("text/html");  
  27.              
  28.            String id= request.getParameter("ID");  
  29.            String password=request.getParameter("Password");  
  30.            String sex= request.getParameter("Sex");  
  31.            String phone=request.getParameter("Phone");  
  32.            String home=request.getParameter("Home");  
  33.            String email=request.getParameter("Email");  
  34.            String header=request.getParameter("Header");  
  35.              
  36.            DBConnection DB=new DBConnection();  
  37.            Connection conn=null;  
  38.            conn=DB.getCon();  
  39.      if(conn!=null){      
  40.         try {  
  41.              UserDao dao=new UserDao();  
  42.             if(!dao.isContainUser(id)){//是否存在用戶                
  43.                 String sql="insert into users values(?,?,?,?,?,?,?)";  
  44.                 PreparedStatement pstm=conn.prepareStatement(sql);  
  45.                 pstm.setString(1, id);  
  46.                 pstm.setString(2, password);  
  47.                 pstm.setString(3, sex);  
  48.                 pstm.setString(4, phone);  
  49.                 pstm.setString(5, home);  
  50.                 pstm.setString(6, email);  
  51.                 pstm.setString(7, header);  
  52.                 pstm.executeUpdate();  
  53.                 System.out.println("註冊成功！");  
  54.                 //同時新建一張購車表，即每一個用戶註冊成功都會建一張表  
  55.                 String sql1="create table "+id+"(ID int(20),Name varchar(20),Price varchar(20),Num int(20),Total int(20),primary key(ID))";  
  56.                 PreparedStatement pstm1=conn.prepareStatement(sql1);  
  57.                 pstm1.executeUpdate();  
  58.                 response.sendRedirect("Http://localhost:8080/ShoppingCart/PageQueryServlet");//登陸成功後重定向到books界面  
  59.             }  
  60.             else{  
  61.                 PrintWriter out=response.getWriter();  
  62.                 out.print("<script language='javascript'>window.alert('註冊失敗！');</script>");               
  63.                 out.flush();  
  64.                 out.close();  
  65.                 System.out.println("用戶已存在！");  
  66.             }  
  67.                   
  68.              
  69.         } catch (SQLException e) {  
  70.             // TODO Auto-generated catch block  
  71.             e.printStackTrace();  
  72.         }  
  73.              
  74.     }  
  75.     }  
  76. }  

Bug分析：

原本想搞個上傳頭像的功能，可是感受圖片規格大小之類的技術不太會，只想出了使用剪輯好了的圖片做爲備選項，想實現選中了某個頭像就更換顯示對應的頭像，這涉及了web前端的JavaScript知識，我只懂一點點，因此就沒有修改了……

用戶登陸功能：

Login.jsp

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>網上書店</title>  
  7.       <script language="javascript" src="JS/AjaxRequest.js"></script>  
  8.      <!--javascript語言寫的代碼塊-->  
  9.     <script type="text/javascript">  
  10.        function login(){  
  11.             if(document.loginform.id.value==""){  
  12.               window.alert("帳號不能爲空！");  
  13.               return ;  
  14.             }  
  15.             if(document.loginform.password.value==""){  
  16.               window.alert("密碼不能爲空！");  
  17.               return ;  
  18.             }  
  19.             loginform.submit();  
  20.        }  
  21.         function register(){  
  22.             document.loginform.method="post";  
  23.             document.loginform.target="rightframe";  
  24.             document.loginform.action="register.jsp";  
  25.             document.loginform.submit();  
  26.         }  
  27.          
  28.     </script>  
  29.      <script type="text/javascript">  
  30.        /***********錯誤處理方法*********/  
  31.        function onerror(){  
  32.          alert("您的操做有誤！");  
  33.        }  
  34.         /***********實例化ajax對象的方法*********/  
  35.        function getInfo(){  
  36.            var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");  
  37.              
  38.        }  
  39.         /***********回調函數*********/  
  40.        function deal_getInfo(){  
  41.           document.getElementById("showInfo").innerHTML=this.req.responseText;  
  42.        }  
  43.          
  44.        window.onload=function(){  
  45.             getInfo();  //調用getInfo()方法獲取公告信息  
  46.             window.setInterval("getInfo()", 600000);    //每隔10分鐘調用一次getInfo()方法  
  47.        }  
  48.      </script>  
  49.      <style type="text/css">  
  50.         a:link{color:red;text-decoration:none}/*未訪問，紅色，無下劃線*/  
  51.         a:active{color:blue;}/*激活，紅色*/  
  52.         a:visited{color:yellow;text-decoration:none}/*已訪問，紫色，無下劃線*/  
  53.         a:hover{color:blue;text-decoration:underline}/*鼠標移動上面，藍色，下劃線*/  
  54.      </style>  
  55.   </head>  
  56.   <body bgcolor="#98FB98" >  
  57.        <form action="LoginServlet" name="loginform" method="post">  
  58.          <h2 align="center" style=" font-family:隸書">歡迎登錄網上書店系統</h2><br>           
  59.        <table align="center" style="border:1px solid">  
  60.          <tr>  
  61.             <td><font color="blue"><b>帳 號：</b></font></td>  
  62.             <td><input name="id" type="text"> </td>  
  63.          </tr>  
  64.          <tr>  
  65.             <td><font color="blue"><b>密 碼：</b></font></td>  
  66.             <td><input name="password" type="password" size="20"> </td>  
  67.          </tr>  
  68.          <tr>  
  69.             <td></td>  
  70.             <td><input type="button" value="登  錄" onclick="login()">  
  71.                   
  72.              <input type="button" value="當即註冊" onclick="register()">    
  73.             </td>            
  74.          </tr>  
  75.        </table>            
  76.      </form>  
  77.       <table align="center" style="border:1px solid">  
  78.        <tr bgcolor="#FF0000">  
  79.           <td colspan="2" >  
  80.                                   公告信息：  
  81.           </td>  
  82.        </tr>   
  83.          <tr >  
  84.             <td colspan="2" width="215" height="100">         
  85.                 <marquee direction="up" scrollamount="3" onmouseout="this.start()" onmouseover="this.stop()">  
  86.                   <div id="showInfo" ></div>  
  87.                 </marquee>  
  88.             </td>  
  89.          </tr>  
  90.          <tr bgcolor="#FF0000">  
  91.           <td colspan="2" >  
  92.                                   友情連接：  
  93.           </td>  
  94.        </tr>   
  95.        <tr >  
  96.           <td colspan="2" >  
  97.             <a href="http://www.hust.edu.cn/" target="_blank"><font face="隸書" color="#FF4500" size="4">華中科技大學</font></a><br>  
  98.             <a href="http://portal.ccnu.edu.cn/" target="_blank"><font face="隸書" color="#FF4500" size="4">華中師範大學</font></a><br>  
  99.             <a href="http://www.cug.edu.cn/new/" target="_blank"><font face="隸書" color="#FF4500" size="4">中國地質大學</font></a><br>  
  100.             <a href="http://www.whut.edu.cn/2015web/index.htm" target="_blank"><font face="隸書" color="#FF4500" size="4">武漢理工大學</font></a>                             
  101.           </td>  
  102.        </tr>   
  103.        </table>  
  104.   </body>  
  105. </html>  

該頁面有三部分，登陸框，公告信息，友情連接。

登陸框很簡單form提交到LoginServlet就能夠了，在LoginServlet中查詢數據庫判斷等操做：

LoginServlet.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.List;  
  6.   
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11. import javax.servlet.http.HttpSession;  
  12.   
  13. import com.Dao.BookDao;  
  14. import com.Dao.UserDao;  
  15. import com.beans.Book;  
  16. import com.beans.User;  
  17.   
  18. public class LoginServlet extends HttpServlet {  
  19.   
  20.     private static final long serialVersionUID = 1L;  
  21.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  22.         doPost(request, response);  
  23.     }  
  24.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  25.             throws ServletException, IOException {  
  26.         request.setCharacterEncoding("UTF-8");  
  27.         response.setCharacterEncoding("UTF-8");  
  28.         response.setContentType("text/html");  
  29.         System.out.println("接收數據");  
  30.         String id=request.getParameter("id");//得到用戶名  
  31.         String password=request.getParameter("password");//得到密碼  
  32.         UserDao dao=new UserDao();  
  33.         BookDao bdao=new BookDao();  
  34.         User user=null;  
  35.         user=dao.getUser(id, password);  
  36.         HttpSession session=request.getSession();  
  37.           
  38.         if(user!=null){  
  39.             System.out.println("用戶已查到");  
  40.             session.setAttribute("userid",user.getID());//把查到的用戶放進session中，便於登陸檢查         
  41.             response.sendRedirect("loginsuccess.jsp");  
  42.         }  
  43.         else  
  44.         {  
  45.             PrintWriter out=response.getWriter();  
  46.             out.print("<script type='text/javascript'>");  
  47.             out.print("window.alert('用戶名或密碼不正確！');");  
  48.             out.print("</script>");  
  49.             out.flush();  
  50.             out.close();  
  51.         }  
  52.          
  53.     }  
  54.   
  55. }  

公告信息採用Ajax技術，不刷新頁面更新

關鍵代碼：

[html]  view plain  copy
 print ?
  1. <tr bgcolor="#FF0000">  
  2.           <td colspan="2" >  
  3.                 公告信息：  
  4.           </td>  
  5.        </tr>   
  6.          <tr >  
  7.             <td colspan="2" width="215" height="100">         
  8.                 <marquee direction="up" scrollamount="3" onmouseout="this.start()" onmouseover="this.stop()">  
  9.                   <div id="showInfo" ></div>  
  10.                 </marquee>  
  11.             </td>  
  12.          </tr>  

主要是javascript代碼

[javascript]  view plain  copy
 print ?
  1. <script type="text/javascript">  
  2.        /***********錯誤處理方法*********/  
  3.        function onerror(){  
  4.          alert("您的操做有誤！");  
  5.        }  
  6.         /***********實例化ajax對象的方法*********/  
  7.        function getInfo(){  
  8.            var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");  
  9.              
  10.        }  
  11.         /***********回調函數*********/  
  12.        function deal_getInfo(){  
  13.           document.getElementById("showInfo").innerHTML=this.req.responseText;  
  14.        }  
  15.          
  16.        window.onload=function(){  
  17.             getInfo();  //調用getInfo()方法獲取公告信息  
  18.             window.setInterval("getInfo()", 600000);    //每隔10分鐘調用一次getInfo()方法  
  19.        }  
  20.      </script>  
結果圖：

6.3查看購物車，商品結算和生成訂單功能

點擊「查看個人購物車」，表單提交到CartServlet，在此CartServlet中查詢該用戶的購物車表，查詢全部已添加到購物車的書籍，並請求轉發到Carts.jsp

CartServlet.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.List;  
  6.   
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11. import javax.servlet.http.HttpSession;  
  12.   
  13. import com.Dao.CartDao;  
  14. import com.beans.CartBook;  
  15.   
  16. public class CartServlet extends HttpServlet {  
  17.   
  18.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  19.         doPost(request, response);  
  20.     }  
  21.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  22.             throws ServletException, IOException {  
  23.             HttpSession session=request.getSession();  
  24.             String userId=(String) session.getAttribute("userid");//登陸成功後用戶的Id放在session中  
  25.             System.out.println(userId);  
  26.               
  27.             String m=request.getParameter("m");//刪除書籍的時候判斷標記  
  28.             if(m!=null){  
  29.                  if(m.equals("1")){  
  30.                   request.setAttribute("msg", "<script language='javascript'>window.alert('成功刪除！');</script>");  
  31.                }  
  32.                else if(m.equals("0")){  
  33.                 request.setAttribute("msg", "<script language='javascript'>window.alert('刪除失敗！');</script>");  
  34.                }  
  35.                else if(m.equals("2")){  
  36.                    request.setAttribute("msg", "<script language='javascript'>window.alert('清空購物車失敗！');</script>");  
  37.                }  
  38.             }  
  39.                        
  40.             CartDao ccdao=new CartDao();  
  41.             List<CartBook> list=ccdao.getAllCartBooks((String)session.getAttribute("userid"));  
  42.             request.setAttribute("booklist", list);//把已購買的書單放進request中  
  43.             request.getRequestDispatcher("Carts.jsp").forward(request, response);             
  44.     }  
  45.       
  46. }  

Carts.jsp

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ page import="com.beans.CartBook" import="com.Dao.CartDao"%>  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>購物車</title>  
  7.     <!-- 
  8.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  9.     -->  
  10.     <style type="text/css">  
  11.         a:link{color:#FF4500;text-decoration:none}/*未訪問，紅色，無下劃線*/  
  12.         a:active{color:blue;}/*激活，紅色*/  
  13.         a:visited{color:red;text-decoration:none}/*已訪問，紫色，無下劃線*/  
  14.         a:hover{color:yellow;text-decoration:underline}/*鼠標移動上面，藍色，下劃線*/  
  15.     </style>  
  16.   
  17.   </head>    
  18.   <body bgcolor="#98FB98">  
  19.     <br> <br> <br>  
  20.        
  21.        <table align="center"   width="900" >  
  22.           <tr bgcolor="#ff0000" >  
  23.              <td colspan="8"><font face="隸書" size="5" >個人購物車</font></td>  
  24.           </tr>  
  25.           <tr>  
  26.             <td width="60" align="center" ><font color="blue"><b>商品</b></font></td>  
  27.             <td align="center" ><font color="blue"><b>商品名稱</b></font></td>  
  28.             <td align="center"><font color="blue"><b>價格</b></font></td>  
  29.              <td align="center" width="20"></td>  
  30.             <td align="center" width="60"><font color="blue"><b>數量</b></font></td>  
  31.             <td align="center" width="20"></td>  
  32.             <td align="center"><font color="blue"><b>總價</b></font></td>            
  33.             <td align="center"><font color="blue"><b>操做</b></font></td>  
  34.           </tr>  
  35.            <tr>  
  36.             <td colspan="8"><hr></td>  
  37.           </tr>  
  38.           <%   
  39.              List<CartBook> list=(List<CartBook>)request.getAttribute("booklist");  
  40.               String userid=(String) session.getAttribute("userid");  
  41.               CartDao cdao=new CartDao();  
  42.               int total=cdao.getTotalPrice(userid);   
  43.              // int total=0;    
  44.               int i=1;        
  45.               System.out.print(list.size());            
  46.           %>  
  47.           <%   
  48.             if(list.size()==0){  
  49.           %>   
  50.             <tr>  
  51.                <td colspan="8" align="center" height="30">請添加書籍!</td>  
  52.             </tr>  
  53.           <%       
  54.             }  
  55.             else{  
  56.               
  57.              for(i=0;i<list.size();i++){  
  58.           %>  
  59.            <tr align="center">  
  60.              <td height="80" width="60"><img src="Simages/<%=list.get(i).getBookId()-1 %>.jpg"></td>  
  61.              <td align="center"><%=list.get(i).getName() %></td>  
  62.              <td align="center">￥<%=list.get(i).getPrice()%></td>  
  63.              <td align="center" width="20">                           
  64.              <form action="UpdateNumServlet?bookidtext=<%=list.get(i).getBookId() %>" method="post" name="numform"><!--減數量 -->  
  65.                 <br>   
  66.                 <input value="-" type="submit" name="sub" >                
  67.                 <input type="hidden" value="-1" name="hid">   
  68.               </form>  
  69.              </td>  
  70.                  
  71.               <td align="center"  width="60">   
  72.                <input type="text"   size="10" readonly  value="<%=list.get(i).getNum() %>" style="text-align:center">   
  73.               </td>  
  74.                 
  75.              <td align="center" width="20">  
  76.              <form action="UpdateNumServlet?bookidtext=<%=list.get(i).getBookId() %>" method="post" ><!-- 加數量 -->   
  77.                 <br>   
  78.                 <input value="+" type="submit" name="add" >  
  79.                 <input type="hidden" value="1" name="hid">   
  80.              </form>       
  81.              </td>  
  82.              <td align="center">￥<%=list.get(i).getTotal()%></td>  
  83.              <td align="center">  
  84.               <a href="http://localhost:8080/ShoppingCart/DeleteBookServlet?bookid=<%=list.get(i).getBookId()%>">刪除</a>              
  85.              </td>  
  86.            </tr>           
  87.           <%} }%>  
  88.           <tr>  
  89.             <td colspan="8"><hr></td>  
  90.           </tr>  
  91.           <tr>   
  92.              <td width="80">總金額：</td>   
  93.              <td colspan="7">￥<%=total %></td>  
  94.            </tr>   
  95.           <tr>  
  96.             <td colspan="8"><hr></td>  
  97.           </tr>  
  98.           <tr>  
  99.             <td colspan="2">              
  100.                 
  101.             <a href="ClearCartServlet">清空購物車</a>  
  102.             </td>  
  103.             <td align="right"  colspan="6" valign="bottom">  
  104.               <form action="orders.jsp" method="post">  
  105.                  <br>  
  106.                 <input value="商品結算" type="submit">   <a href="http://localhost:8080/ShoppingCart/PageQueryServlet">返回繼續購物</a>  
  107.               </form>            
  108.             </td>  
  109.           </tr>    
  110.           <tr>  
  111.             <td colspan="8"><hr></td>  
  112.           </tr>         
  113.        </table>  
  114.         <%   
  115.          String msg=(String)request.getAttribute("msg");  //彈窗信息  
  116.       if(msg!=null){ %>  
  117.               <%=msg %>  
  118.          <%} %>  
  119.   </body>  
  120. </html>  

購物車結果圖：


在這個購物車頁面中會有比較多的功能,好比：刪除書籍，清空購物車，修改書籍數量，商品結算等功能

刪除書籍：
點擊「刪除」請求提交到DeleteBookServlet，該Servlet中實現刪除操做

DeleteBookServlet.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10. import javax.servlet.http.HttpSession;  
  11.   
  12. import com.Dao.CartDao;  
  13.   
  14. public class DeleteBookServlet extends HttpServlet {  
  15.   
  16.     private static final long serialVersionUID = 1L;  
  17.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  18.         doPost(request, response);  
  19.     }  
  20.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  21.             throws ServletException, IOException {  
  22.            request.setCharacterEncoding("UTF-8");  
  23.            response.setCharacterEncoding("UTF-8");  
  24.            HttpSession session=request.getSession();  
  25.            String userid=(String)session.getAttribute("userid");  
  26.            String bookid=request.getParameter("bookid");  
  27.              
  28.            CartDao cartdao=new CartDao();  
  29.            boolean b=cartdao.DeleteBook(userid, Integer.parseInt(bookid));//刪除書籍  
  30.            if(b){  
  31.                System.out.println("刪除成功");        
  32.                response.sendRedirect("http://localhost:8080/ShoppingCart/CartServlet?m=1");  
  33.            }  
  34.            else{  
  35.                  
  36.                response.sendRedirect("http://localhost:8080/ShoppingCart/CartServlet?m=0");  
  37.            }          
  38.     }  
  39.   
  40. }  

清空購物車：

點擊「清空購物車」，請求提交到ClearCartServlet

ClearCartServlet.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10. import javax.servlet.http.HttpSession;  
  11.   
  12. import com.Dao.CartDao;  
  13.   
  14. public class ClearCartServlet extends HttpServlet {  
  15.   
  16.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  17.         doPost(request, response);  
  18.     }  
  19.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  20.             throws ServletException, IOException {  
  21.              
  22.            HttpSession session=request.getSession();  
  23.            String userid=(String)session.getAttribute("userid");  
  24.              
  25.            CartDao cd=new CartDao();  
  26.             boolean b=cd.ClearCartBook(userid);  
  27.             if(b){  
  28.                 response.sendRedirect("http://localhost:8080/ShoppingCart/CartServlet");  
  29.             }  
  30.             else{  
  31.                 response.sendRedirect("http://localhost:8080/ShoppingCart/CartServlet?m=2");  
  32.             }  
  33.     }  
  34.   
  35. }  

修改書籍數量:點擊「+」/「-」操做，請求提交到UpdateNumServlet，修改數量以後總價格也會變化，修改完成以後重定向到本頁面

UpdateNumServlet.java

[java]  view plain  copy
 print ?
  1. package com.servlets;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10. import javax.servlet.http.HttpSession;  
  11.   
  12. import com.Dao.CartDao;  
  13.   
  14. public class UpdateNumServlet extends HttpServlet {  
  15.   
  16.     private static final long serialVersionUID = 1L;  
  17.   
  18.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  19.             throws ServletException, IOException {  
  20.            request.setCharacterEncoding("UTF-8");  
  21.            HttpSession session=request.getSession();  
  22.            String userid=(String)session.getAttribute("userid");  
  23.            int bookid=Integer.parseInt((String)request.getParameter("bookidtext"));  
  24.            String hid=(String)request.getParameter("hid");  
  25.            int dnum=Integer.parseInt(hid);//hid的值是+1，-1  
  26.              
  27.            CartDao cd=new CartDao();  
  28.            cd.ModifyNum(userid, bookid, dnum);  
  29.            System.out.println("進入修改數目servlet");  
  30.            response.sendRedirect("http://localhost:8080/ShoppingCart/CartServlet");  
  31.     }  
  32.   
  33. }  

商品結算：

點擊「商品結算」，請求提交到orders.jsp

[html]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>填寫訂單</title>  
  7.     <!-- 
  8.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  9.     -->  
  10.   </head>    
  11.   <body bgcolor="#98FB98">  
  12.       <form action="OrderServlet" method="post">  
  13.       <br><br>  
  14.        <table align="center"  width="900" >  
  15.           <tr>  
  16.             <td colspan="2" bgcolor="#FFC125"><b>填寫訂單信息:</b></td>              
  17.           </tr>  
  18.           <tr>  
  19.             <td colspan="2"><hr></td>  
  20.           </tr>  
  21.           <tr >  
  22.             <td colspan="2" bgcolor="#FFE4B5">收貨人信息</td>  
  23.           </tr>  
  24.           <tr>  
  25.             <td width="150">收  貨  人：</td>  
  26.             <td><input type="text" name="receiver"></td>  
  27.           </tr>  
  28.            <tr>  
  29.             <td width="150">詳細地址：</td>  
  30.             <td><input type="text" name="address" size="70"></td>  
  31.           </tr>  
  32.            <tr>  
  33.             <td width="150">郵政編碼：</td>  
  34.             <td><input type="text" name="post"></td>  
  35.           </tr>  
  36.            <tr>  
  37.             <td width="150">移動電話：</td>  
  38.             <td><input type="text" name="mobile">         固定電話：<input type="text" name="fixphone">(如：027-12345678)</td>  
  39.           </tr>  
  40.           <tr  bgcolor="#FFE4B5">  
  41.              <td colspan="2">送貨方式：</td>  
  42.           </tr>  
  43.           <tr>  
  44.             <td colspan="2" ><input type="radio" name="songhuoway" value="<b>普通快遞送貨上門  。</b>【運費5元】 ">普通快遞送貨上門     
  45.                             送貨時間：  
  46.                    <select name="songhuotime" style="width:150px">  
  47.                          <option value="--請選擇送貨時間--" >--請選擇送貨時間--</option>   
  48.                          <option value="送貨時間：三天內." >三天內</option> &
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程