一、接业务，作分析

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 样式

 <c:forEach items="${requestScope.fdata }"  begin="0" var="f" varStatus="status">

     <c:if test="${status.index%2==0}">

         <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>

     </c:if>

     <c:if test="${status.index%2!=0}">

         <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>

     </c:if>

 </c:forEach>

<c:forEach

2.2　其中产品代码为模糊查找，理财风险评级下拉框中包括：R1、R2、R3 三种风险类型，当选择 某一种理财风险评级后，点击“查询”按钮，筛选出符合条件的理财信息

分析：两条输入框有四种情况，根据不同的四种情况作出不同的查询语句查询

注：若皆为空，默默查询全部信息

 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　查询信息的主页面

                 <tr class="tabletrBackGroundHui"><td>产品代码</td><td>风险评级</td><td>预期收益</td><td>发售起始日</td><td>发短信截止日</td><td>产品到期日</td></tr>

                 <c:forEach items="${requestScope.fdata }"  begin="0" var="f" varStatus="status">

                     <!--   <c:set var="i" scope="session" value="${2000*2}"/><c:out value="${salary}"/>   -->

                     <c:if test="${status.index%2==0}">

                         <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>

                     </c:if>

                     <c:if test="${status.index%2!=0}">

                         <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>

                     </c:if>

                 </c:forEach>

查询页面部分代码

4.1.2　添加新信息的添加页面

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

此页面需要使用 ajax 在<head>中导入

 <script type="text/javascript">

 //    验证，产品代码是否可用

     function check() {

         var productId = document.getElementById("productId");

         if (productId.value != "") {

             //document.write(userid.value);

             //document.getElementById("userid").innerHTML="hellod";

             if (window.XMLHttpRequest) {

                 xmlhttp = new XMLHttpRequest();

             } else {

                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

             }

             xmlhttp.onreadystatechange = function() {

                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                     document.getElementById("AjaxTsInfo").innerHTML = xmlhttp.responseText;

                     //alert("hello");

                 }

             };

             xmlhttp.open("POST", "CheckServlet?productId=" + productId.value,true);

             xmlhttp.send();

         } else if (productId.value == "") {

             document.getElementById("AjaxTsInfo").innerHTML = "内容不能为空";

         }

     }

 </script>

 <script type="text/javascript">

     // 使用 jQuery 实现表单提交内容验证，并弹出警告框

     $(function() {

         $("#savesave").bind('click', sendsms);

         function sendsms() {

             if ($("#productId").val() == "" || $("#productSy").val() == ""

                     || $("#productSt").val() == ""

                     || $("#productEn").val() == ""

                     || $("#productDq").val() == "") {

                 alert("内容不能为空");

                 return false;

             }

             if ($("#productFx").val() == null) {

                 alert("请选择产品风险级别");

                 return false;

             }

             // dateFormat = /^(\d{4})-(\d{2})-(\d{2})$/;

             var str1 = $("#productSt").val();

             var str2 = $("#productEn").val();

             var str3 = $("#productDq").val();

             // if (dateFormat.test(str1) && dateFormat.test(str2){}

             function isDate(dateString) {

                 if (dateString.trim() == "")

                     return true;

                 //年月日正则表达式

                 var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);

                 if (r == null) {

                     alert("请输入格式正确的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2008-08-08\n\r");

                     return false;

                 }

                 var d = new Date(r[1], r[3] - 1, r[4]);

                 var num = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);

                 if (num == 0) {

                     alert("请输入格式正确的日期\n\r日期格式：yyyy-mm-dd\n\r例    如：2008-08-08\n\r");

                 }

                 return (num != 0);

             }

             if(isDate(str1) && isDate(str2) && isDate(str3)){

                 // alert($("#AjaxTsInfo").text());

                 // $("#AjaxTsInfo").val($('#pageNum').text())

                 if($.trim($("#AjaxTsInfo").text()) == "代码可用"){    

                     // 方式二，

                     $.ajax({

                     //几个参数需要注意一下

                         type: "POST",//方法类型

                         dataType: "text",//预期服务器返回的数据类型

                         url: "AddServlet" ,//url

                         data: $('#form1').serialize(),

                         success: function (result) {

                             // console.log(result);    // 打印服务端返回的数据(调试用)

                             if (result == 11) {

                                 alert("SUCCESS");

                                 window.location.href='GetListServlet';

                                 return;

                             };

                             alert("失败了");

                         },

                         error : function() {

                             alert("异常！");

                         }

                     });

                 }else{

                     alert("代码已标注不可用");

                 }

             }else{

                 return false;

             }

          };

     });

 </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 = 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 示例代码

六、总结

当你的能力满足不了你的野心的时候，就该静下心下好好学习。

人生中的一切改变都是，日常一点一点积累起来的

