一、接業務，作分析
1、大緻業務要求
1.1 使用 JSP+Servlet 實作理财産品資訊管理系統，MySQL5.5 作為背景資料庫，實作檢視理财 和增加理财功能
1.2 查詢頁面效果圖
1.3 添加新資訊頁面效果圖
2、查詢頁面要求
2.1 打開首頁頁面，預設顯示所有記錄，且按發售起始日降序排序，查詢清單使用樣式實作标題字 體、标題背景色和隔行變色效果
分析：初始頁面為 Servlet 然後傳回至主界面，且包括 ArrayList<> 集合架構的傳回值。首頁中通過
1
2
3
4
5 ${f.getId() }6
7
8 ${f.getRisk() }9
10
11 ${f.getIncome() }12
13
14 ${f.getSaleStarting() }15
16
17 ${f.getSaleEnd() }18
19
20 ${f.getEnd() }21
22
23
24
25
26
27 ${f.getId() }28
29
30 ${f.getRisk() }31
32
33 ${f.getIncome() }34
35
36 ${f.getSaleStarting() }37
38
39 ${f.getSaleEnd() }40
41
42 ${f.getEnd() }43
44
45
46
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
産品代碼風險評級預期收益發售起始日發短信截止日産品到期日
2
3
4
5
${f.getId() }${f.getRisk() }${f.getIncome() }${f.getSaleStarting() }${f.getSaleEnd() }${f.getEnd() }
6
7
8
${f.getId() }${f.getRisk() }${f.getIncome() }${f.getSaleStarting() }${f.getSaleEnd() }${f.getEnd() }
9
10
查詢頁面部分代碼
4.1.2 添加新資訊的添加頁面
此頁面需要使用 ajax 在
中導入
1
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 = newXMLHttpRequest();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
27
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
添加資訊頁面 JavaScript 驗證( 比較多，寫在
标簽中 )
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 示例圖：
4.3、具體細節實作
4.3.1 dao
編寫資料庫連接配接類，financingproduct 資料庫操作的相關方法集合類
4.3.2 entity
編寫實體類
4.3.3 service
public booleancheckAjaxInfo(String poctionId){return newFinancingProductDao().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(!newFinancingProductService().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 fdata = new ArrayList();
fdata= newFinancingProductService().getInfo();
request.setAttribute("fdata", fdata);
request.getRequestDispatcher("index.jsp").forward(request,response);
}else if (id.equals("") && fx==null){//查詢全部資訊//産品為空且風險級别為空
ArrayList fdata = new ArrayList();
fdata= newFinancingProductService().getInfo();
request.setAttribute("fdata", fdata);
request.getRequestDispatcher("index.jsp").forward(request,response);
}else if(!id.equals("") && fx==null){//查詢全部資訊//僅有産品代碼
fx="";
ArrayList fdata = new ArrayList();
fdata= newFinancingProductService().getInfo(id,fx);
request.setAttribute("fdata", fdata);
request.getRequestDispatcher("index.jsp").forward(request,response);
}else{//查詢部分資訊
ArrayList fdata = new ArrayList();
fdata= newFinancingProductService().getInfo(id,fx);
request.setAttribute("fdata", fdata);
request.getRequestDispatcher("index.jsp").forward(request,response);
}
GetListServlet 示例代碼
5.2、隔行添加表格底色
建立一個 css 樣式，在 中利用 varStatus="status" 屬性。在 判斷目前為第幾條資訊，如可被 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= newFinancingProduct();
fp.setId(productId);
fp.setRisk(fx);
fp.setIncome(productSy);
fp.setSaleStarting(productSt);
fp.setSaleEnd(productEn);
fp.setEnd(productDq);int n = -1;
n= newFinancingProductService().addNewInfo(fp);//System.out.println(n);
if(n>0){
response.getWriter().println("11");
}else{
response.getWriter().println("00");
}
AddServlet 示例代碼
六、總結
當你的能力滿足不了你的野心的時候，就該靜下心下好好學習。
人生中的一切改變都是，日常一點一點積累起來的