一、接业务,作分析

1、大致业务要求

1.1 使用 JSP+Servlet 实现理财产品信息管理系统,MySQL5.5 作为后台数据库,实现查看理财 和增加理财功能

1.2 查询页面效果图

JSP+Servlet 实现:理财产品信息管理系统

1.3 添加新信息页面效果图

JSP+Servlet 实现:理财产品信息管理系统

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 语句根据不同结果返回添加页面,给出结果信息

二、架构设计思路

JSP+Servlet 实现:理财产品信息管理系统

三、数据库设计

JSP+Servlet 实现:理财产品信息管理系统

四、项目框架搭建

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>中导入

相关文章: