JSP+Servlet学习项目上

分析思路:

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");     //数据表格重新加载

转载于:https://my.oschina.net/u/3347640/blog/869603