一、接業務，作分析
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="https://www.cnblogs.com/debjJava/p/${2000*2}"/><c:out value="https://www.cnblogs.com/debjJava/p/${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 =https://www.cnblogs.com/debjJava/p/="") {
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='https://www.cnblogs.com/debjJava/p/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 示例圖：
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 = https://www.cnblogs.com/debjJava/p/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 = https://www.cnblogs.com/debjJava/p/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 = https://www.cnblogs.com/debjJava/p/new ArrayList<FinancingProduct>();
fdata = new FinancingProductService().getInfo(id,fx);
request.setAttribute("fdata", fdata);
request.getRequestDispatcher("index.jsp").forward(request,response);
}else{
// 查詢部分資訊
ArrayList<FinancingProduct> fdata = https://www.cnblogs.com/debjJava/p/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 示例代碼
六、總結
當你的能力滿足不了你的野心的時候，就該靜下心下好好學習，
人生中的一切改變都是，日常一點一點積累起來的
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/35283.html
標籤：架構設計
上一篇：從2-3-4樹模型到紅黑樹實作