JSP+Servlet 实现：理财产品信息管理系统的更多相关文章

  1. 基于JSP+Servlet的学生信息管理系统

    JavaWeb期末项目,一个基于JSP和Servlet的学生信息管理系统实现,前端用了bootstrap和一些自定义的css样式,数据库用了mysql 传送门: GitHub 实现功能 登录(教师, ...

  2. 基于JSP+Servlet开发高校社团管理系统（前台+后台） 源码

    基于JSP+Servlet开发高校社团管理系统(前台+后台): 开发环境:    Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MYSQL数据库 运行效果 ...

  3. 基于jsp+servlet图书管理系统之后台用户信息删除操作

    上一篇的博客写的是修改操作,且附有源码和数据库,这篇博客写的是删除操作,附有从头至尾写的代码(详细的注释)和数据库! 此次删除操作的源码和数据库:http://download.csdn.net/de ...

  4. 基于jsp+servlet图书管理系统之后台用户信息查询操作

    上一篇的博客写的是插入操作,且附有源码和数据库,这篇博客写的是查询操作,附有从头至尾写的代码(详细的注释)和数据库! 此次查询操作的源码和数据库:http://download.csdn.net/de ...

  5. 基于jsp+servlet图书管理系统之后台用户信息修改操作

    上一篇的博客写的是查询操作,且附有源码和数据库,这篇博客写的是修改操作,附有从头至尾写的代码(详细的注释)和数据库! 此次修改操作的源码和数据库:http://download.csdn.net/de ...

  6. 基于jsp+servlet图书管理系统之后台用户信息插入操作

    前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...

  7. 从零开始，编写简单的课程信息管理系统（使用jsp+servlet+javabean架构）

    一.相关的软件下载和环境配置 1.下载并配置JDK. 2.下载eclipse. 3.下载并配置apache-tomcat(服务器). 4.下载MySQL(数据库). 5.下载Navicat for M ...

  8. [项目分享]JSP+Servlet+JDBC实现的学生信息管理系统

    本文存在视频版本,请知悉 项目简介 项目来源于:https://gitee.com/liu_xu111/JavaWeb01 这次分享一个学生管理系统,我感觉这是程序员在大学时期的毕设和课程设计选择最多 ...

  9. 基于jsp+servlet图书管理系统之后台万能模板

    前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...

随机推荐

  1. 用正则表达式获取URL中的查询参数

    总结获取url中查询参数的两种方式 通过正则表达式获取单个参数 url中的所有查询参数可以通过 window.location.search 字段获取,以字符串的形式返回.并有固定的格式 ?param ...

  2. 了解Spring的基本概念

    参考资料:https://www.jianshu.com/p/1c483bd8fd6d 在正式学习Spring框架之前,肯定有很多疑问,比如说: 1.Spring中经常出现的IOC.AOP.DI是什么 ...

  3. spark集群搭建（三台虚拟机）——zookeeper集群搭建（3）

    !!!该系列使用三台虚拟机搭建一个完整的spark集群,集群环境如下: virtualBox5.2.Ubuntu14.04.securecrt7.3.6_x64英文版(连接虚拟机) jdk1.7.0. ...

  4. C#查看已下载文件大小和扩展名

    FileInfo fi = new FileInfo(fullfile);//fullfile文件路径 ong Size = fi.Length;//查看已下载文件的大小 C# 获取文件名及扩展名 s ...

  5. nyoj 78-圈水池 (凸包)

    78-圈水池 内存限制:64MB 时间限制:3000ms 特判: No 通过数:5 提交数:6 难度:4 题目描述: 有一个牧场,牧场上有很多个供水装置,现在牧场的主人想要用篱笆把这些供水装置圈起来, ...

  6. 利用 pyhon 解决 Cross Origin Requests

    在学习 ajax 时遇到了一个问题 XMLHttpRequest cannot load file:xxxxxxxx . Cross origin requests are only supporte ...

  7. Vmware EXSI服务迁移无法访问故障处理

    Vmware EXSI服务迁移无法访问故障处理 我们在做微服务平台服务时经常在构建IAAS时,因为硬件资源的扩容.缩减等可维护性问题需要迁移或者复制方式扩容方式来快速扩建集群节点,提高微服务运营的可靠 ...

  8. Res2net：多尺度骨干网络结构

    <Res2Net: A New Multi-scale Backbone Architecture> 来自:南开大学程明明组 论文:https://arxiv.org/abs/1904.0 ...

  9. pycham永久激活及conda环境部署

    1.pycham安装 一般不选择最新版本,我用的是2018.3,选择 Professional专业版 1.1 官网地址: https://www.jetbrains.com/pycharm/downl ...

  10. Mybatis日志体系

    承接上一篇关于spring 5.x的日志体系,本篇看看Mybatis的日志体系及实现,Mybatis版本基于3.x. 关于mybatis的官方文档比较友好,分门别类,各有论述,如mybatis官方文档 ...