文档章节

JSP+Servlet学习项目上

 有痣
发布于 2017/03/29 03:26
字数 2080
阅读 12
收藏 0

分析思路:

1.实现什么功能。

2.各个文件的作用

3.整体逻辑

4.各个文件的具体实现细节:知识点。

5.复杂代码的单独分析。

 

1.0版本

实现功能:

1.实现了登录界面,功能为:(1)当密码为空时提示(2)当密码错误时提示(3)密码成功时跳转到主界面

2.主界面:功能还待完善。

各个文件的作用:

1.dao包:

UserDao.java        //与数据库进行数据交流,拿到User的数据库信息

2.model包:

User.java                //User模型类

3.util包:

DbUtil.java            //链接数据库的工具类

StringUtil.java       //字符串处理的类

4.web包:

LoginServlet.java   //前端登录后与后端进行数据交互的类

5.JSP文件

index.jsp                 //登录界面

main.jsp                   //主界面

3.整体逻辑:

(1)前端表单提交数据    

(2通过request对象获取表单属性的值

(3)判断获取的属性(用户名/密码)是否为空,为空则设置request的error属性(作为返回数据)并跳转到登录界面

(4)链接数据库,获取数据库的用户名/密码,判断用户名/密码是否正确,正确则跳转页面,否则输出提示信息并跳转回当前页面(登录页面)。(这里验证用户名/密码是否正确的实现细节在下面讲。)(并涉及到服务器跳转以及客户端跳转)

4.各个文件的实现细节

(1)用户名和密码的验证

使用一个UserDao类返回验证的结果集(User类),结果集为空则错误,否则便正确,代码如下:

public User login(Connection con,User user) throws Exception{
        User resultUser=null;
        String sql="select * from t_user where userName=? and password=?";
        PreparedStatement pstmt=con.prepareStatement(sql);
        pstmt.setString(1, user.getUserName());              //设置第一个问号的内容
        pstmt.setString(2, user.getPassword());                //设置第二个问号的内容
        ResultSet rs=pstmt.executeQuery();
        if(rs.next()){
            resultUser=new User();
            resultUser.setUserName(rs.getString("userName"));
            resultUser.setPassword(rs.getString("password"));
        }
        return resultUser;
    }

(2)服务器跳转以及客户端跳转

// 服务器跳转(1.带数据2.不执行getRequestDispatcher之后的语句3.调用forward会失去response对象的传递,但是要request设置的话,是可以传递到下一个页面的)
      request.getRequestDispatcher("index.jsp").forward(request, response);

// 客户端跳转(1.不带信息)
     response.sendRedirect("main.jsp");

(3)jdbc的知识

<1>加载mysql的驱动程序:

Class.forName("com.mysql.jdbc.Driver");

<2>设置链接数据库的地址

private String dbUrl="jdbc:mysql://localhost:3306/db_studentInfo";

<3>调用DriveManager对象的getConnection()方法,获得一个Connection对象,表示一个打开的链接

Connection con=DriverManager.getConnection(dbUrl,dbUserName,dbPassword);

<4>传递不带参数的SQL语句

略,用的少

<5>Statement接口提供了3个方法提供执行SQL语句

executeQuery:

executeUpdate:

execute

<6>对resultSet结果集的处理

while(rs.next()){

}

<7>关闭链接

rs.close()

stmt.close()

conn.close()

<8>PreparedStatement用于传递带有一个或者多个输入参数的SQL语句

String sql="select * from t_user where userName=? and password=?";
PreparedStatement pstmt=con.prepareStatement(sql);

 

1.1版本

实现功能:

写了主界面:(1)添加了侧边栏以及点击侧边栏的菜单显示界面。(用easyui实现的)(2)主界面添加了权限验证。

文件作用:

大部分文件没变,只是添加了gradeInfoManage.jsp以及studentInfoManage.jsp界面(具体功能均为实现)

3整体逻辑

用easyui分了区域,写了侧边栏。

4实现难点

(1)侧边栏的实现:

<1>在div块的west区域添加了一个列表(ul),并且用js代码实现了侧边栏

<2>在侧边栏点击后会在center的 标题栏显示 并且 标题栏下的内容栏 也会一并显示

       具体实现代码:

        HTML部分:

       <div region="center">
            <div class="easyui-tabs" fit="true" border="false" id="tabs">          //标题栏
                <div title="首頁">
                    <div>
                        欢迎使用
                    </div>
                </div>
            </div>
        </div>
       <div region="west"style="width: 150px;"title="导航栏" split="true">
            <ul id="tree"></ul>
        </div>

        知识点:region属性,title属性,split属性,

        js部分:

    $(function(){
            //数据,导航栏的具体内容(层级关系 以及 文字信息 以及 链接信息)
            var treeData=[{
                text:"根",
                children:[{
                    text:"班级管理信息",
                    attributes:{
                        url:""
                    }
                },{
                    text:"学生管理信息",
                    attributes:{
                        url:""
                    }
                }]
            }];

 

                //把数据具体实现成界面,用tree()方法
            $("#tree").tree({                        
                data:treeData,
                lines:true,
                onClick:function(node){
                    if(node.attributes){
                        openTab(node.text,node.attributes.url);
                    }
                }
            });
            

                //当点击导航栏选项时右侧内容栏会出现的内容 的实现,tabs()方法
            function openTab(text,url){
                if($("#tabs").tabs('exists',text)){             //tabs方法
                    $("#tabs").tabs('select',text);
                }else{
                    var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
                    $("#tabs").tabs('add',{
                        title:text,                          //标题栏的文字
                        closable:true,                       //可关闭
                        content:content                      //标题栏下面的内容
                    });
                }
            }
        })

        知识点:tree()方法

                     tabs('select',~),tabs('exists',~),tabs('add',{~~})

(2)权限验证(当用户不是从登陆界面登陆时,跳转回登陆界面)

jsp部分代码:

    if(session.getAttribute("currentUser")==null){
//        System.out.println("滚");
        response.sendRedirect("index.jsp");
        return;
    }

selvlet代码部分:

           当登陆验证正确时,设置session属性:

    session.setAttribute("currentUser", currentUser);

 

1.2版本:

1.实现功能:数据的呈现以及分页

2.各个文件的作用

jsonUtil.java:将ResultSet里的数据转换成JSONArray格式

ResponseUtil.java:把jsonObject写入到response里

PageBean.java:

GradeDao.java:与数据库进行Grade数据交互

GradeListServlet.java:

gradeInfoManage.jsp:班级信息界面

3.GradeListServlet的整体逻辑

通过request获取请求分页的内容(通过page和rows属性),传递相关信息后,建立连接,与数据库进行交互,返回数据,转成JSONObject格式,将JSONObject写入response返回。

4.各个文件的具体实现细节

(1)gradeInfoManage.jsp的实现

          通过easyui的easyui-datagrid(数据表格)的引入。

            <table id="dg" title="班级信息" class="easyui-datagrid" fitColumns="true"                                         pagination="true" >
             <thead>
                <tr>
                    <th width="50" field="id">编号</th>
                    <th width="100" field="gradeName">班级名称</th>
                    <th width="250" field="gradeDesc">班级描述</th>    
                </tr>    
             </thead>
              </table>

            知识点:pagination="true"           //实现分页的属性

                         width="50" field="id"      //有样式的实现(其中细节未懂)

                         class="easyui-datagrid"   //table中引入这个类才会有数据表格的出现

(2)jsonUtil的实现:

知识点:

<1>ResultSetMetaData类的常用方法:

         getColumnCount(); 返回 ResultSet 中的列数。
         getColumnName(int); 返回列序号为 int 的列名。

<2>代码:

            JSONObject mapOfColValues=new JSONObject();

            mapOfColValues.put(md.getColumnName(i), rs.getObject(i));

            解析:

                JSONObject的put方法,生成一个JSON对象

                md.getColumnName(i)返回列序号为i的列名。

                rs.getObject(i)返回取出的这一行数据的第i列的数据

(3)ResponseUtil的实现

         把jsonObject.toString()写入到response中

 

1.3版本

1.实现功能:

(1)easyui toolbar工具条的引入

(2)班级信息查询实现

(3)班级信息删除实现

2.各个文件的作用:

(1)GradeDao.java的改动:参数中添加了Grade类,用以传递Grade类的gradeName名称,传递查询                                                  班级的名称时要用

                                              添加gradeDelete方法。

(2)gradeInfoManage.jsp:添加searchGrade()方法(js部分)

                                               添加deleteGrade()方法(js部分)

(3)GradeListServlet.java:添加 获取request的gradeName,用作查询时传递的参数

(4)GradeDeleteServlet.java:通过request获取delIds的值(字符串,里面为将要删除的信息的id,用“,”隔开),通过封装的方法同数据库进行交互后返回受影响的条数。

 

3.整体逻辑:

在2中已经体现

4.各个文件的具体实现细节:

(1)界面的实现:

         增加了CheckBox;增加了toolbar。(具体实现看源文件)

(2)GradeDao.java里:

sb.append(" and gradeName like '%"+grade.getGradeName()+"%'");           //搜索有xx关键字的信息。(sb为StringBuffer类)

return rs.getInt("total");     // resultSet的getInt(String)方法:获取当前数据列名为total的值。(rs为ResultSet类)

String sql="delete from t_grade where id in("+delIds+")";     //sql in用法 批量删除

(3)GradeListServlet.java里:

        String gradeName=request.getParameter("gradeName");   
        if(gradeName==null){
            gradeName="";              //保证gradeName 的值不为null(小细节)
        }

(4)GradeDeleteServlet.java里:

        基本逻辑和实现步骤同GradeListServlet。

(5)gradeInfoManage.jsp

<1>searchGrade()的实现

$('#dg').datagrid('load',{
            gradeName:$('#s_gradeName').val()      

 });  

//easyui的datagrid方法:加载和显示 为input框(id为s_gradeName)的值 的数据, 通过request传递input框里的参数
                                          

<2>deleteGrade()的实现

知识点:

var selectedRows=$("#dg").datagrid('getSelections');           //获取数据表格的被选中的信息

$.messager.alert("系统提示","请选择要删除的数据!");         //alert弹框,1参数为标题,2参数为内容

strIds.push(selectedRows[i].id);                           //将被删信息的id放入到strIds数组中

var ids=strIds.join(",");                                      //将数组中的id转化为字符串放入ids中,每个信息之间                                                                                  用,隔开,总的形成一个字符串

$.post("gradeDelete",{delIds:ids},function(result){ },"json");//AJAX的post方法:"gradeDelete"为url ,{delIds:ids}为data ,function(result)为回调函数,result为返回的结果,"json"为用json数据进行传输

 

$("#dg").datagrid("reload");     //数据表格重新加载

© 著作权归作者所有

共有 人打赏支持
上一篇: JSP+Servlet项目下
下一篇: JSON学习笔记
粉丝 0
博文 7
码字总数 6547
作品 0
广州
私信 提问
html+js+servlet和jsp+servlet的区别

搞了几年web,有个问题一直没搞清楚。一般是用html+js+servlet还是jsp+servlet,两个有什么区别,哪种方式更好一些。

爪哇小贩
2014/05/14
2.8K
2
非技术问题,前辈们,帮忙解惑,感激不尽

我是一个大三的学生,明年四月份左右就要开始找实习了。 我之前做过一些正规项目主要有: 我用c#.net做过wp上的两个软件,参加过微软创新杯,后台是webservice,但是比赛结果不佳;还做过桌面...

GatsW
2013/11/03
1K
37
jquery upload 如何带参传到后台 而java后台如何接受(jsp+servlet)

jquery upload 如何带参传到后台 而java后台如何接受(jsp+servlet)

罗培海
2016/03/09
334
1
mysql oracle之间的切换

配置了两个数据源mysql,oracle, 系统没有使用框架,jsp+servlet 当从mysql切换到oracle时,是不是sql语句也要相应的为oracle写一套

ldl123292
2013/09/02
229
2
应届7k 在杭州属于什么水平?

主要做java web开发这块,无意拿到一个小公司的offer 刚开学校招没太当回事,结果10月多好多大公司都结束了。 同学去BAT、网易等等的都有,都比我高很多。 java代码量5万行左右吧,写过sns网...

千斤难买春秋醉
2013/11/15
1K
11

没有更多内容

加载失败,请刷新页面

加载更多

Java单例模式学习记录

在项目开发中经常能遇见的设计模式就是单例模式了,而实现的方式最常见的有两种:饿汉和饱汉(懒汉)。由于日常接触较多而研究的不够深入,导致面试的时候被询问到后有点没底,这里记录一下学习...

JerryLin123
昨天
3
0
VSCODE 无法调试

VSCODE 无法调试 可以运行 可能的原因: GCC 的参数忘了加 -g

shzwork
昨天
4
0
理解去中心化 稳定币 DAI

随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器。 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的机制,真的有一点复杂。耐心看完...

Tiny熊
昨天
4
0
5.线程实现

用于线程实现的Python模块 Python线程有时称为轻量级进程,因为线程比进程占用的内存少得多。 线程允许一次执行多个任务。 在Python中,以下两个模块在一个程序中实现线程 - _thread 模块 th...

Eappo_Geng
昨天
6
0
ServiceLoader

创建一个接口文件在resources资源目录下创建META-INF/services文件夹在services文件夹中创建文件,以接口全名命名创建接口实现类 内容me.zzp.ar.d.PostgreSQLDialectme.zzp.ar.d.Hype...

Cobbage
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部