JSP+Servlet 實現：理財產品信息管理系統

一、接業務，作分析 1、大致業務要求 1.1　使用 JSP+Servlet 實現理財產品信息管理系統，MySQL5.5 作為後臺資料庫，實現查看理財和增加理財功能 1.2　查詢頁面效果圖 1.3　添加新信息頁面效果圖 2、查詢頁面要求 2.1　打開首頁頁面，預設顯示所有記錄，且按發售起始日降序排序 ...

一、接業務，作分析

1、大致業務要求

1.1　使用 JSP+Servlet 實現理財產品信息管理系統，MySQL5.5 作為後臺資料庫，實現查看理財和增加理財功能

1.2　查詢頁面效果圖

查詢頁面效果圖

1.3　添加新信息頁面效果圖

添加新信息頁面效果圖

2、查詢頁面要求

2.1　打開首頁頁面，預設顯示所有記錄，且按發售起始日降序排序，查詢列表使用樣式實現標題字體、標題背景色和隔行變色效果

分析：初始頁面為 Servlet 然後返回至主界面，且包括 ArrayList<> 集合框架的返回值。主頁中通過 <c:forEach 在表格中顯示數據並控制行數，在 <c:forEach 中添加 <c:if 判斷當前是第幾條信息，若為偶數次數，則給出相應的 css 樣式相反，加一個 <c:if 去控制非偶數次數的信息，不給出 css 樣式

 1 <c:forEach items="${requestScope.fdata }"  begin="0" var="f" varStatus="status">                    
 2     <c:if test="${status.index%2==0}">
 3         <tr align="center">
 4             <td>
 5                 ${f.getId() }
 6             </td>
 7             <td>
 8                 ${f.getRisk() }
 9             </td>
10             <td>
11                 ${f.getIncome() }
12             </td>
13             <td>
14                 ${f.getSaleStarting() }
15             </td>
16             <td>
17                 ${f.getSaleEnd() }
18             </td>
19             <td>
20                 ${f.getEnd() }
21             </td>
22         </tr>                    
23     </c:if>
24     <c:if test="${status.index%2!=0}">
25         <tr class="tabletrBackGroundHui" align="center">
26             <td>
27                 ${f.getId() }
28             </td>
29             <td>
30                 ${f.getRisk() }
31             </td>
32             <td>
33                 ${f.getIncome() }
34             </td>
35             <td>
36                 ${f.getSaleStarting() }
37             </td>
38             <td>
39                 ${f.getSaleEnd() }
40             </td>
41             <td>
42                 ${f.getEnd() }
43             </td>
44         </tr>                    
45     </c:if>
46 </c:forEach>

<c:forEach

2.2　其中產品代碼為模糊查找，理財風險評級下拉框中包括：R1、R2、R3 三種風險類型，當選擇某一種理財風險評級後，點擊“查詢”按鈕，篩選出符合條件的理財信息

分析：兩條輸入框有四種情況，根據不同的四種情況作出不同的查詢語句查詢

註：若皆為空，默默查詢全部信息

1 sql="select * from financingproduct where id like '%"+id+"%' and risk like '%"+fx+"%'";

模糊查詢語句

3、添加新拍產品信息頁面要求

3.1　當用戶輸入產品代碼後，使用 Ajax 非同步校驗所輸入的產品代碼是否與資料庫中已經存在的記錄的產品代碼重覆，如果重覆，則給出提示“代碼不可用”，反之提示“代碼可用”

分析:將輸入信息傳至 Servlet 中，調用資料庫，查詢該數據是否存在於資料庫中。返回 boolean 型值

3.2　當點擊“保存”按鈕後，要求使用 jQuery 編碼實現對輸入數據的內容驗證，要求所有輸入項不能為空，風險評級不能是預設選項“――請選擇――”，日期必須滿足“yyyy-MM-dd”的格式

分析：將按鈕綁定事件，在事件中先完成數據的校驗，再將表單提交至 Servlet ，返回資料庫影響行數。給出提示信息，如果成功則給出信息後跳轉至 GetListServlet 中獲取數據，轉到主頁面顯示全部信息

3.3　當輸入數據驗證通過後，則提交至新增理財的 Servlet，進行中文亂碼處理並實現數據保存。如添加成功則給出成功提示，如添加失敗則給出失敗信息並跳轉至新增理財頁面。

分析：表單提交後在 Servlet 中驗證，使用 if 語句根據不同結果返回添加頁面，給出結果信息

二、架構設計思路

架構設計思維導圖

三、資料庫設計

資料庫設計

四、項目框架搭建

4.1、jsp 頁面實現

