|
一、接業(yè)務(wù)，作分析 1、大致業(yè)務(wù)要求 1.1 使用 JSP+Servlet 實(shí)現(xiàn)理財(cái)產(chǎn)品信息管理系統(tǒng)，MySQL5.5 作為后臺(tái)數(shù)據(jù)庫(kù)，實(shí)現(xiàn)查看理財(cái) 和增加理財(cái)功能 1.2 查詢(xún)頁(yè)面效果圖
1.3 添加新信息頁(yè)面效果圖
2、查詢(xún)頁(yè)面要求 2.1 打開(kāi)首頁(yè)頁(yè)面，默認(rèn)顯示所有記錄，且按發(fā)售起始日降序排序，查詢(xún)列表使用樣式實(shí)現(xiàn)標(biāo)題字 體、標(biāo)題背景色和隔行變色效果 分析：初始頁(yè)面為 Servlet 然后返回至主界面，且包括 ArrayList<> 集合框架的返回值。主頁(yè)中通過(guò) <c:forEach 在表格中顯示數(shù)據(jù)并控制行數(shù)，在 <c:forEach 中添加 <c:if 判斷當(dāng)前是第幾條信息，若為偶數(shù)次數(shù)，則給出相應(yīng)的 css 樣式 相反，加一個(gè) <c:if 去控制非偶數(shù)次數(shù)的信息，不給出 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>
2.2 其中產(chǎn)品代碼為模糊查找，理財(cái)風(fēng)險(xiǎn)評(píng)級(jí)下拉框中包括：R1、R2、R3 三種風(fēng)險(xiǎn)類(lèi)型，當(dāng)選擇 某一種理財(cái)風(fēng)險(xiǎn)評(píng)級(jí)后，點(diǎn)擊“查詢(xún)”按鈕，篩選出符合條件的理財(cái)信息 分析：兩條輸入框有四種情況，根據(jù)不同的四種情況作出不同的查詢(xún)語(yǔ)句查詢(xún) 注：若皆為空，默默查詢(xún)?nèi)啃畔?/span>
1 sql="select * from financingproduct where id like '%"+id+"%' and risk like '%"+fx+"%'";
3、添加新拍產(chǎn)品信息頁(yè)面要求 3.1 當(dāng)用戶(hù)輸入產(chǎn)品代碼后，使用 Ajax 異步校驗(yàn)所輸入的產(chǎn)品代碼是否與數(shù)據(jù)庫(kù)中已經(jīng)存在的記錄的產(chǎn)品代碼重復(fù)，如果重復(fù)，則給出提示“代碼不可用”，反之提示“代碼可用” 分析:將輸入信息傳至 Servlet 中，調(diào)用數(shù)據(jù)庫(kù)，查詢(xún)?cè)摂?shù)據(jù)是否存在于數(shù)據(jù)庫(kù)中。返回 boolean 型值 3.2 當(dāng)點(diǎn)擊“保存”按鈕后，要求使用 jQuery 編碼實(shí)現(xiàn)對(duì)輸入數(shù)據(jù)的內(nèi)容驗(yàn)證，要求所有輸入項(xiàng)不能為空，風(fēng)險(xiǎn)評(píng)級(jí)不能是默認(rèn)選項(xiàng)“――請(qǐng)選擇――”，日期必須滿(mǎn)足“yyyy-MM-dd”的格式 分析：將按鈕綁定事件，在事件中先完成數(shù)據(jù)的校驗(yàn)，再將表單提交至 Servlet ，返回?cái)?shù)據(jù)庫(kù)影響行數(shù)。給出提示信息，如果成功則給出信息后跳轉(zhuǎn)至 GetListServlet 中獲取數(shù)據(jù)，轉(zhuǎn)到主頁(yè)面顯示全部信息 3.3 當(dāng)輸入數(shù)據(jù)驗(yàn)證通過(guò)后，則提交至新增理財(cái)?shù)?Servlet，進(jìn)行中文亂碼處理并實(shí)現(xiàn)數(shù)據(jù)保存。 如添加成功則給出成功提示，如添加失敗則給出失敗信息并跳轉(zhuǎn)至新增理財(cái)頁(yè)面。 分析：表單提交后在 Servlet 中驗(yàn)證，使用 if 語(yǔ)句根據(jù)不同結(jié)果返回添加頁(yè)面，給出結(jié)果信息 二、架構(gòu)設(shè)計(jì)思路
三、數(shù)據(jù)庫(kù)設(shè)計(jì)
四、項(xiàng)目框架搭建 4.1、jsp 頁(yè)面實(shí)現(xiàn) 4.1.1 查詢(xún)信息的主頁(yè)面
1 <tr class="tabletrBackGroundHui"><td>產(chǎn)品代碼</td><td>風(fēng)險(xiǎn)評(píng)級(jí)</td><td>預(yù)期收益</td><td>發(fā)售起始日</td><td>發(fā)短信截止日</td><td>產(chǎn)品到期日</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 添加新信息的添加頁(yè)面
<script src="https://cdn./jquery/1.10.2/jquery.min.js"></script>
1 <script type="text/javascript">
2 // 驗(yàn)證，產(chǎn)品代碼是否可用
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 = "內(nèi)容不能為空";
24 }
25 }
26 </script>
27 <script type="text/javascript">
28 // 使用 jQuery 實(shí)現(xiàn)表單提交內(nèi)容驗(yàn)證，并彈出警告框
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("內(nèi)容不能為空");
37 return false;
38 }
39 if ($("#productFx").val() == null) {
40
41 alert("請(qǐng)選擇產(chǎn)品風(fēng)險(xiǎn)級(jí)別");
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 //年月日正則表達(dá)式
54 var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
55 if (r == null) {
56 alert("請(qǐng)輸入格式正確的日期\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("請(qǐng)輸入格式正確的日期\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 //幾個(gè)參數(shù)需要注意一下
76 type: "POST",//方法類(lèi)型
77 dataType: "text",//預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型
78 url: "AddServlet" ,//url
79 data: $('#form1').serialize(),
80 success: function (result) {
81 // console.log(result); // 打印服務(wù)端返回的數(shù)據(jù)(調(diào)試用)
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("代碼已標(biāo)注不可用");
99 }
100 }else{
101 return false;
102 }
103 };
104 });
105
106
107
108 </script>
4.2、工程架構(gòu)實(shí)現(xiàn) 4.2.1 創(chuàng)建Web project 工程 注：Context root URL 一般情況下與工程名相同，不建議修改 4.2.2 創(chuàng)建主包 4.2.3 創(chuàng)建主包下的子包 dao、entity、service、servlet 4.2.4 在 WebRoot 文件夾下創(chuàng)建 jsp 頁(yè)面，將寫(xiě)好的頁(yè)面寫(xiě)入 jsp 文件中 4.2.5 示例圖：
4.3、具體細(xì)節(jié)實(shí)現(xiàn) 4.3.1 dao 編寫(xiě)數(shù)據(jù)庫(kù)連接類(lèi)，financingproduct 數(shù)據(jù)庫(kù)操作的相關(guān)方法集合類(lèi) 4.3.2 entity 編寫(xiě)實(shí)體類(lèi) 4.3.3 service
/**
* 查詢(xún)方法
* 調(diào)用 Dao 類(lèi)
* 根據(jù)輸入的 財(cái)品 id 判斷該 id 是否已經(jīng)存在
*/
public boolean checkAjaxInfo(String poctionId){
return new FinancingProductDao().checkAjaxInfo(poctionId);
}
4.3.4 servlet 頁(yè)面轉(zhuǎn)至 控制層 處理數(shù)據(jù)返回結(jié)果信息
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("代碼不可用");
}
4.3.5 Tomcat 7.x ( 1 ) 在 Manage Deployments 中部署項(xiàng)目 ( 2 ) 在 Servers 選項(xiàng)卡中，啟動(dòng) Tomcat 7.x ( 3 ) 在瀏覽中訪(fǎng)問(wèn)項(xiàng)目，地址：http://localhost:8080/FinancingProductSys/ 五、項(xiàng)目功能實(shí)現(xiàn) 5.1、模糊查詢(xún) SQL 語(yǔ)句
request.setCharacterEncoding("utf-8");
String id = request.getParameter("productId");
String fx = request.getParameter("productFx");
// System.out.println(id+"****"+fx);
if(id==null && fx==null){
// 查詢(xún)?nèi)啃畔? // 初始值
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){
// 查詢(xún)?nèi)啃畔? // 產(chǎn)品為空且風(fēng)險(xiǎn)級(jí)別為空
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){
// 查詢(xún)?nèi)啃畔? // 僅有產(chǎn)品代碼
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{
// 查詢(xún)部分信息
ArrayList<FinancingProduct> fdata = new ArrayList<FinancingProduct>();
fdata = new FinancingProductService().getInfo(id,fx);
request.setAttribute("fdata", fdata);
request.getRequestDispatcher("index.jsp").forward(request,response);
}
5.2、隔行添加表格底色 創(chuàng)建一個(gè) css 樣式，在 <c:forEach>中利用 varStatus="status" 屬性。在 <c:if> 判斷當(dāng)前為第幾條信息，如可被 1 余 0，給其添加樣式。（ 代碼見(jiàn)上 查詢(xún)頁(yè)面主頁(yè)面 ） 5.2、添加新信息頁(yè)面數(shù)據(jù)校驗(yàn) 詳情代碼見(jiàn)上（ 添加新信息的添加頁(yè)面 ）
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");
}
六、總結(jié) 當(dāng)你的能力滿(mǎn)足不了你的野心的時(shí)候，就該靜下心下好好學(xué)習(xí)。 人生中的一切改變都是，日常一點(diǎn)一點(diǎn)積累起來(lái)的 |
|
|
來(lái)自： Coder編程 > 《待分類(lèi)》
