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

来源:https://www.cnblogs.com/debjJava/archive/2019/12/02/11966716.html
-Advertisement-
Play Games

一、接業務,作分析 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 示例代碼

六、總結

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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天聽課聽到了Math對象中的隨機數方法random(),然後就想用它設計一個簡單的隨機點名系統。我記得之前高中的時候語文老師用過一個,是類似於名字滾動的那種,現在太菜就先不考慮這個了,後續有機會再研究吧。 先展示一下最終的效果圖。 下麵是html代碼部分 1 <!DOCTYPE html> 2 < ...
  • 下麵是常見的命名參考規範: ❤ 主體 頭部:header 內容:content/container 尾部:footer 導航:nav 側欄:sidebar 欄目:column 整體佈局:wrapper 左右中:left / right / center 登錄條:loginbar 標誌:logo 廣告 ...
  • Vue的組件是可復用的 Vue 實例,且帶有一個名字 。我們可以在一個通過 new Vue 創建的 Vue 根實例中,把這個組件作為自定義元素來使用。因為組件是可復用的 Vue 實例,所以它們與 new Vue 接收相同的選項,例如 data、computed、watch、methods 以及生命周... ...
  • CSS的基本使用 直接寫在標簽內 寫在 style 標簽內 使用外部 .css 文件 @import (不建議使用此方式) link CSS選擇器 優先順序:id選擇器 class 選擇器 標簽選擇器 標簽選擇器:標簽名{} class選擇器(“.”符號):.class名{} id選擇器(“ ”符號, ...
  • react-starter-projects These are repositories that you copy and modify to create your own React app. Pick a starter project with all the features you ...
  • 本文在 "個人主頁" 同步更新~ 背就完事了 介紹:一些知識點相關的面試題和答案 使用姿勢: 看答案前先嘗試回答,看完後把答案收起來檢驗成果~ 面試官:如何理解JS的作用域和作用域鏈 答:在ES5中,只有全局作用域和局部作用域。ES6因為let,const的引入而有了塊作用域。js在瀏覽器中的頂級作 ...
  • Spring簡介 Spring不是服務於開發web項目的功能,或業務。而是服務於項目的開發,方便各層間的解耦調用,方便對類的批量管理,是提高軟體開發效率,降低後期維護成本的框架。 Spring的核心思想是IOC(控制反轉),AOP(切麵編程)兩點。 IOC:即不再需要程式員去顯式地`new`一個對象 ...
  • 最近看到一篇關於單例模式較為詳細的講解的文章:https://coolshell.cn/articles/265.html 下麵對此文章進行摘錄 (Java) // version 1.0 最為朴素的單例模式實踐; public class Singleton { private static Si ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...