4.1.1　查詢信息的主頁面

 1                 <tr class="tabletrBackGroundHui"><td>產品代碼</td><td>風險評級</td><td>預期收益</td><td>發售起始日</td><td>發簡訊截止日</td><td>產品到期日</td></tr>
 2                 <c:forEach items="${requestScope.fdata }"  begin="0" var="f" varStatus="status">
 3                     <!--   <c:set var="i" scope="session" value="${2000*2}"/><c:out value="${salary}"/>   -->
 4                     <c:if test="${status.index%2==0}">
 5                         <tr align="center"><td>${f.getId() }</td><td>${f.getRisk() }</td><td>${f.getIncome() }</td><td>${f.getSaleStarting() }</td><td>${f.getSaleEnd() }</td><td>${f.getEnd() }</td></tr>                    
 6                     </c:if>
 7                     <c:if test="${status.index%2!=0}">
 8                         <tr class="tabletrBackGroundHui" align="center"><td>${f.getId() }</td><td>${f.getRisk() }</td><td>${f.getIncome() }</td><td>${f.getSaleStarting() }</td><td>${f.getSaleEnd() }</td><td>${f.getEnd() }</td></tr>                    
 9                     </c:if>
10                 </c:forEach>

查詢頁面部分代碼

4.1.2　添加新信息的添加頁面

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

此頁面需要使用 ajax 在<head>中導入

  1 <script type="text/javascript">
  2 //    驗證，產品代碼是否可用
  3     function check() {
  4         var productId = document.getElementById("productId");
  5         if (productId.value != "") {
  6             //document.write(userid.value);
  7             //document.getElementById("userid").innerHTML="hellod";
  8 
  9             if (window.XMLHttpRequest) {
 10                 xmlhttp = new XMLHttpRequest();
 11             } else {
 12                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 13             }
 14             xmlhttp.onreadystatechange = function() {
 15                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 16                     document.getElementById("AjaxTsInfo").innerHTML = xmlhttp.responseText;
 17                     //alert("hello");
 18                 }
 19             };
 20             xmlhttp.open("POST", "CheckServlet?productId=" + productId.value,true);
 21             xmlhttp.send();
 22         } else if (productId.value == "") {
 23             document.getElementById("AjaxTsInfo").innerHTML = "內容不能為空";
 24         }
 25     }
 26 </script>
 27 <script type="text/javascript">
 28     // 使用 jQuery 實現表單提交內容驗證，並彈出警告框
 29     $(function() {
 30         $("#savesave").bind('click', sendsms);
 31         function sendsms() {
 32             if ($("#productId").val() == "" || $("#productSy").val() == ""
 33                     || $("#productSt").val() == ""
 34                     || $("#productEn").val() == ""
 35                     || $("#productDq").val() == "") {
 36                 alert("內容不能為空");
 37                 return false;
 38             }
 39             if ($("#productFx").val() == null) {
 40             
 41                 alert("請選擇產品風險級別");
 42                 return false;
 43             }
 44             // dateFormat = /^(\d{4})-(\d{2})-(\d{2})$/;
 45             var str1 = $("#productSt").val();
 46             var str2 = $("#productEn").val();
 47             var str3 = $("#productDq").val();
 48             // if (dateFormat.test(str1) && dateFormat.test(str2){}
 49             
 50             function isDate(dateString) {
 51                 if (dateString.trim() == "")
 52                     return true;
 53                 //年月日正則表達式
 54                 var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
 55                 if (r == null) {
 56                     alert("請輸入格式正確的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2008-08-08\n\r");
 57                     return false;
 58                 }
 59                 var d = new Date(r[1], r[3] - 1, r[4]);
 60                 var num = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
 61                 if (num == 0) {
 62                     alert("請輸入格式正確的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2008-08-08\n\r");
 63                 }
 64                 return (num != 0);
 65             }
 66             if(isDate(str1) && isDate(str2) && isDate(str3)){
 67                 // alert($("#AjaxTsInfo").text());
 68                 // $("#AjaxTsInfo").val($('#pageNum').text())
 69                 if($.trim($("#AjaxTsInfo").text()) == "代碼可用"){    
 70                 
 71             
 72                 
 73                     // 方式二，
 74                     $.ajax({
 75                     //幾個參數需要註意一下
 76                         type: "POST",//方法類型
 77                         dataType: "text",//預期伺服器返回的數據類型
 78                         url: "AddServlet" ,//url
 79                         data: $('#form1').serialize(),
 80                         success: function (result) {
 81                             // console.log(result);    // 列印服務端返回的數據(調試用)
 82                             if (result == 11) {
 83                                 alert("SUCCESS");
 84                                 window.location.href='GetListServlet';
 85                                 return;
 86                             };
 87                             alert("失敗了");
 88                         },
 89                         error : function() {
 90                             alert("異常！");
 91                         }
 92                     });
 93                     
 94                     
 95                     
 96                             
 97                 }else{
 98                     alert("代碼已標註不可用");
 99                 }
100             }else{
101                 return false;
102             }
103          };
104     });
105     
106     
107     
108 </script>

