一、接业务，作分析

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. activmq点对点（简单写法）

    开发环境 我们使用的是ActiveMQ 5.11.1 Release的Windows版,官网最新版是ActiveMQ 5.12.0 Release,大家可以自行下载,下载地址. 需要注意的是,开发时候 ...

  2. vue 选择图片（限定大小）上传到服务器

    FormData:  https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects  成果: htm ...

  3. django_5：表单1——文件上传

    上传文件1 class UserForm(forms.Form): name = forms.CharField() headImg = forms.FileField() def regist(re ...

  4. 剑指Offer-20.包含min函数的栈(C++/Java)

    题目: 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 分析: 因为题目要求得到栈中最小元素的min函数时间复杂度为O(1),这里便不选择遍历栈 ...

  5. vant-ui的van-area使用

    由于官方例子中并没有太多详情,因此记录之,方便以后使用. 1.配置 :area-list="areaList",以初始化全部省市区的数据,其中area.js文件在官方可以下载,放于 ...

  6. 原创｜我是如何从零学习开发一款跨平台桌面软件的（Markdown编辑器）

    原始冲动 最近一直在学习 Electron 开发桌面应用程序,目的是想做一个桌面编辑器,虽然一直在使用Typore这款神器,但无奈Typore太过国际化,在国内水土不服,无法满足我的一些需求. 比如实 ...

  7. IO流之ZipInputStream和ZipOutputStream的认识及使用

    转载https://blog.csdn.net/weixin_39723544/article/details/80611810 工具类 import java.io.*;import java.ut ...

  8. 部署k8s集群监控Heapster

    git clone https://github.com/kubernetes/heapster.gitkubectl apply -f heapster/deploy/kube-config/inf ...

  9. vue中router跳转本页刷新

    问题:  导航栏的地址发生改变但是页面却不刷新  (用vue-router路由到当前页面,页面是不进行刷新的)解决: 1.);           2.location.reload()       ...

  10. Liunx 安装配置zsh和oh-my-zsh 替换 bash

    一.前言 本文将基于 Liunx 环境安装配置zsh 和 oh-my-zsh 替换 bash oh my zsh Liunx默认shell是单调的bash,而zsh比较高大上,bash有的功能,zsh ...