添加信息頁面 JavaScript 驗證（比較多，寫在<head>標簽中）

4.2、工程架構實現

4.2.1　創建Web project 工程

註：Context root URL 一般情況下與工程名相同，不建議修改

4.2.2　創建主包

4.2.3　創建主包下的子包 dao、entity、service、servlet

4.2.4　在 WebRoot 文件夾下創建 jsp 頁面，將寫好的頁面寫入 jsp 文件中

4.2.5　示例圖：

Web project 文件圖示例

4.3、具體細節實現

4.3.1　dao

編寫資料庫連接類，financingproduct 資料庫操作的相關方法集合類

4.3.2　entity

編寫實體類

4.3.3　service

    /**
     * 查詢方法
     * 調用 Dao 類
     * 根據輸入的 財品 id 判斷該 id 是否已經存在
     */
    public boolean checkAjaxInfo(String poctionId){
        return new FinancingProductDao().checkAjaxInfo(poctionId);
    }

FinancingProductDao 示例代碼

4.3.4　servlet

頁面轉至控制層處理數據返回結果信息

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        String productId=request.getParameter("productId");
        productId = new String(productId.getBytes("iso-8859-1"),"gb2312");
        if(!new FinancingProductService().checkAjaxInfo(productId)){
            // 可用
            response.getWriter().println("代碼可用");
        }else{
            // 不可用
            response.getWriter().println("代碼不可用");    
        }

CheckServlet 示例代碼

4.3.5　Tomcat 7.x

( 1 ) 在 Manage Deployments 中部署項目

( 2 ) 在 Servers 選項卡中，啟動 Tomcat 7.x

( 3 ) 在瀏覽中訪問項目，地址：http://localhost:8080/FinancingProductSys/

五、項目功能實現

5.1、模糊查詢 SQL 語句

        request.setCharacterEncoding("utf-8");
        String id = request.getParameter("productId");
        String fx = request.getParameter("productFx");
//        System.out.println(id+"****"+fx);
        if(id==null && fx==null){
            // 查詢全部信息
            // 初始值
            ArrayList<FinancingProduct> fdata = new ArrayList<FinancingProduct>();
            fdata = new FinancingProductService().getInfo();
            request.setAttribute("fdata", fdata);
            request.getRequestDispatcher("index.jsp").forward(request,response);            
        }else if (id.equals("") && fx==null){
            // 查詢全部信息
            // 產品為空且風險級別為空
            ArrayList<FinancingProduct> fdata = new ArrayList<FinancingProduct>();
            fdata = new FinancingProductService().getInfo();
            request.setAttribute("fdata", fdata);
            request.getRequestDispatcher("index.jsp").forward(request,response);        
        }else if(!id.equals("") && fx==null){
            // 查詢全部信息
            // 僅有產品代碼
            fx="";
            ArrayList<FinancingProduct> fdata = new ArrayList<FinancingProduct>();
            fdata = new FinancingProductService().getInfo(id,fx);
            request.setAttribute("fdata", fdata);
            request.getRequestDispatcher("index.jsp").forward(request,response);            
        }else{            
            // 查詢部分信息
            ArrayList<FinancingProduct> fdata = new ArrayList<FinancingProduct>();
            fdata = new FinancingProductService().getInfo(id,fx);
            request.setAttribute("fdata", fdata);
            request.getRequestDispatcher("index.jsp").forward(request,response);    
        }

GetListServlet 示例代碼

5.2、隔行添加表格底色

創建一個 css 樣式，在 <c:forEach>中利用 varStatus="status" 屬性。在 <c:if> 判斷當前為第幾條信息，如可被 1 餘 0，給其添加樣式。（代碼見上查詢頁面主頁面）

5.2、添加新信息頁面數據校驗

詳情代碼見上（添加新信息的添加頁面）

        request.setCharacterEncoding("utf-8");
        String productId = request.getParameter("productId");
        String productFxx = request.getParameter("productFx");
        int fx = Integer.parseInt(productFxx);
        String productSy = request.getParameter("productSy");
        String productSt = request.getParameter("productSt");
        String productEn = request.getParameter("productEn");
        String productDq = request.getParameter("productDq");
        
        FinancingProduct fp = new FinancingProduct();
        fp.setId(productId);
        fp.setRisk(fx);
        fp.setIncome(productSy);
        fp.setSaleStarting(productSt);
        fp.setSaleEnd(productEn);
        fp.setEnd(productDq);
        int n = -1 ;
        n = new FinancingProductService().addNewInfo(fp);
//        System.out.println(n);
        if(n>0){
            response.getWriter().println("11");
        }else{
            response.getWriter().println("00");            
        }

AddServlet 示例代碼

六、總結

當你的能力滿足不了你的野心的時候，就該靜下心下好好學習。

人生中的一切改變都是，日常一點一點積累起來的